RN animated帧动画

最新推荐文章于 2021-07-22 08:02:00 发布

weixin_30273763

最新推荐文章于 2021-07-22 08:02:00 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hualuoshuijia/p/10184759.html

本文介绍了一个使用React和Animated组件创建动态效果的方法。通过定义动画序列，实现了一系列元素的连续动画展示，每个元素的动画效果包括从透明到可见的过渡，动画持续时间为50毫秒。代码中展示了如何初始化动画值，设置动画序列，并在组件加载完成后自动开始动画。

效果图：

代码：

export default class AnimationFrameScene extends Component {

    constructor () {
        super()
        this.animatedValue = []
        arr.forEach((value) => {
            this.animatedValue[value] = new Animated.Value(0)
        })
    }

    componentDidMount () {
        this.animate()
    }

    animate () {
        const animations = arr.map((item) => {
            return Animated.timing(
                this.animatedValue[item],
                {
                    toValue: 1,
                    duration: 50
                }
            )
        })
        Animated.sequence(animations).start()
    }

    render() {
        const arr = []
        for (var i = 0; i < 500; i++) {
            arr.push(i)
        }

        const animations = arr.map((a, i) => {
            return <Animated.View key={i} style={{opacity: this.animatedValue[a], height: 20, width: 20, backgroundColor: 'red', marginLeft: 3, marginTop: 3}} />
        })

        return (
            <View style={styles.container}>
                {animations}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    },


});

转载于:https://www.cnblogs.com/hualuoshuijia/p/10184759.html