使用@react spring/web进行动画倒计时

1. 使用到技术
2. 如何实现
3. 创建<Box/ >组件
4. 创建 <Countdown /> 组件
5. 创建一个帮助我们进行分解的函数
6. 混合之前的所有点

今天，我把我在 react 中开发动画倒计时的步骤分享给大家。

使用到技术

1. vite
2. @react-spring/web
3. date-fns
4. styled-components

如何实现

由于我们想“创建一个倒计时，用来呈现从未来某个日期开始的剩余时间”，主要步骤：

1. 创建一个抽象的＜Box/＞组件，该组件只负责渲染内部的标签，并在每次标签更改时为其自身设置动画。在这个 demo 中，我们可以找到 4 个＜Box/＞。
2. 创建<Countdown/>组件，用来负责渲染 4 个＜Box/＞组件标签。
3. 创建一个函数，帮助我们从给定的未来日期开始计算一天、几小时、几分钟和几秒。
4. 混合之前的所有点

这个 demo 一些地方用到了 css 盒子模型，所以我们在 index.css 中写入：

* {
  box-sizing: border-box!important;
}

创建<Box/ >组件

正如我之前所说的，我们想要构建一个可重用的组件。此组件只需要两个 props：

1. labelPeriod（string）：我们将通过“day”、“hours”等。但我们也可以通过“day ramaining”或“hours remaining”或“days of waiting”
2. labelNumber（number）：这将是一个来自 helper 函数的值。每次此值更改时，动画都会开始。

由于我们想要一个覆盖当前数字并显示下一个数字的动画，我们需要在这个组件上创建两个不同的面，并使用一个非常酷的 css 实用属性，称为transform-style: preserve-3d。由于此特性与transform: rotateX(180deg)相结合，我们可以有两个辐射面，其中背面旋转并被主面覆盖。

演示: 点击这里
全部源码：点击这里