这是我参与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
来完成一个移动端的滑动删除功能。
如果这篇文章帮到了你,欢迎点赞👍和关注⭐️。
文章如有错误之处,希望在评论区指正🙏🙏。