[RN] requestAnimationFrame帧动画

发布网友发布时间：2022-12-28 05:22

共1个回答

热心网友时间：2023-08-10 02:13

动画是移动应用中的一个相当重要的组成部分，一个用户体验良好的应用通常都具有流畅、有意义的动画。类似原生平台，React Native也为我们提供了丰富的动画API：requestAnimationFrame、LayoutAnimation、Animated。

requestAnimationFrame:帧动画，是最容易实现的一种动画，通过不断改变组件的state值，从而在视觉上产生一种动画的效果，类似于gif动画的方式。

LayoutAnimation:布局动画，当布局发生改变时的动画模块，允许在全局范围内创建和更新动画，这些动画会在下一次渲染或布局周期运行，实现单个动画非常简洁，体验和性能良好。

Animated:用于创建更精细的交互控制的动画，可进行多个动画的组合动画，具备极高的性能，是功能最强大的动画API。

本节我们先介绍requestAnimationFrame。

requestAnimationFrame实现帧动画的原理非常粗暴简洁，即通过修改state值来不断得改变视图上的样式，从而在视觉上产生一种动画的效果。

从效果上看动画有种一顿一顿的感觉。这是由于通过修改state值，导致频繁地销毁、重绘视图，内存开销大，从而使得动画卡顿明显。另外对于帧动画而言，如果帧数较少，动画的效果会比较生硬，帧数过多又会引发性能问题。

如果帧动画的方式更符合当前对动画的控制方式，我们可以对上述方法做一点优化，在requestAnimationFrame中采用setNativeProps直接修改组件的属性并触发局部刷新，不会导致重绘组件，因此在性能上优于直接修改state的方法。

修改_onPress方法，将对this.setState的直接修改改为对”Hello World”按钮的属性修改this.refs.view1.setNativeProps。

this.refs.view1指向的是”Hello World”文字的父视图。

通过对比可以看出流畅顺滑多了。

每个动画API都有其适应和不适应的场景，如果要实现“弹性动画”，“缓入缓出”等效果，使用requestAnimationFrame还是比较难的，需要辅助各种函数。下一节将介绍另一种动画API——LayoutAnimation。

GitHub地址

react切换路由的话怎么清除定时器

RN的定时器就是一个创建方法。并没有像iOS一样的NSTimer类根据官方提供的文档，定时器有四种形式：?setTimeout, clearTimeout ? setInterval, clearInterval ? setImmediate, clearImmediate ? requestAnimationFrame, cancelAnimationFrame 见名思义：set和request方法是创建。clear是清除，清除必须有.

一帧一帧的动画叫什么独帧动画帧动画一帧动画动画中间帧 12帧动画 k帧动画两帧动画动画一分钟多少帧