ReactNative动画之Animated初识篇

最新推荐文章于 2024-05-25 18:44:30 发布

ActiveC

最新推荐文章于 2024-05-25 18:44:30 发布

阅读量449

点赞数

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

本文链接：https://blog.csdn.net/ws_752958369/article/details/81131658

版权

本文介绍了ReactNative的Animated库，讲解了 Animated.Value 和 Animated.ValueXY 的使用，它们可以绑定到样式和属性上进行插值运算。此外，还提到了 Animated 提供的动画组件和动画类型，包括基于速度的动画、依赖时间的动画，并推荐使用easeInOut曲线。最后，文章展示了如何在state中设置动画初始值并在组件挂载后启动动画，以及如何组合动画，如延迟、并行和顺序播放动画。

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

Animated提供了两种类型的值：

1.Animated.Value()用于单个值

2.Animated.ValueXY()用于矢量值{x:0,y:0}

Animated.Value可以绑定到样式或是其他属性上，也可以进行插值运算。单个Animated.Value可以用在任意多个属性上.

目前Animated提供的动画组件有View,Image,Text,ScrollView;当然我们也可以使用createAnimatedComponent方法来创建自己的动画组件。

static createAnimatedComponent(Component: any)

使得任何一个React组件支持动画。用它来创建Animated.View等等。

目前Animated提供了三种动画：每种动画类型都提供了特定的函数曲线，用于控制动画值从初始值变化到最终值的变化过程：
1.Animated.decay()以指定的初始速度开始变化，然后变化速度越来越慢直至停下。

static decay(value: AnimatedValue | AnimatedValueXY, config: DecayAnimationConfig)

推动一个值以一个初始的速度和一个衰减系数逐渐变为0。

Config参数有以下这些属性：

    velocity: 初始速度。必填。
    deceleration: 衰减系数。默认值0.997。
    useNativeDriver: 使用原生动画驱动。默认不启用(false)。

2.Animated.spring()弹性动画