快捷導(dǎo)航

前端框架react-spring基礎(chǔ)用法

更新時間：2023年04月19日 11:59:11 作者：H_World

這篇文章主要為大家介紹了前端框架react-spring基礎(chǔ)用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

安裝

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

yarn add @react-spring/web

應(yīng)用

組件式動畫

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屬性的參數(shù)更新組件狀態(tài)，而這個過程并不引起組件的render。它是基于Higher-Order component(HOC)原理實現(xiàn)的，而這種原理是根據(jù)div上所傳遞的參數(shù)類別形成的一個元素集合或者通過hooks函數(shù)插入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，那么你應(yīng)該熟悉組件的.語法結(jié)構(gòu)。

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

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

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

Controllers & Springs & API

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

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

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

例如：

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

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

Controller

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

這些Controller對象就是管理那些通過配置參數(shù)創(chuàng)建的SpringValue對象的，這些方法和SpringValue類中類似，Controller中主要的方法例如start``stop``pause，就是通過管理數(shù)組中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函數(shù)配置后的對象和Controller類構(gòu)造第一個參數(shù)的方式是相同的，這樣你就能知道，在react環(huán)境中useSpring函數(shù)操作了Controller類的生命周期并且通過SpringRef的方式把它添加到controller的對象中，而SpringRef提供了非常簡單而快捷的方式管理一個或者多個Controller的類對象，這樣，兩者比較之下，你可以忽略用hook的方式而直接使用Controller類的方式。

Spring value

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

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

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

Imperative API

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

事實上，簡單地在Controller函數(shù)中把SpringRef對象以參數(shù)的方式附屬在上面，你可以把SpringRef添加到多個Controller中，從而可以生成出一組動畫，這個思想和useChain這個函數(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改變動畫，而第二種方式是SpringValue中的參數(shù)值，在頁面重新渲染的時候，根據(jù)值的不同去實現(xiàn)動畫。

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

您可能感興趣的文章: