如何使用反应弹簧

什么是反应弹簧？

React Spring 是一个动画库，用于简化用户界面 (UI) 动画。 由于依赖弹簧物理，动画具有自然的外观和感觉。

React Spring 是独一无二的，因为它采用了与更广为人知的关键帧、持续时间和曲线技术不同的方法。 如果您以前使用过过渡，您可能熟悉持续时间和缓动曲线的概念，它们决定了更改不同属性的动画。 具体来说，曲线遵循设定的路径并在特定时间范围内过渡。

物理弹簧的基础是质量、张力和摩擦（以及其他）概念。 当我们改变它所承载的重量或试验更紧或更松的弹簧时，很容易观察到物理弹簧是如何移动的。 React with Spring 中的动画也是如此。

本教程将设置一个 React Spring 项目，然后完成一些 React Spring 示例。

要求

你应该已经创建了一个 React 应用或者已经设置了一个 在线沙盒 遵循本教程。

安装

使用以下纱线包管理器 (YPM) 命令安装 React Spring 库。

yarn add react-spring

如果您使用不使用 YPM 的现有项目，请使用 Node 包管理器 (NPM) 安装 react-spring。

npm install react-spring

安装 React Spring 后，您现在可以导入 React Spring 中使用的组件：

  • useSpring：将 React Spring 值转换为动画值。
  • 动画：一个在 React 外部动画的库，处理传递给它的动画属性，并扩展原生 React 元素以接收动画值。
  • config：提供给 useSpring 的属性，用于配置和调整 Spring 设置。

这是一个输出文本的简单 React Spring 示例：Hello springs！

import React from "react"; import { useSpring, animated, config } from "react-spring";    default function App() {    return <div className="App">Hello springs!</div>;

反应弹簧示例

使用 InnerText 为计数器设置动画

这个 React Spring 示例对元素的 innerText 进行动画处理，以显示 5 星评论的计数。 组件 NumberReviews 接受一个 count 属性。 该属性将使用一个计数器进行动画处理，该计数器在渲染时计数到该属性。

在您的集成开发环境 (IDE) 中编译此代码时，您会注意到每个值之间的转换是不一样的。 相反，每个过渡都会逐渐降低其变化的速度。

import React from "react"; import { useSpring, animated, config } from "react-spring";   function NumberReviews({ count }) {   const { number } = useSpring({     from: { number: 0 },     number: count,     delay: 300,     config: config.molasses   });     return <animated.span>{     number.to((n) => n.toFixed(0))   }</animated.span>; }    default function App() {   return (     <div className="App">       5-Star Reviews: <NumberReviews count={448} />     </div>   ); }

配置：质量、张力、摩擦

虽然计数器的行为类似于 CSS 过渡中使用的缓出曲线（具有缓慢结束的过渡效果），但这两种技术在修改配置时会显示空间。 例如，在上面的 React Spring 示例中，config 属性使用了 molasses 的预设。

弹簧在动画结束时的过渡速度很慢，就像被拖动一样。 以下配置表示质量、张力和摩擦的组合，是 config.molasses 属性的默认配置。 更新这些值会改变弹簧的行为方式，允许对动画进行比简单的缓出曲线更多的控制。

{  mass: 1,  tension: 280,  friction: 120 }

其他预设配置具有不同的感觉，例如柔和、摇晃和僵硬。 以下配置没有太大的不同或复杂，但调整了张力和摩擦力。

{    "gentle": { "tension": 120, "friction": 14 },    "wobbly": { "tension": 180, "friction": 12 },    "stiff": { "tension": 210, "friction": 20 },    "molasses": { "tension": 280, "friction": 120 } }

使用此语法更新配置以了解差异。 例如，请注意与僵硬相比，糖蜜结构的高摩擦力如何产生拖曳效果。

中断的动画

React Spring 优雅管理的动画需要考虑的另一件事是需要在用户界面中中断它们。

在播客中 工作注意事项, Caleb Porzio 讨论了 过渡的复杂性 页面上的元素，尤其是在中断这些转换时。 不幸的是，这些用户交互很容易被忽视。 开发人员按预期与元素交互，而典型用户以意想不到的方式与软件交互。

开发人员应考虑意外情况，包括将我们的动画设计为未完成。 例如，动画按钮单击会在重复单击时重置动画。 默认情况下，每次连续单击按钮都会停止动画。 相比之下，弹簧对连续点击做出反应，这似乎表现为单个动画。

使用 React Spring 实现可访问性

在 Web 上使用动画时，考虑元素在页面上移动方式的可访问性至关重要。 例如，眩晕、恶心或偏头痛会影响许多人，这是由网络上的动画引起的。 大多数操作系统都有用户偏好 减少运动 这有助于使 Web 应用程序可访问。

使用减少 React Spring 项目中的运动 反应减少运动. 它是一个跨平台的钩子，允许禁用或减少动画。 我们可以使用顶部附近的以下语法将其导入示例项目。

import { useReducedMotion } from "react-reduce-motion";

结论

与标准的 React 方法相比，Springs 可能是一种更自然的方法来为 Web 创建动画。 该配置不需要理解数学曲线。 根据个人经验，比较容易推断弹簧的物理特性。 如果您觉得这种技术更自然，请考虑在您的下一个项目中使用 React Spring。

Liquid Web 的托管托管选项非常适合您的下一个 React Spring 项目。 立即联系我们的销售团队设置服务器。

Related Posts