使用 React Spring 动画在 React JS 中制作计时器

在本文中，我们将了解如何使用 **react-spring** 动画在 React 中创建一个计时器。弹簧动画是一种新型方法，用于以不同的方式添加动画。它是向 React.js 添加动画的一种更精确和现代的方式。使用 **react-spring**，我们可以创建淡入、淡出、弹跳等效果。

首先创建一个 React 项目 -

npx create-react-app firstproject

现在转到项目目录 -

cd firstproject

示例

安装 **react-spring** 包 -

npm install react-spring

**react-spring** 用于向我们的网站添加基于弹簧概念的动画。我们可以使用此库添加不同类型的动画。

现在让我们继续在 React.JS 中创建计时器。

在 **App.js** 中添加以下代码行 -

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";
function Number() {
   const [flip, set] = useState(false);
   const { number } = useSpring({
      reset: true,
      reverse: flip,
      from: { number: 0 },
      number: 5,
      delay: 100,
      onRest: () => set(!flip),
   });
   return <animated.div>{number.to((n) => n.toFixed(2))}</animated.div>;
}
export default function App() {
   return (
      <div style={{ marginLeft: 500, marginTop: 200 }}>
         <Number />
      </div>
   );
}

解释

我们创建一个 **spring** 对象，它将从 0 计数到 5。

然后我们添加了一些额外的属性，例如 -

  • **reset** 用于启动循环；它设置为 true，

  • **reverse** 用于指示计数何时开始或结束，

  • **delay** 用于延迟动画，以及

  • **onRest** 用于指示计数停止时该做什么。

  • **n.toFixed(2)** 指示在小数点后显示多少位数字。

输出

执行后，它将产生以下输出 -

更新于: 2021年9月28日

552 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告