前端框架react-spring怎么使用

本文小編為大家詳細介紹“前端框架react-spring怎么使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“前端框架react-spring怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

安裝

react-spring的官方文檔--鏈接

yarn add @react-spring/web

應用

組件式動畫

const springs = useSpring({
  from: { x: 0 },
  to: { x: 100 },
})
return (
  <animated.div
    style={{
      width: 80,
      height: 80,
      background: '#ff6d6d',
      borderRadius: 8,
      ...springs,
    }}
  />
)

通過<animated.div/>組件聲明該組件可以定義的from和to改變組件的x坐標，從而在默認時間中移動形成動畫。

api控制spring

api.start({
  from: {
    x: 0,
  },
  to: {
    x: 100,
  },
})

概念介紹

react-spring是在SpringValues和animated這兩個組件封裝而成的，一個animated組件通過style屬性的參數更新組件狀態，而這個過程并不引起組件的render。它是基于Higher-Order component(HOC)原理實現的，而這種原理是根據div上所傳遞的參數類別形成的一個元素集合或者通過hooks函數插入SpringValues，從而達到你想要效果。

Animating elements

animated組件可用于任何一個web元素上，然而，由于使用的是原始element,一個animated組件被用于具體的目標上。

import { animated } from '@react-spring/web' 
// ? This will work because `div` is a web element 
<animated.div /> 
// ? This will not work because `mesh` is not a web element. 
<animated.mesh />

如果你之前用過framer-motion，那么你應該熟悉組件的.語法結構。

所以當你能夠熟練的使用animated.element，大多數情況下你可以在element寫出你想要的效果，react-spring在樣式上并沒有特殊的寫法，常見的例如css modules tailwind寫法,react-spring都可以支持，因為animated組件可以接受原始element中的屬性，例如：className。

如果你打算用css庫去修飾組件，那么styled函數支持你這樣做的，就像嵌套組件的方式那樣把animated組件和styled組合在一起。

import { styled } from '@stitches/react' 
const MyModal = styled(animated.div, { 
  width: '40vw', 
  height: '20vh', 
  borderRadius: '8px', 
  backgroundColor: '$white80', 
})

Controllers & Springs & API

如果你已經使用過useSpring函數，那么你對下面的代碼比較熟悉了

const [styles, api] = useSpring(() => ({ 
  x: 0, 
  y: 0, 
  backgroundColor: '#ff0000', 
  scale: [1, 1, 1], 
  config: { 
    precision: 0.0001, 
  }, 
}))

useSpring函數返回了包含兩個元素styles``api的數組對象，它是一個包含SpringValue的對象，而SpringValue是一個由動態的key，當然這些key是你自己定義的。

例如：

type SpringValues<SpringConfig extends Record<string, any> = { 
  [Key in keyof OnlyAnimatableKeys<SpringConfig>]: SpringValue 
}

在上面的例子中，OnlyAnimatableKeys只是以x,y,backgroundColor,scale這些key簡單的配置參數，那么正因為我們知道這些key是可變化的，因此這些key就會成為這個函數中簡單版的type參數了。

Controller

那么什么是Controller呢？實際上可以把每個spring當作一個Controller。因此，當你使用useSpring函數就創建了一個Controller對象或者傳遞多個參數到useSprings函數中，那么你就創建了多個Controller對象。

這些Controller對象就是管理那些通過配置參數創建的SpringValue對象的，這些方法和SpringValue類中類似，Controller中主要的方法例如start``stop``pause，就是通過管理數組中SpringValue對象的。

// The set method from the Controller class 
set(values) { 
  for (const key in values) { 
    const value = values[key] 
    if (!is.und(value)) { 
      this.springs[key].set(value) 
    } 
  } 
} 
// Would be used like this 
controller.set({ 
  x: 0, 
  scale: [0,0,0] 
})

useSpring函數配置后的對象和Controller類構造第一個參數的方式是相同的，這樣你就能知道，在react環境中useSpring函數操作了Controller類的生命周期并且通過SpringRef的方式把它添加到controller的對象中，而SpringRef提供了非常簡單而快捷的方式管理一個或者多個Controller的類對象，這樣，兩者比較之下，你可以忽略用hook的方式而直接使用Controller類的方式。

Spring value

SpringValues可以滿足正常的交互需求，它們的參數明確地傳入animated組件中，這些參數可以添加進去，而不需要在組件被使用的時候去命名。

const { 
  backgroundColor, // SpringValue<string> 
  o, // SpringValue<number> 
  trans, // SpringValue<number[]> 
} = useSpring({ 
  backgroundColor: '#00ff00', 
  o: 0, 
  trans: [0, 1, 2], 
})

這是因為那些在Controller和SpringValue中使用你命名的key，它僅僅是關心你傳入的參數類型的值。在SpringValue類中，我們可以控制運動過程中的整個生命周期，從事件的通過使用的不同類型方式的觸發，SpringValue是運動過程中的驅動力。

Imperative API

這些命令式的API可以讓你不需要在頁面渲染的時候更新你的動畫，對于動畫來說有很大的好處，這樣就不用把動畫和組件的生命周期捆綁在一起，從而讓動畫根據用戶的想法做出迅速的改變。

事實上，簡單地在Controller函數中把SpringRef對象以參數的方式附屬在上面，你可以把SpringRef添加到多個Controller中，從而可以生成出一組動畫，這個思想和useChain這個函數類似。

下面就看看SpingValue和Controller的具體區別

import { useState } from 'react' 
import { useSpring, useSpringRef, animated } from '@react-spring/web' 
const ApiComponent = () => { 
  const api = useSpringRef() 
  const springs = useSpring({ 
    ref: api, 
    from: { x: 0 }, 
  }) 
  const handleClick = () => { 
    api.start({ 
      to: { 
        x: springs.x.get() === 100 ? 0 : 100, 
      }, 
    }) 
  } 
  return ( 
    <div className="flex-container"> 
      <animated.div         
      onClick={handleClick}         
      style={{           
        width: 80,           
        height: 80,           
        background: '#ff6d6d',           
        borderRadius: 8,           
        ...springs,         
      }}       
  	/> 
  	<span>Render ID – {Math.random()}</span> 
  </div> 
  ) 
} 
const StateComponent = () => { 
  const [forward, setForward] = useState(false) 
  const springs = useSpring({ 
    x: forward ? 100 : 0, 
  }) 
  const handleClick = () => { 
    setForward(s => !s) 
  } 
  return ( 
    <div className="flex-container"> 
      <animated.div         
      onClick={handleClick}         
      style={{           
        width: 80,           
        height: 80,           
        background: '#ff6d6d',           
        borderRadius: 8,           
        ...springs,         
      }}       
  	/>  
  	<span>Render ID – {Math.random()}</span> 
  </div> 
  ) 
} 
export default function MyComponent() { 
  return ( 
    <div className="flex-container--column"> 
      <ApiComponent /> 
    	<StateComponent /> 
    </div> 
  ) 
}

可以看到一種方式是Controller的以API改變動畫，而第二種方式是SpringValue中的參數值，在頁面重新渲染的時候，根據值的不同去實現動畫。

讀到這里，這篇“前端框架react-spring怎么使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。