安裝

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

yarn add @react-spring/web

應(yīng)用

組件式動(dòng)畫(huà)

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

通過(guò)<animated.div/>組件聲明該組件可以定義的from和to改變組件的x坐標(biāo)，從而在默認(rèn)時(shí)間中移動(dòng)形成動(dòng)畫(huà)。

api控制spring

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

概念介紹

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

Animating elements

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

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 />

如果你之前用過(guò)framer-motion，那么你應(yīng)該熟悉組件的.語(yǔ)法結(jié)構(gòu)。

所以當(dāng)你能夠熟練的使用animated.element，大多數(shù)情況下你可以在element寫(xiě)出你想要的效果，react-spring在樣式上并沒(méi)有特殊的寫(xiě)法，常見(jiàn)的例如css modules tailwind寫(xiě)法,react-spring都可以支持，因?yàn)閍nimated組件可以接受原始element中的屬性，例如：className。

如果你打算用css庫(kù)去修飾組件，那么styled函數(shù)支持你這樣做的，就像嵌套組件的方式那樣把a(bǔ)nimated組件和styled組合在一起。

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

Controllers & Springs & API

如果你已經(jīng)使用過(guò)useSpring函數(shù)，那么你對(duì)下面的代碼比較熟悉了

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

useSpring函數(shù)返回了包含兩個(gè)元素styles``api的數(shù)組對(duì)象，它是一個(gè)包含SpringValue的對(duì)象，而SpringValue是一個(gè)由動(dòng)態(tài)的key，當(dāng)然這些key是你自己定義的。

例如：

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

在上面的例子中，OnlyAnimatableKeys只是以x,y,backgroundColor,scale這些key簡(jiǎn)單的配置參數(shù)，那么正因?yàn)槲覀冎肋@些key是可變化的，因此這些key就會(huì)成為這個(gè)函數(shù)中簡(jiǎn)單版的type參數(shù)了。

Controller

那么什么是Controller呢？實(shí)際上可以把每個(gè)spring當(dāng)作一個(gè)Controller。因此，當(dāng)你使用useSpring函數(shù)就創(chuàng)建了一個(gè)Controller對(duì)象或者傳遞多個(gè)參數(shù)到useSprings函數(shù)中，那么你就創(chuàng)建了多個(gè)Controller對(duì)象。

這些Controller對(duì)象就是管理那些通過(guò)配置參數(shù)創(chuàng)建的SpringValue對(duì)象的，這些方法和SpringValue類中類似，Controller中主要的方法例如start``stop``pause，就是通過(guò)管理數(shù)組中SpringValue對(duì)象的。

// 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函數(shù)配置后的對(duì)象和Controller類構(gòu)造第一個(gè)參數(shù)的方式是相同的，這樣你就能知道，在react環(huán)境中useSpring函數(shù)操作了Controller類的生命周期并且通過(guò)SpringRef的方式把它添加到controller的對(duì)象中，而SpringRef提供了非常簡(jiǎn)單而快捷的方式管理一個(gè)或者多個(gè)Controller的類對(duì)象，這樣，兩者比較之下，你可以忽略用hook的方式而直接使用Controller類的方式。

Spring value

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

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

這是因?yàn)槟切┰贑ontroller和SpringValue中使用你命名的key，它僅僅是關(guān)心你傳入的參數(shù)類型的值。在SpringValue類中，我們可以控制運(yùn)動(dòng)過(guò)程中的整個(gè)生命周期，從事件的通過(guò)使用的不同類型方式的觸發(fā)，SpringValue是運(yùn)動(dòng)過(guò)程中的驅(qū)動(dòng)力。

Imperative API

這些命令式的API可以讓你不需要在頁(yè)面渲染的時(shí)候更新你的動(dòng)畫(huà)，對(duì)于動(dòng)畫(huà)來(lái)說(shuō)有很大的好處，這樣就不用把動(dòng)畫(huà)和組件的生命周期捆綁在一起，從而讓動(dòng)畫(huà)根據(jù)用戶的想法做出迅速的改變。

事實(shí)上，簡(jiǎn)單地在Controller函數(shù)中把SpringRef對(duì)象以參數(shù)的方式附屬在上面，你可以把SpringRef添加到多個(gè)Controller中，從而可以生成出一組動(dòng)畫(huà)，這個(gè)思想和useChain這個(gè)函數(shù)類似。

下面就看看SpingValue和Controller的具體區(qū)別

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改變動(dòng)畫(huà)，而第二種方式是SpringValue中的參數(shù)值，在頁(yè)面重新渲染的時(shí)候，根據(jù)值的不同去實(shí)現(xiàn)動(dòng)畫(huà)。

以上就是前端框架react-spring基礎(chǔ)用法的詳細(xì)內(nèi)容，更多關(guān)于前端框架react spring的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！