RN动画

最新推荐文章于 2021-05-26 22:34:24 发布

原创最新推荐文章于 2021-05-26 22:34:24 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

React-Native 同时被 3 个专栏收录

81 篇文章

订阅专栏

javascript

65 篇文章

订阅专栏

html+css

15 篇文章

订阅专栏

本文介绍如何使用React Native实现多种动画效果，包括渐变动画、旋转动画及位置变化动画等，并详细解释了通过Animated API实现这些动画的具体步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


渐变动画

渐变动画是改变透明度实现的动画效果，从透明到不透明的效果
constructor(props) {
        super(props);
        this.fadeInAnimated = new Animated.Value(0); // 渐隐动画初始值，默认为0，透明
    }
<Animated.View style={[styles.downViewStyle, {opacity: this.fadeInAnimated}]}>
</Animated.View>
点击按钮，开始动画
 Animated.timing(this.fadeInAnimated, {
            toValue: 1, // 1为不透明
            duration: 500,
            easing: Easing.linear
        }).start();
旋转动画
        this.spinValue = new Animated.Value(0);

  // 利用 interpolate 方法将数值 0~1 映射到了 0deg~360deg
        const spin = this.spinValue.interpolate({
            inputRange: [0, 1],                // [0,0.5,1]改成这样会有不同的效果
            outputRange: ['0deg', '360deg']    //  ['0deg', '360deg','0deg']改成这样会有不同的效果，
        });
 <Animated.Image
    style={{
         width: 227,
         height: 200,
         transform: [{rotate: spin}] }}
         source={{uri: 'https://s3.amazonaws.com/media-p.slid.es/uploads/alexanderfarennikov/images/1198519/reactjs.png'}}
 />
点击按钮开始动画
springAnimal(){
        this.spinValue.setValue(0);
        Animated.timing(
            this.spinValue,
            {
                toValue: 1, // 此处的1 已经被上面的spin映射过了， [0, 1] 》 ['0deg', '360deg']
                duration: 4000,
                easing: Easing.linear
            }
        ).start();
    }
从左到右，再从右到左动画
其实就是改变marginLeft的值，
同理：也可以改变marginTop等的值来实现不同的效果
在同理：也可以实现opacity（透明度不断地透明-不透明-透明）、margins（组件的上下左右移动）、text sizes （字体的不断变化）和 rotation（3D效果） 等的效果
        this.animatedValue = new Animated.Value(0);

 const movingMargin = this.animatedValue.interpolate({
            inputRange: [0, 0.3, 1], // 0-0.3     0.3-1
            outputRange: [0, 300, 0] // 0-300     300-0     速度会不一样
        });
<Animated.View
    style={{
        marginLeft: movingMargin,
        marginTop: 10,
        height: 30,
        width: 40,
        backgroundColor: 'orange'                  
    }}             
/>
点击调用动画
 this.animatedValue.setValue(0);
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear
            }
        ).start();
字体的变大变小
 const textSize = this.animatedValue.interpolate({
            inputRange: [0, 0.5, 1],
            outputRange: [18, 32, 18]
        });
<Animated.Text
                    style={{
                      fontSize: textSize,
                      marginTop: 10,
                      color: 'green'}} >
                    Animated Text!
                </Animated.Text>
调用
 this.animatedValue.setValue(0);
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear
            }
        ).start();