• 2021年值得推荐的3个React动画库及思考


    2021年值得推荐的3个React动画库及思考

    2021年值得推荐的3个React动画库及思考

     

    1. React Spring

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

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

    同时,它提供了HooksRender-Props(Spring,Transitio,Keyframes,Parallax等)两种API。

    2. React Transition Group

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

    • Transition
    • CSSTransition
    • SwitchTransition
    • TransitionGroup

    3. React Motion

    它创建的动画看起来很自然,而且融合了一些物理学的东西,给人的感觉会更加真实。目前有着19.3KStars,由此可见其受欢迎程度。它则使用以下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可以与gsapd3相比,后者也可以在requestAnimationFrame循环中进行动画。

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

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

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

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

    总结

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

    发布于 2021-01-11 08:00
     
  • 相关阅读:
    字符串hash
    堆优化的最短路
    unordered_map 的火车头
    扩展欧几里得求ax+by=c的最小正整数解
    欧拉筛
    Codeforces Round 649 (Rated for Div. 2)D. Ehab s Last Corollary (图论+简单环)
    牛客SQL题解-找出所有员工具体的薪水salary情况
    牛客SQL题解-查找薪水变动超过15次的员工号emp_no以及其对应的变动次数t
    牛客SQL题解-查找所有已经分配部门的员工的last_name和first_name以及dept_no,也包括暂时没有分配具体部门的员工
    牛客SQL题解- 查找所有已经分配部门的员工的last_name和first_name
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/15918141.html
Copyright © 2020-2023  润新知