react native background 渐变_2021年值得推荐的3个React动画库及思考

1. React Spring

这是React官网提到的三个动效库之一，还有两个是react-transition-group和react-motion，后面我们会讲到，目前有19.1K的Star，和React-motion部分伯仲。

这是一个基于弹簧物理学的动画库，基本上能满足大多数与UI相关的动画需求，继承了animated强大的插值和性能，以及react-motion的易用性。

同时，它提供了Hooks和Render-Props（Spring，Transitio，Keyframes，Parallax等）两种API。

2. React Transition Group

这是一个全面的动效库，截止目前有着8K的Stars，它提供声明式的API 给mounting 挂载和unmounting卸载的组件，它显示一个组件到另一个组件的动效有4个组件，分别是：

• Transition
• CSSTransition
• SwitchTransition
• TransitionGroup

3. React Motion

它创建的动画看起来很自然，而且融合了一些物理学的东西，给人的感觉会更加真实。目前有着19.3K的Stars，由此可见其受欢迎程度。它则使用以下api来实现（motion也是运动的意思）：

• Spring
• Motion
• Staggered Motion
• Transition Motion

对React-Spring的一些思考

animated的一个优点是，它可以直接应用动画，而不需要依赖React一帧一帧地渲染更新，就像其他React动画库一样。因此，React-spring受益于动画巧妙的渲染模型。

在简单的情况下，差异可能不明显，但是如果尝试嵌套图表，React将会占用CPU资源，阻塞浏览器的帧预算。

在React之外应用更新有严格的限制，因为一般的React组件在DOM中没有表示，所以只能动画化DOM原生样式和属性，但在这里，你可以通过提供native标志在这两种模型中进行选择。

动画也可以处理完全本地的驱动程序，所以在未来，如果web动画获得更多的支持，它甚至可以在合成线程中完成所有的动画。但现在，react-spring可以与gsap和d3相比，后者也可以在requestAnimationFrame循环中进行动画。

当前的声明式原生已经足够了吗？

对于大多数UI相关的任务来说，也许是这样，但是对于任何涉及到分段和编排的任务来说——这可能还不够。

缺少命令式动画有时会造成伤害，目前大多数库中最困难的一点就是在原语之间切换，例如先用spring移动某个东西，拖拽它的元素到适当的位置，然后过渡添加和删除。正如您可以想象的那样，声明式地执行此操作几乎是徒劳的，因为这将意味着对代码进行分割。这就是传统渐变库的亮点所在。

尽管react-spring目前仍处于高度的试验阶段，但它已经在寻找混合脚本和组合的方法，这可能会在链接和编配方面提供更多的自由。

总结

看了一圈发现，这些都是React官方比较推荐的库，你用过哪些呢？又有怎样的思考 ？