数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律学使用 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 次浏览
广告