From 243a3f5acfff485ea8de4cdecf74dab443174d98 Mon Sep 17 00:00:00 2001
From: Liangyu <rilyu@sina.com>
Date: Tue, 9 May 2017 17:23:38 +0800
Subject: [PATCH] optimize animations

---
 README.md                                |  1 +
 components/SegmentedBar/SegmentedBar.js  | 21 ++++++++++++++++-----
 components/SegmentedBar/SegmentedItem.js |  4 ++--
 docs/cn/README.md                        |  1 +
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 7dfa052..991d15a 100755
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ To run example on Android:
 ```
 react-native run-android
 ```
+**Tips: In the Android system, the animations is not smooth, switch to the release mode can be resolved.**
 
 # Documentation
 The document is being written, please refer to the example source code.
diff --git a/components/SegmentedBar/SegmentedBar.js b/components/SegmentedBar/SegmentedBar.js
index 8e71479..2f58a99 100644
--- a/components/SegmentedBar/SegmentedBar.js
+++ b/components/SegmentedBar/SegmentedBar.js
@@ -112,19 +112,30 @@ export default class SegmentedBar extends Component {
 
   updateIndicator() {
     if (!this._indicatorX || !this._indicatorWidth) return;
+
+    let indicatorXValue = this.indicatorXValue;
+    let indicatorWidthValue = this.indicatorWidthValue;
+    if (indicatorXValue === this._saveIndicatorXValue
+        && indicatorWidthValue === this._saveIndicatorWidthValue) {
+      return;
+    }
+
+    this._saveIndicatorXValue = indicatorXValue;
+    this._saveIndicatorWidthValue = indicatorWidthValue;
     if (this.props.animated) {
       Animated.parallel([
-        Animated.spring(this._indicatorX, {toValue: this.indicatorXValue, friction: 9}),
-        Animated.spring(this._indicatorWidth, {toValue: this.indicatorWidthValue, friction: 9}),
+        Animated.spring(this._indicatorX, {toValue: indicatorXValue, friction: 9}),
+        Animated.spring(this._indicatorWidth, {toValue: indicatorWidthValue, friction: 9}),
       ]).start();
     } else {
-      this._indicatorX.setValue(this.indicatorXValue)
-      this._indicatorWidth.setValue(this.indicatorWidthValue)
+      this._indicatorX.setValue(indicatorXValue)
+      this._indicatorWidth.setValue(indicatorWidthValue)
     }
+
     if (this.props.autoScroll && this.refs.scrollView) {
       let contextWidth = 0;
       this._buttonsLayout.map(item => contextWidth += item.width);
-      let x = this.indicatorXValue + this.indicatorWidthValue / 2 - this._scrollViewWidth / 2;
+      let x = indicatorXValue + indicatorWidthValue / 2 - this._scrollViewWidth / 2;
       if (x < 0) {
         x = 0;
       } else if (x > contextWidth - this._scrollViewWidth) {
diff --git a/components/SegmentedBar/SegmentedItem.js b/components/SegmentedBar/SegmentedItem.js
index 1881dbe..ab4039b 100644
--- a/components/SegmentedBar/SegmentedItem.js
+++ b/components/SegmentedBar/SegmentedItem.js
@@ -8,7 +8,7 @@ import {View, Text} from 'react-native';
 import Theme from 'teaset/themes/Theme';
 import Badge from '../Badge/Badge';
 
-export default class SegmentedItem extends View {
+export default class SegmentedItem extends Component {
 
   static propTypes = {
     ...View.propTypes,
@@ -91,6 +91,6 @@ export default class SegmentedItem extends View {
   render() {
     this.buildProps();
 
-    return super.render();
+    return <View {...this.props} />;
   }
 }
diff --git a/docs/cn/README.md b/docs/cn/README.md
index 80d3fdb..63e888b 100644
--- a/docs/cn/README.md
+++ b/docs/cn/README.md
@@ -60,6 +60,7 @@ react-native run-ios
 ```
 react-native run-android
 ```
+**提示：在 Android 下运行示例程序时，部分动画效果不太流畅，打包为 release 包运行即可解决，在 release 模式下运行非常流畅。**
 
 # 文档
 中文文档已编写完成, 暂时没时间编写英文文档, 如果你乐意为 Teaset 贡献力量, 欢迎 PR。