[英]How to preserve aspect ratio upon resizing browser containing a react-lottie component?
I have a Lottie animation that is rendered using react-lottie
( https://www.npmjs.com/package/react-lottie )我有一个使用
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>
)
}
The animation displays and plays fine. animation 显示和播放良好。
The issue is that when resizing the browser, the animation shrinks and squishes and does not preserve its original aspect ratio.问题在于,在调整浏览器大小时,animation 会收缩和压扁,并且不会保留其原始纵横比。 If I do a page refresh after shrinking the browser, the animation is then rendered correctly.
如果我在缩小浏览器后刷新页面,则 animation 会正确呈现。 It is only when the resizing is actively occurring that the aspect ratio is off.
只有当调整大小正在积极发生时,纵横比才会关闭。
I have tried adding:我试过添加:
rendererSettings: {
preserveAspectRatio: 'xMidYMid slice' // also tried 'xMidYMid meet'
}
to my options but that does not work either.我的选择,但这也不起作用。
The only other thing I can think of is to attach a resize
event listener to the window which will in turn call lottie.resize()
我能想到的唯一另一件事是将
resize
事件侦听器附加到 window 进而调用lottie.resize()
useEffect(() => {
window.addEventListener('resize', ??)
}, [])
The stuff in ??
里面的东西
??
is where I get stuck.是我卡住的地方。 I know that using
lottie-web
, I have direct access to a lottie.resize()
function.我知道使用
lottie-web
,我可以直接访问lottie.resize()
function。 However, when using react-lottie
, how do I call/access the resize function?但是,在使用
react-lottie
时,如何调用/访问调整大小的 function?
Any help would be greatly appreciated.任何帮助将不胜感激。
Edit: I have been asked to add an example animation JSON so it is here: https://pastebin.com/gXCEhKaR编辑:我被要求添加一个示例 animation JSON 所以它在这里: https://pastebin.com/gXCEhKaR
Yes, thank you, I started it at home, but you have the width and height values set for the Lottie component.是的,谢谢,我是在家里开始的,但是您已经为 Lottie 组件设置了宽度和高度值。 If you want Lottie to change its size depending on the size of the screen, then you need to add a hook to change the screen.
如果你想让 Lottie 根据屏幕的大小来改变它的大小,那么你需要添加一个钩子来改变屏幕。
Hook resize挂钩调整大小
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
}
Your component你的组件
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>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.