19.React Native动画效果一；

最新推荐文章于 2024-05-16 08:03:32 发布

mayundoyouknow

最新推荐文章于 2024-05-16 08:03:32 发布

阅读量963

点赞数

分类专栏： React Native 文章标签： Animated React

本文链接：https://blog.csdn.net/ahou2468/article/details/92064280

版权

这篇博客介绍了React Native中 Animated 库的基本使用，包括如何创建动画初始值、绑定透明度到样式、设置动画执行效果（如decay、spring、timing）并启动动画。通过一个完整的示例代码，展示了如何实现透明度变化的动画效果。

摘要由CSDN通过智能技术生成

1.Animated动画的基本使用过程

通过Animated.Value()创建透明度的初始值，Animated.Value可以绑定到样式或是其他属性上(例如：透明度，位置)，也可以进行插值运算。单个Animated.Value可以用在任意多个属性上。

Animated提供了两种类型的值，一般用户创建指定属性动画的初始值：

Animated.Value()用于单个值，绑定到样式或是其他属性上；
Animated.ValueXY()用于矢量值，例如涉及x轴或者y轴移动时，需要初始化x轴和y轴，设置x和y的初始值；

constructor(props){
        super(props);
        this.state = {
            fadeAnim:new Animated.Value(0), //透明度初始值
        };
    }

绑定透明的值到样式（style）的opacity属性上，需要使用动画组件，Animated仅封装了四个可以动画化的组件：View、Text、Image和ScrollView，不过你也可以使用Animated.createAni

关注