使用 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 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告