RN 的 Animated

839 阅读2分钟

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

前言

“八月的色彩是用金子铸就的,明亮而珍贵;八月的色彩是用阳光酿造的,芬芳而灿烂。”

未来的日子,愿你把自己调至最佳状态,缓缓努力,慢慢变好 Y(^o^)Y

react native 在日常的开发过程中,我们为了提高用户的体验度,通常会加入一些动画。react native 也为开发中提供了实现动画效果的Animated库。

什么是Animated

Animated库旨在使动画变得流畅,强大并易于构建和维护。Animated侧重于输入和输出之间的声明性关系,以及两者之间的可配置变换,此外还提供了简单的 start/stop方法来控制基于时间的动画执行,直接链式调用即可。

创建动画最基本的工作流程是先创建一个 Animated.Value ,将它连接到动画组件的一个或多个样式属性,然后使用Animated.timing()通过动画效果展示数据的变化。

注意它的用法:

在函数是组件中,用useRef Hook来返回一个可修改的 ref 引用。ref 对象的current属性在初始化时被赋予给定的动画值,且在组件的生命周期内保存不被销毁。

在 class 组件中,在 class 组件中使用一个状态变量或是成员变量来存放它。不要直接修改动画值

Animated 的值类型

  • Animated.Value() 用于单个值
  • Animated.ValueXY() 用于矢量值

Animated.Value() 可以作为样式或者其他属性的值,可以用在任意多个属性上。

const opacityVal = useRef(new Animated.Value(0)).current;

...
return(
  <Animated.View
        style={[
          {
            opacity: opacityVal // Bind opacity to animated value
          }
        ]}
      >
        <Text>opacity</Text>
      </Animated.View>
)

动画配置

Animated提供了三种特定的函数曲线,用于控制动画值随时间的变化过程:

  • Animated.decay() 以指定的初始速度开始变化,然后变化速度越来越慢直至停下。
  • Animated.spring() 提供了一个基础的弹簧物理模型.
  • Animated.timing() 使用easing 函数让数值随时间动起来。

启用动画

Animated上链式调用start()来启动动画,start()可以传入一个回调函数,以便在动画完成时得到通知调用。如果动画运行正常,则完成回调收到的值为{finished:true}。如果动画是因为调用了stop()而结束(例如,因为它被手势或其他动画中断),则它会收到{finished:false}

const onClick = () => {
    // Will change opacityVal value to 1 in 5 seconds
    Animated.timing(opacityVal, {
      toValue: 1,
      duration: 5000
    }).start();
  };

结语

今天的文章是简单回顾一下Animated的要点和基本使用方法。明天继续使用Animated来完成一个移动端的滑动删除功能。

如果这篇文章帮到了你,欢迎点赞👍和关注⭐️。

文章如有错误之处,希望在评论区指正🙏🙏。