如何在調整包含 react-lottie 組件的瀏覽器大小時保持縱橫比？

Question

我有一個使用react-lottie ( https://www.npmjs.com/package/react-lottie )

import Lottie from 'react-lottie'
import animationData from './path/to/animation.json'

const MyComponent = () => {
    const myOptions = {
        loop: true,
        autoplay: true,
        renderer: 'canvas',
        animationData: animationData
    }

    return (
        <div>
            ...other stuff
            <Lottie options={myOptions} width={1000} height={500} />
        </div>
    )
}

animation 顯示和播放良好。

問題在於，在調整瀏覽器大小時，animation 會收縮和壓扁，並且不會保留其原始縱橫比。 如果我在縮小瀏覽器后刷新頁面，則 animation 會正確呈現。 只有當調整大小正在積極發生時，縱橫比才會關閉。

我試過添加：

rendererSettings: {
    preserveAspectRatio: 'xMidYMid slice' // also tried 'xMidYMid meet'
}

我的選擇，但這也不起作用。

我能想到的唯一另一件事是將resize事件偵聽器附加到 window 進而調用lottie.resize()

useEffect(() => {
    window.addEventListener('resize', ??)
}, [])

里面的東西?? 是我卡住的地方。 我知道使用lottie-web ，我可以直接訪問lottie.resize() function。 但是，在使用react-lottie時，如何調用/訪問調整大小的 function？

任何幫助將不勝感激。

編輯：我被要求添加一個示例 animation JSON 所以它在這里： https://pastebin.com/gXCEhKaR

Answer 1

是的，謝謝，我是在家里開始的，但是您已經為 Lottie 組件設置了寬度和高度值。 如果你想讓 Lottie 根據屏幕的大小來改變它的大小，那么你需要添加一個鈎子來改變屏幕。

掛鈎調整大小

  export function useSizeComponents (ref) {
  const [size, setSize] = useState([0, 0])

  useLayoutEffect(() => {
    function updateSize () {
      let newSize = [window.innerWidth, window.innerHeight]
      if (ref?.current) {
        newSize = [ref.current.offsetWidth, ref.current.offsetHeight]
      }
      setSize(newSize)
    }
    window.addEventListener('resize', updateSize)
    updateSize()
    return () => window.removeEventListener('resize', updateSize)
  }, [])

  return size
}

你的組件

const MyComponent = () => {
  const [width, height] = useSizeComponents()
  const scaleLottie = 0.5

  const myOptions = {
    loop: true,
    autoplay: true,
    renderer: 'canvas',
    animationData: animationData,
  }

  const control = useMemo(() => {
    if (!width) return null
    const xMidYMid = 0.5
    const sizeComponent = {
      width: width * scaleLottie,
      height: width * scaleLottie * xMidYMid
    }
    return <Lottie key={width} options={myOptions} {...sizeComponent} />
  }, [width])

  return (
    <div>
      ...other stuff
      {control}
    </div>
  )
}