React實戰-深入分析ReactNative中的動畫效果

說起動畫效果感覺回到JavaScript的起源了，在早期的Web開發中，JS更多的是扮演著頁面特效的角色，當然也只是屬於做些邊角料的工作，真正需要動畫的地方，大多還是採用Flash或者Applet，Js更多的是操作html元素的變化，如果大量採用Js,則會嚴重影響頁面的效能。

在瞭解ReactNative中動畫之前，我們還是看看網頁動畫基本實現方式。在Web業務效果方面，基本的做法是改變Html頁面元素的屬性，例如：width,left,top等，導致頁面重繪，由於元素屬性變化和重繪過程存在時差，也就產生了動畫的效果，但總的來說效能並不太好。在

1.ReactNative中的四種變化方式

在ReactNative中實現動畫效果的基本原理與之前並沒有什麼區別，再結合ReactJS的UI重繪原則，主要有以下方式：

a通過Js直接構造新的元素，改變Style屬性。

if(this.state.complete === true){

      }else{

         return <View style={{width:20,height:20,backgroundColor:'blue'}} />

      }

b依據不同條件，設定不同的Style屬性

c.通過改變transform的值，產生平滑的動畫效果

<View style={this.state.complete ? {backgroundColor:'red'} : {backgroundColor:'blue',

transaction: ‘all 1s’, transform:{scale: 2}}/>

d.採用Animator與transform相結合，實現更炫動畫效果

<Animated.Image                         

          source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}

          style={{

            flex: 1,

            transform: [                        

              {scale: this.state.bounceValue}

            ]

          }}

        />

以上四種方式，如果不需要產生變化效果，一般採用第二種，如果需要產生平滑的變化效果，推薦採用第四種。

到目前為止，動畫依然是ReactNative的弱項，還在不斷的發展中。主要的方式是採用LayoutAnimation和Animated來實現，但背後的原理依然是改變state中的值，引起UI重繪。LayoutAnimation主要用於整體佈局的變化，Animated則用與更多規則和變化的特殊值變化。

2.ReactNative中Animated實現方式

Animated主要對兩類特殊值的變化，一是單個值：Value，一個是對值物件值：ValueXY。

a.Animated.Value的單值實現方式

在state中定義Animated.Value的值：

 this.state = {

      bounceValue: new Animated.Value(0),

};

在頁面屬性中定義style屬性，屬性值基於state中的值：

 <Animated.Image                                 source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}

        style={{

          flex: 1,

          transform: [                                    {scale: this.state.bounceValue},            ]

        }}

      />

觸發動畫效果：

  Animated.spring(                         

      this.state.bounceValue,                 

      {

        toValue: 0.8,                        

        friction: 1,                         

      }

    ).start();   

b.Animator.ValueXY的雙值實現方式：

在state中定義ValueXY值：

this.state = {

       pan: new Animated.ValueXY(),

     };

定義指定元素拖動時的ValueXY變化：

this.state.panResponder = PanResponder.create({

       onStartShouldSetPanResponder: () => true,

       onPanResponderMove: Animated.event([null, {

         dx: this.state.pan.x,

         dy: this.state.pan.y,

       }]),

       onPanResponderRelease: () => {

         Animated.spring(

           this.state.pan,         

           {toValue: {x: 0, y: 0}}

         ).start();

       },

     });

設定特定元素的樣式：

 <Animated.View

         {...this.state.panResponder.panHandlers}

         style={this.state.pan.getLayout()}>

         {this.props.children}

       </Animated.View>

c.Animator設定過程中的約束

Animator在設定原理並不複雜，但是有一些潛規則，在缺乏文件的情況下，還是看看原始碼比較好。Animator設定過程中有以下約束：

1）Animator.Value的值雖然定義在state中，但是在頁面元素中只有<Animator.View/>,<Animator.Text/>,<Animator.Image/>,<Animator.ScrollView/>等才能獲取，一般的<View/>等是不能獲取的，或者採用Animated.createAnimatedComponent建立自己的控制元件。並且文件中只列舉了View,Text,Image，但從原始碼中可以看到ScroolView也可以，見react-native原始碼：

module.exports = {

  ...AnimatedImplementation,

  View: AnimatedImplementation.createAnimatedComponent(View),

  Text: AnimatedImplementation.createAnimatedComponent(Text),

  Image: AnimatedImplementation.createAnimatedComponent(Image),

  ScrollView: AnimatedImplementation.createAnimatedComponent(ScrollView),

};

2）Animator.ValueXY的值{x,y}是特定的，如果你需要取值也應採用{x,y}

pan: new Animated.ValueXY()....

{dx: this.state.pan.x,dy: this.state.pan.y}

3.ReactNative中LayoutAnimation實現方式

在ReactNative中更簡單的方式是對全域性進行Animation設定，即採用LayoutAnimation,則一般的元素也可以訪問state中的值，值的設定也就沒有什麼特殊的要求了，但是設定過程有些需要特別注意。其中在Android的控制元件裡特別需要的是要加入原生元件，否則效果失效。如下：

 UIManager.setLayoutAnimationEnabledExperimental &&

      UIManager.setLayoutAnimationEnabledExperimental(true);

動畫啟動也簡單：

LayoutAnimation.spring();

4.組合動畫

在設定動畫效果時，我們往往並不止一個動畫效果，可能是多個動畫的組合，ReactNative為我們提供了Animated.sequence和Animated.parallel兩個方法進行動畫組合，使用也很簡單：

Animated.sequence([              

Animated.decay(position, {      

velocity: {x: gestureState.vx, y: gestureState.vy},     

deceleration: 0.997,

  }),

  Animated.parallel([        

    Animated.spring(position, {

      toValue: {x: 0, y: 0}   

    }),

    Animated.timing(twirl,

      toValue: 360,

    }),

  ]),

]).start();

5.三種主要動畫效果

在ReactNative中主要有三種動畫效果：Spring, decay，timing，至於用法基本上看看引數就行，但是文件裡給出的引數太少，還是看看原始碼知道這些動畫的引數，以下是spring的引數表，其他的也可參加相關原始碼：

type SpringAnimationConfig = AnimationConfig & {

  toValue: number | AnimatedValue | {x: number, y: number} | AnimatedValueXY,

  overshootClamping?: bool,

  restDisplacementThreshold?: number,

  restSpeedThreshold?: number,

  velocity?: number | {x: number, y: number},

  bounciness?: number,

  speed?: number,

  tension?: number,

  friction?: number,

};

6.動畫過程中值的變化

在動畫執行過程中，採用Animator時，Animator相關元素能自動獲得Animator中的值，但這些值是不透明的，在外部是無法獲得中間值的，我們只能新增相關事件，在動畫執行結束時設定回撥函式，以執行動畫之後的操作。

及時採用LayoutAnimation時,我們獲得的也只是最終值。

另外在ReactNative中提供了一種插值區間的方法interpolate，在動畫效果值變化過程中，會自動進行區間對映。如：

value.interpolate({

  inputRange: [0, 1],

  outputRange: [0, 100],

});

7.demo的原始碼

[email protected]:chenhuitian/ReactNative.git