Animated

寫下此文章的目的是為了在用到時快速查找與參考

可動畫化組件

• View
• Text
• Image
• createAnimatedComponent（自定義）

設(shè)定初始值

• Animated.Value

this.state={
    top:new Animated.Value(0),
    pan: new Animated.Value({x:0, y:0})
}

• Animated.ValueXY

this.state = {
        translateValue: new Animated.ValueXY({x:0, y:0})
    };

...

Animated.decay( 
    this.state.translateValue,
    {
        velocity: 10, 
        deceleration: 0.8, 
    }
).start();

...

<Animated.View
    style = {{flex: 1,alignItems: 'center',justifyContent: 'center',
                transform: [  
                    {translateX: this.state.translateValue.x}, // x軸移動
                    {translateY: this.state.translateValue.y}, // y軸移動
                ]
            }}> 
</Animated.View>

動畫類型

• spring 彈性動畫

 Animated.spring(this.state.top, {
    toValue: 100,         //目標值
    friction: 1,          //摩擦力（越小振幅越大），默認為7
    tension: 100,         //拉力 默認為40
    useNativeDriver:true  // 使用原生動畫驅(qū)動刷喜。默認不啟用(false)
}).start();               //動畫開始

• timing 線性動畫

Animated.timing(this.state.top, {
    toValue: 100,         //目標值
    duration: 3000,       //執(zhí)行時間（默認500）
    delay：100,           //開始動畫前的延遲時間（毫秒）默認為0
    useNativeDriver:true  
}).start();    

• decay 阻尼動畫驮肉，指定的初始速度開始變化滞磺，然后變化速度越來越慢直至停下

Animated.decay(this.state.opacity, { 
    velocity: 5,          //初始速度柳琢。必填
    deceleration: 0.997,  //衰減系數(shù)矛物。默認值0.997
    useNativeDriver:true  
}).start()

沮趣，start方法可以設(shè)置一個回調(diào)方法点额，當動畫結(jié)束調(diào)用該方法钾挟。如果動畫是正常播放完畢的洁灵，那么該回調(diào)方法會被執(zhí)行并且傳入?yún)?shù){finished:true}。但是如果動畫是在正常播放完畢之前調(diào)用了stop來進行停止的話掺出，那么該會回調(diào)傳入{finished:false}徽千。

Animated.timing(this.state.top, {
    toValue: 100,
}).start(
        ({finished})=>{console.log(finished)}
    );  

組合動畫

• sequence 順序執(zhí)行

Animated.sequence([
  Animated.timing(opacity, {toValue:0.5}),
  Animated.parallel([
     Animated.timing(opacity, {toValue:0}),
     Animated.top(opacity, {toValue:20}),
  ]),
]).start();

• parallel 同時執(zhí)行

Animated.parallel([
     Animated.timing(opacity, {toValue:0}),
     Animated.top(opacity, {toValue:20}),
  ]).start();

插值動畫

this.state.top.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100],
});