如何在所有设备上全屏制作 lottie 动画？

Question

我的鼠标控制器 lottie 动画有问题。

因此我创造了这支笔，fiddle 左右:)

目标是，lottie 动画从视口的顶部到底部（减去顶部菜单），左右应该被裁剪（你不能一次显示整个动画，所以裁剪是一种自然行为)

我认为（现在仍然认为）"xMidYMax slice" 是正确的方法。我认为它是 "Maximize the height, and slice left and right"...

我尝试在 bodymovin 渲染器设置中设置它

 var animData = {
    container: document.getElementById("sec"),
    renderer: "svg",
    prerender: true,
    loop: false,
    autoplay: false,
    offset: 500,
    rendererSettings: {
      progressiveLoad: false,
      preserveAspectRatio: "xMidYMax slice"
    },
    path:
      "https://uberserver.de/uncabka/wp-content/plugins/elementor-cabka/assets/js/animation.json"
  };

但无论我做什么，如果我调整视口大小，它的格式都不会改变。

the animation is just within this frame, not full height :(

我希望这里有人有过这类问题的经验，可以给我一个提示。

提前致谢

阿德里安

Answer 1

将代码放入 codepen 的更简单版本后，我找到了解决方案。

是这个代码：

//bind the complete function to the data_ready event of bodymovin's animation loader
anim.addEventListener("data_ready", complete);

//set the attribute manually after the svg is loaded.
function complete() {
   $('#sec svg').attr('preserveAspectRatio','xMidYMax slice');
}

如何在所有设备上全屏制作 lottie 动画？

How can i make a lottie animation fullscreen on all devices?

javascript

bodymovin

lottie