javascript - 如何在所有设备上全屏制作乐天动画？

问题描述

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

因此我创造了这支笔，用来摆弄:)

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

我认为（我仍然认为）“xMidYMax slice”是正确的方法。我认为它是“最大化高度，并左右切片”......

我试图在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"
  };

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

动画就在这个框架内，不是全高:(

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

提前致谢

阿德里安

标签： javascriptlottiebodymovin

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

这是这段代码：

//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');
}

javascript - 如何在所有设备上全屏制作乐天动画？

问题描述

解决方案

推荐阅读