Animated

Animated

写下此文章的目的是为了在用到时快速查找与参考

可动画化组件

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

设定初始值

• 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  // 使用原生动画驱动。默认不启用(false)
}).start();               //动画开始

• timing 线性动画

Animated.timing(this.state.top, {
    toValue: 100,         //目标值
    duration: 3000,       //执行时间（默认500）
    delay：100,           //开始动画前的延迟时间（毫秒）默认为0
    useNativeDriver:true  
}).start();    

• decay 阻尼动画，指定的初始速度开始变化，然后变化速度越来越慢直至停下

Animated.decay(this.state.opacity, { 
    velocity: 5,          //初始速度。必填
    deceleration: 0.997,  //衰减系数。默认值0.997
    useNativeDriver:true  
}).start()

，start方法可以设置一个回调方法，当动画结束调用该方法。如果动画是正常播放完毕的，那么该回调方法会被执行并且传入参数{finished:true}。但是如果动画是在正常播放完毕之前调用了stop来进行停止的话，那么该会回调传入{finished:false}。

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

组合动画

• sequence 顺序执行

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

• parallel 同时执行

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

插值动画

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