React Native动画Animated详解

公良育
2023-12-01

在移动开发中,动画是提高用户体验不可缺少的一个元素。在React Native中,动画API提供了一些现成的组件:Animated.View,Animated.Text和Animated.Image默认支持动画。动画API会调用iOS或者Android的本地代码来完成这些组件的位移、大小等动画。

在React Native中,Animated创建过程如下:

  1. 创建Animated.Value,设置初始值,比如一个视图的opacity属性,最开始设置Animated.Value(0),来表示动画的开始时候,视图是全透明的。
  2. AnimatedValue绑定到Style的可动画属性,比如透明度,{opacity: this.state.fadeAnim}
  3. 使用Animated.timing来创建自动的动画,或者使用Animated.event来根据手势,触摸,Scroll的动态更新动画的状态
  4. 调用Animated.timeing.start()开始动画

Animated简介

大多数情况下,在 React Native 中创建动画是推荐使用 Animated API 的,其提供了三个主要的方法用于创建动画:

  1. Animated.timing() – 推动一个值按照一个过渡曲线而随时间变化。Easing 模块定义了很多缓冲曲线函数。
  2. Animated.decay() – 推动一个值以一个初始的速度和一个衰减系数逐渐变为0。
  3. Animated.spring() – 产生一个基于 Rebound 和 Origami 实现的Spring动画。它会在
    toValue 值更新的同时跟踪当前的速度状态,以确保动画连贯。

除了这三个创建动画的方法,对于每个独立的

 类似资料: