react鉤子

以React 掛鉤方式使用Web Animations API （又名WAAPI）。 讓我們在現代世界中創建高性能，靈活和可操作的網絡動畫。 希望你們👍🏻！

??嘗試一下自己： https ://use-web-animations.netlify.app

??嘗試一下自己： https：//use-web-animations.netlify.app#animations

特征

• 🚀動畫上的Web與高高性能和可操作的方式，利用網絡動畫API 。
• React易于使用，基于React 掛鉤 。
• 🧸內置插件填充工具更好的瀏覽器兼容性 。
• 🎛超靈活的API 設計 ，可以涵蓋您需要的所有情況 。
• 🎞 內置插件的動畫給你，基于Animate.css 。
• for由于某些原因支持自定義引用。
• 📜支持TypeScript類型定義。
• Server?服務器端渲染兼容性。

用法

掛鉤的API設計不僅繼承了Web Animations API的DX，而且還為我們提供了有用的功能和糖事件。 以下是一些示例，向您展示其工作方式。

基本用法

通過關鍵幀 （ 格式 ）和時間 （ 屬性 ）選項創建動畫。

Code 在CodeSandbox上播放

import React from "react" ; import useWebAnimations from "@wellyshen/use-web-animations" ;const App = () => {const { ref, playState } = useWebAnimations({keyframes : {transform : [ "translateX(500px)" ], // Move by 500pxbackground: [ "red" , "blue" , "green" ], // Go through three colors},timing : {delay : 500 , // Start with a 500ms delayduration: 1000 , // Run for 1000msiterations: 2 , // Repeat oncedirection: "alternate" , // Run the animation forwards and then backwardseasing: "ease-in-out" , // Use a fancy timing function},onReady : ( { playState, animate, animation } ) => {// Triggered when the animation is ready to play (Google Chrome: available in v84+)},onUpdate : ( { playState, animate, animation } ) => {// Triggered when the animation enters the running state or changes state},onFinish : ( { playState, animate, animation } ) => {// Triggered when the animation enters the finished state (Google Chrome: available in v84+)},// More useful options...});return (< div className = "container" > <p>🍿 Animation is {playState}</p><div className="target" ref={ref} /></div> ); };

播放控制

現有技術的缺點是缺乏回放控制。 Web Animations API提供了幾種有用的方法來控制播放：通過Animation接口的方法進行播放，暫停，倒退，取消，完成，查找，控制速度。 這個鉤子為我們提供了與動畫交互的動畫實例，我們可以通過getAnimation（）返回值來訪問它。

Code 在CodeSandbox上播放

import React from "react" ; import useWebAnimations from "@wellyshen/use-web-animations" ;const App = () => {const { ref, playState, getAnimation } = useWebAnimations({playbackRate : 0.5 , // Change playback rate, default is 1autoPlay: false , // Automatically starts the animation, default is truekeyframes: { transform : [ "translateX(500px)" ] },timing : { duration : 1000 , fill : "forwards" },});const play = () => {getAnimation().play();};const pause = () => {getAnimation().pause();};const reverse = () => {getAnimation().reverse();};const cancel = () => {getAnimation().cancel();};const finish = () => {getAnimation().finish();};const seek = ( e ) => {const animation = getAnimation();const time = (animation.effect.getTiming().duration / 100 ) * e.target.value;animation.currentTime = time;};const updatePlaybackRate = ( e ) => {getAnimation().updatePlaybackRate(e.target.value);};return (< div className = "container" > <button onClick={play}>Play</button><button onClick={pause}>Pause</button><button onClick={reverse}>Reverse</button><button onClick={cancel}>Cancel</button><button onClick={finish}>Finish</button><input type="range" onChange={seek} /><input type="number" defaultValue="1" onChange={updatePlaybackRate} /><div className="target" ref={ref} /></div>); };

獲取動畫信息

使用Web Animations API時，我們可以通過Animation接口的屬性獲取動畫的信息。 但是，我們也可以通過getAnimation（）返回值來獲取動畫的信息。

import React from "react" ; import useWebAnimations from "@wellyshen/use-web-animations" ;const App = () => {const { ref, getAnimation } = useWebAnimations({keyframes : { transform : [ "translateX(500px)" ] },timing : { duration : 1000 , fill : "forwards" },});const speedUp = () => {const animation = getAnimation();animation.updatePlaybackRate(animation.playbackRate * 0.25 );};const jumpToHalf = () => {const animation = getAnimation();animation.currentTime = animation.effect.getTiming().duration / 2 ;};return (< div className = "container" > <button onClick={speedUp}>Speed Up</button><button onClick={jumpToHalf}>Jump to Half</button><div className="target" ref={ref} /></div> ); };

動畫實例不是React狀態的一部分，這意味著我們需要在需要時通過getAnimation（）訪問它。 如果要監視動畫的信息，請使用以下onUpdate事件。 該事件由內部的requestAnimationFrame實現，并且當animation.playState運行或更改時觸發事件回調。

import React, { useState } from "react" ; import useWebAnimations from "@wellyshen/use-web-animations" ;const App = () => {const [showEl, setShowEl] = useState( false );const { ref } = useWebAnimations({keyframes : { transform : [ "translateX(500px)" ] },timing : { duration : 1000 , fill : "forwards" },onUpdate : ( { animation } ) => {if (animation.currentTime > animation.effect.getTiming().duration / 2 )setShowEl( true );},});return (< div className = "container" >{showEl && <div className="some-element" />}<div className="target" ref={ref} /></div>); };

與動畫的動態交互

我們可以根據animate（）返回值在所需的時間創建并播放動畫，該返回值基于Element.animate（）實現 。 對于交互和復合模式很有用。

讓我們創建一個鼠標交互效果：

Code 在CodeSandbox上播放

import React, { useEffect } from "react" ; import useWebAnimations from "@wellyshen/use-web-animations" ;const App = () => {const { ref, animate } = useWebAnimations();useEffect( () => {document .addEventListener( "mousemove" , (e) => {// The target will follow the mouse cursoranimate({keyframes : { transform : `translate( ${e.clientX} px, ${e.clientY} px)` },timing : { duration : 500 , fill : "forwards" },});});}, [animate]);return (< div className = "container" > <div className="target" ref={ref} /></div> ); };

通過生命周期和復合模式創建反彈效果：

import useWebAnimations from "@wellyshen/use-web-animations" ;const App = () => {const { ref, animate } = useWebAnimations({id : "fall" , // Set animation id, default is empty stringkeyframes: [{ top : 0 , easing : "ease-in" }, { top : "500px" }],timing : { duration : 300 , fill : "forwards" },onFinish : ( { animate, animation } ) => {// Lifecycle is triggered by each animation, we can check the id to prevent animation from repeatingif (animation.id === "bounce" ) return ;animate({id : "bounce" ,keyframes : [{ top : "500px" , easing : "ease-in" },{ top : "10px" , easing : "ease-out" },],timing : { duration : 300 , composite : "add" },});},});return (< div className = "container" > <div className="target" ref={ref} /></div> ); }; Composite?并非所有瀏覽器都完全支持復合模式，請在使用前仔細檢查瀏覽器的兼容性 。

使用內置動畫

懶得考慮動畫？ 我們為您提供了一系列現成的動畫，它們是基于Animate.css實現的。

👉🏻觀看演示

import React from "react" ; import useWebAnimations, { bounce } from "@wellyshen/use-web-animations" ;const App = () => {// Add a pre-defined effect to the targetconst { ref } = useWebAnimations({ ...bounce });return (< div className = "container" > <div className="target" ref={ref} /></div> ); };

我們可以通過覆蓋內置動畫的屬性來自定義內置動畫：

const { keyframes, timing } = bounce; const { ref } = useWebAnimations({keyframes,timing : {...timing,delay : 1000 , // Delay 1sduration: timing.duration * 0.75 , // Speed up the animation}, });

查看所有可用的動畫

感謝您的閱讀，有關更多用法的詳細信息，請查看項目的GitHub頁面： https : //github.com/wellyshen/use-web-animations

您還可以安裝通過npm分發的此軟件包。

$ yarn add @wellyshen/use-web-animations# or $ npm install --save @wellyshen/use-web-animations

翻譯自: https://hackernoon.com/creating-highly-performant-animations-using-web-animations-api-and-react-hooks-k92d3utf

react鉤子

總結

以上是生活随笔為你收集整理的react钩子_使用Web动画API和React钩子创建高性能动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。