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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。