React Native 动画animated初探

本示例使用Animated.spring() 方法创建了一个缩放scale、X轴移动translateX和旋转rotate的动画效果。

定义动画初始值

 constructor(props) {
        super(props);
        this.state = {
            anim: new Animated.Value(0),
        };
    }

开始动画

使用Animated.spring方法将初始值从0变成1，并设置velocity初始速度，tension弹跳的速度值，friction摩擦力值，设置这三个值的不同组合会有不同的效果。

Animated.spring() -- 产生一个基于 Rebound 和 Origami 实现的Spring动画。它会在 toValue 值更新的同时跟踪当前的速度状态，以确保动画连贯。

 componentDidMount() {
        Animated.spring(this.state.anim, {
            toValue: 1,
            velocity: 6, //初始速度
            tension: -20, //弹跳的速度值
            friction: 3, //摩擦力值
        }).start();
    }

定义Animated.View

这里定义了三个动作scale、translateX、rotate，这三个动作使用transform顺序执行。interpolate方法的inputRange和outputRange定义了值的映射。

<Animated.View
                    style={[styles.content, {
                        transform: [
                            {
                                scale: this.state.anim.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [0.5, 1],
                                })
                            },
                            {
                                translateX: this.state.anim.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [300, 0],
                                })
                            },
                            {
                                rotate: this.state.anim.interpolate({
                                    inputRange: [0, 1],
                                    outputRange: [
                                        '0deg', '720deg'
                                    ],
                                })
                            },
                        ]
                    }
                    ]}>
                    <Image source={require('../imgs/logo.jpg')} style={{ width: 50, height: 50 }} />
                </Animated.View>

总结

这样就定义了一个简单的动画，完整代码见： github
如果需要详细了解动画，可以参考这篇文章，写的佷详细。 React Native动画

传送门

微信公众号：ReactNative开发圈

image.png