Question

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

因此，我创建了这支笔，以摆弄：）

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

我认为（而且我仍然认为）“ 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"
  };

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

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

我希望这里的人有解决此类问题的经验，可以给我提示。

预先感谢

艾德里安

Answer 1

将代码放到易于使用的版本中后，我找到了解决方法。

这是代码：

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

如何在所有设备上全屏显示乐透动画？

1 个答案: