如何在调整包含 react-lottie 组件的浏览器大小时保持纵横比？

Question

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

渲染的 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>
    )
}

动画显示和播放正常。

问题是在调整浏览器大小时，动画会缩小和挤压，并且不会保留其原始纵横比。如果我在缩小浏览器后刷新页面，动画就会正确呈现。只有在调整大小时，宽高比才会关闭。

我试过添加：

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

我的选择，但这也不起作用。

我唯一能想到的另一件事是将 resize 事件侦听器附加到 window，后者将依次调用 lottie.resize()

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

?? 中的内容是我卡住的地方。我知道使用 lottie-web，我可以直接访问 lottie.resize() 函数。但是，当使用 react-lottie 时，如何 call/access 调整大小功能？

如有任何帮助，我们将不胜感激。

编辑：我被要求添加示例动画 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>
  )
}

如何在调整包含 react-lottie 组件的浏览器大小时保持纵横比？

How to preserve aspect ratio upon resizing browser containing a react-lottie component?

reactjs

lottie