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
的终止值进行取整。最终我们实现了如下效果:
使用时需要注意一下几点:
Animated
对象的值和其插值结果只能作用于Animated.div
节点;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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。