使用React Spring创建动画

传统上，将动画整合到您的反应应用程序中是具有挑战性的。但是，由Paul Henschel创建的强大库React-Spring大大简化了该过程。在动画和反应运动的基础上，它提供了优化的性能和简化的API。

本教程探讨了React-Spring的五个钩子中的两个： useSpring和useTrail 。我们将通过实际示例来说明它们的用法。

首先，安装React-Spring：

 ＃纱
纱线添加反应弹簧

＃npm
NPM安装React-Spring-保存

用useSpring弹簧动画

useSpring挂钩促进了状态之间的平稳过渡。我们from和to属性来指定动画的起点和终点。 from设定初始状态，而to最终状态。

我们的第一个示例使用useSpring将盒子滑到屏幕上的动画。最初隐藏了，单击按钮时会出现。

导入React，{usestate}来自“ React”；
从“ react-spring”中导入{usepring，anistation};

const app =（）=> {
  const [showcontent，setShowContent] = usestate（false）;
  const contentprops = usepring（{
    不透明度：展示？ 1：0，
    Margintop：展示？ 0：-1000，
    配置：{持续时间：500} //可选：添加动画持续时间
  }）;

  返回 （
    <div classname="container">
      <button classname="button" onclick="{()"> setShowContent（！showcontent）}>
        切换内容
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1 id="此内容归功于React-Spring">此内容归功于React Spring！</h1>
      </animated.div>
    </div>
  ）；
};

useSpring挂钩管理动画。当showContent是真实的时，盒子滑下并变得可见。否则，它仍然隐藏在屏幕外。

用useTrail动画列表

useTrail挂钩依次对项目列表进行动画动画。每个项目都在前面的一个动画。让我们获取用户列表并为其渲染动画。

导入React，{usestate，usefeft}来自'react';
从“ react-spring”导入{usetrail，andionated}；

const app =（）=> {
  const [用户，setuser] = usestate（[]）;
  useeffect（（）=> {
    fetch（'https://jsonplaceholder.typicode.com/users'）
      然后（res => res.json（））
      。
  }，[]）;

  const trail = usetrail（users.length，{
    来自：{marginleft：-20，不透明度：0，转换：'transfate3d（0，-40px，0）'}，
    to：{marginleft：20，不透明度：1，变换：'translate3d（0,0px，0）'}，
    配置：{MASS：5，张力：2000，摩擦：200} //可选：微调动画
  }）;

  返回 （
    <div>
      <h1 id="随机用户">随机用户</h1>
      {trail.map（（{{style}，index）=>（（
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {用户[索引]？。用户名}
        </animated.div>
      ）}}
    </div>
  ）；
};

useTrail为用户列表创建了一个交错的动画。每个用户名稍微延迟滑入。包括错误处理和可选的配置，以进行更顺畅的动画。

结论

React Spring在React应用程序中提供了一种用户友好的动画方法。探索其广泛的文档和示例以解锁创意动画的可能性。请记住在实现动画时考虑可访问性。

以上是使用React Spring创建动画的详细内容。更多信息请关注PHP中文网其他相关文章！