React中常见的动画实现的几种方式(7)

在该示例中,我们希望实现每点击一次按钮,图片向右旋转90°。在组件初始化时新建了一个初始值为 0 的 Animated 对象 this.state.anim ,在 render 函数中通过插值函数 interpolate 根据 Animated 对象的当前值计算得到对应的旋转角度 rotateDegree 。我们假设每点击一次按钮, Animated 对象的值加 1,相应地图像转动90°,所以,设置 interpolate 函数的输入区间为[0, 4],输出区间为['0deg', '360deg']进行线性插值。如果 Animated 对象当前值为 2,对应的旋转角度就是 180deg。在组件渲染结构中,需要使用 Animated.div 包裹动画节点,并将变化的元素属性封装为 css 对象作为 stlye 传入 Animated.div 中。在点击事件中,考虑到按钮可以多次连续点击,我们首先使用 stopAnimation 停止当前动画,并获取 Animated 对象的当前值 value ,随后使用 Animated.spring 函数开启一次弹簧动画过程,从而实现一个流畅的动画效果。由于每次转动停止时,我们希望图片的翻转角度都是90°的整数倍,所以需要对 Animated.spring 的终止值进行取整。最终我们实现了如下效果:

使用时需要注意一下几点:

  1. Animated 对象的值和其插值结果只能作用于 Animated.div 节点;
  2. interpolate 默认会根据输入区间和输出区间进行线性插值,如果输入值超出输入区间不受影响,插值结果默认会根据输出区间向外延展插值,可以通过设置 extrapolate 属性限制插值结果区间。

Animated 在动画过程中不直接修改组件 state ,而是通过其新建对象的组件和方法直接修改元素的属性,不会重复触发 render 函数,是 React Native 中非常稳定的动画库。但是在 React 中存在低版本浏览器兼容问题,且具有一定学习成本。

结语

当我们在 React 中实现动画时,首先要考量动画的难易程度和使用场景,对于简单动画,优先使用 css3 实现,其次是基于 js 的时间间隔动画。如果是元素入场动画和离场动画,则建议结合 CSSTransitionGroup 或者 TransitionGroup 实现。当要实现的动画效果较为复杂时,不妨尝试一些优秀的第三方库,打开精彩的动效大门。

Ps. 本文所有示例代码可访问 github 查看

参考资料:

react-transition-group

react-gsap-enhancer

A Comparison of Animation Technologies

React Animations in Depth

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。