React-Spring：讓你的應用栩栩如生
??React-Spring是干啥的
React-Spring 是一個用于構建交互式、數據驅動和動畫 UI 組件的庫。它可以為 HTML、SVG、Native Elements、Three.js 等制作動畫。
??React-Spring優點
- 高性能和流暢的動畫效果: React-Spring 基于物理動畫原理，通過使用 requestAnimationFrame 和 Web Animations API，以及針對性能進行了優化，可以實現高性能和流暢的動畫效果。
- 功能豐富：React-Spring 提供了豐富的動畫功能，包括彈簧動畫、衰減動畫、縮放、旋轉、平移等效果。它還支持復雜的動畫序列和交互式動畫，可以創建出各種復雜的動畫效果。
- 簡化的 API： React-Spring 的 API 設計簡潔而直觀，易于學習和使用。它使用了類似于 React Hooks 的方式來管理動畫狀態，使得在組件中創建和控制動畫變得非常簡單。
- 與 React 生態系統的良好集成： React-Spring 與 React 框架緊密集成，可以無縫地與其他 React 組件和庫一起使用。它可以與 React 的生命周期方法和鉤子函數配合使用，使得動畫的啟動、暫停、結束等操作更加靈活和可控。
- 跨平臺支持： React-Spring 不僅可以在 Web 應用程序中使用，還可以在移動端應用程序中使用。它支持 React Native，可以在 React Native 項目中創建原生移動端應用的動畫效果。
?? 一些重要的概念
為了更好的掌握，我們在開始之前了解它的幾個重要概念
?? 動畫元素（Animated Elements）
動畫元素是指在 React-Spring 中用于創建動畫效果的組件或 DOM 元素。你可以將任何組件或 DOM 元素包裝在 animated 函數中，以創建一個動畫元素。例如，animated.div 將一個 <div> 元素包裝成動畫元素。
import { animated } from '@react-spring/web'
// ? 正常工作
<animated.div />
// ?由于mesh不是動畫元素，所以這不會工作
<animated.mesh />?? useSpring 鉤子函數：
useSpring 是 React-Spring 提供的一個自定義鉤子函數，用于創建動畫的狀態和配置。通過調用 useSpring，你可以定義動畫的初始狀態和目標狀態，以及一些可選的配置參數。useSpring 返回一個包含動畫狀態和控制方法的對象，你可以將這些狀態應用到需要動畫的元素上，從而實現動畫效果。
import { useSpring, animated } from '@react-spring/web'
export default function MyComponent() {
const springs = useSpring({
from: { x: 0 },
to: { x: 100 },
})
return (
<animated.div
style={{
width: 80,
height: 80,
background: '#ff6d6d',
borderRadius: 8,
...springs,
}}
/>
)
}你將會看到，當頁面刷新時，div元素從左邊輕輕劃入。
圖片
需要說明的是，useSpring 的返回值根據參數的類型不同而不同。
當參數是對象時，返回的是 style 對象，如上。
當參數為函數時，返回的是包含 style 對象和命令 api 接口。如下：
import { useSpring, animated } from '@react-spring/web'
export default function MyComponent() {
const [springs, api] = useSpring(() => ({
from: { x: 0 },
}))
const handleClick = () => {
api.start({
from: {
x: 0,
},
to: {
x: 100,
},
})
}
return (
<animated.div
onClick={handleClick}
style={{
width: 80,
height: 80,
background: '#ff6d6d',
borderRadius: 8,
...springs,
}}
/>
)
}
圖片
好了，我們介紹完了兩個基本的概念，那你已經算是入門了，但是，React-Spring 還提供了更多的高級功能。
?? 其他的一些重要API
?? useSprings
同時控制多個 useSpring 渲染
import { useSprings, animated } from '@react-spring/web'
export default function MyComponent() {
const springs = useSprings(12, {
from: { opacity: 0 },
to: { opacity: 1 },
})
return (
<div>
{springs.map(props => (
<animated.div style={props}>Hello World</animated.div>
))}
</div>
)
}
圖片
?? 軌跡 useTrail
同時控制多個 useSpring 渲染，和 useSprings 不同的是，每個 useSpring 元素會依次展開
import { useTrail, animated } from '@react-spring/web'
export default function MyComponent() {
const trails = useTrail(12, {
from: { opacity: 0 },
to: { opacity: 1 },
})
return (
<div>
{trails.map(props => (
<animated.div style={props}>Hello World</animated.div>
))}
</div>
)
}
圖片
?? 控制器 Controller
每個useSpring實際上都是一個Controller。因此，當您使用鉤子時，useSpring您會初始化一個新Controller類，并且當您將參數 n 傳遞給鉤子時useSprings，您將創建 n 個數量的Controller。
import { useState, useRef } from 'react'
import { Controller, animated } from '@react-spring/web'
function AnimatedComponent() {
const [isShowing, setIsShowing] = useState(false)
const animations = useRef(new Controller({ opacity: 0 }))
const toggle = () => {
animations.current.start({ opacity: isShowing ? 1 : 0 })
setIsShowing(!isShowing)
}
return (
<>
<button onClick={toggle}>click</button>
<animated.div style={animations.current.springs}>I will fade</animated.div>
</>
)
}
圖片
?? 調整窗口大小：useResize
自動監聽視圖窗口大小的改變，適時的做出反應。
import { useResize, animated } from '@react-spring/web'
function MyComponent() {
const { width, height } = useResize()
return <animated.div style={{ width, height }}>Hello World</animated.div>
}?? 監聽可視區域：useInView
當元素進入可視區域時，選擇動畫元素。
import { useInView, animated } from '@react-spring/web'
function MyComponent() {
const [ref, inView] = useInView()
return <animated.div ref={ref}>{inView ? 'Hello World' : null}</animated.div>
}?? 總結
React-Spring 是一個非常優秀的動畫庫，它的接口 hook化的設計、常用場景的完美支持，十分貼合react的生態系統，使得它在 Github 斬獲了 26.3k的 star，所以這是一款值得推薦的庫。
