react native 动画(Animations) 二

Animated详解

方法

static decay(value, config) 阻尼，将一个值根据阻尼系数动画到 0
static timing(value, config)根据时间函数来处理，常见的比如线性，加速开始减速结束等等，支持自定义时间函数
static spring(value, config) 弹性动画
static add(a, b) 将两个Animated.value相加，返回一个新的
static multiply(a, b) 将两个Animated.value相乘，返回一个新的
static modulo(a, modulus)，将a对modulus取余,类似操作符%
static delay(time)延迟一段时间
static sequence(animations) 依次开始一组动画，后一个在前一个结束后才会开始，如果其中一个动画中途停止，则整个动画组停止
static parallel(animations, config?),同时开始一组动画，默认一个动画中途停止，则全都停止。可以通过设置stopTogether来重写这一特性
static stagger(time, animations),一组动画可以同时执行，但是会按照延迟依次开始
static event(argMapping, config?),利用手势，Scroll来手动控制动画的状态
static createAnimatedComponent(Component),自定义的让某一个Component支持动画

属性

Value 类型是AnimatedValue,驱动基本动画
AnimatedValueXY  类型是AnimatedValueXY，驱动二维动画

一个更加复杂动画

• 一个AnimatedValue同时驱动两三个属性，透明度，Y的位置以及scale

constructor(props) {
        super(props);
        this.state = {
            currentAlpha: 1.0,//标志位，记录当前value
            fadeAnim: new Animated.Value(1.0)
        }
    }

 <Animated.Text
            style={{
                opacity: this.state.fadeAnim, //透明度动画
                transform: [{ //transform动画
                    translateX: this.state.fadeAnim.interpolate({
                        inputRange: [0, 1],
                        outputRange: [60, 0]//线性插值，0对应60，0.6对应30，1对应0
                    })
                }, {
                    scale: this.state.fadeAnim
                }]
            }}>
            Welcome to React Native!
        </Animated.Text>

手动控制动画

根据Scroll或者手势来手动的控制动画的过程
手动控制动画的核心是Animated.event,
这里的Aniamted.event的输入是一个数组，用来做数据绑定
比如, ScrollView中

onScroll = {Animated.event(
           //把contentOffset.x绑定给this.state.xOffset
           [{nativeEvent: {contentOffset: {x: this.state.xOffset}}}]
)}

核心代码：

 <ScrollView
                horizontal={true} //水平滑动
                showsHorizontalScrollIndicator={false}
                style={{width: deviceWidth, height: 300}}//设置大小
                onScroll={Animated.event(
                    [{nativeEvent: {contentOffset: {x: this.state.xOffset}}}]
                )}
                scrollEventThrottle={100}>
                <Animated.Image source={require('../../../img/s3.png')}
                                style={{
                                    height: 300,
                                    width: deviceWidth,
                                    opacity: this.state.xOffset.interpolate({//映射到0.0,1.0之间
                                        inputRange: [0, 375],
                                        outputRange: [1.0, 0.0]
                                    }),
                                }}
                                resizeMode="cover"/>
                <Image
                    style={{height: 300, width: deviceWidth}}
                    source={require('../../../img/s4.png')}
                    resizeMode="cover"/>
                <Image
                    style={{height: 300, width: deviceWidth}}
                    source={require('../../../img/s2.png')}
                    resizeMode="cover"/>
            </ScrollView>

参考：
https://blog.csdn.net/hello_hwc/article/details/51775696