Как я могу сделать анимацию лотереи полноэкранной на всех устройствах?

у меня проблема с анимацией контроллера мыши.

поэтому я создал эту ручку, чтобы возиться :)

https://codepen.io/duderion/pen/bGbXNqe

цель состоит в том, чтобы анимация лотереи шла сверху вниз окна просмотра (минус верхнее меню), левая и правая части должны быть обрезаны (вы не можете показать всю анимацию сразу, поэтому обрезка является естественным поведением)

Я думал (и до сих пор думаю), что "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"
  };

Но независимо от того, что я делаю, он не меняет свой формат, если я изменяю размер области просмотра.

анимация находится только в этом кадре, а не в полную высоту :(

Я надеюсь, что кто-то здесь имеет опыт с такого рода проблемами и может дать мне подсказку.

заранее спасибо

Адриан


javascript lottie bodymovin
person Adrian Gier    schedule 01.10.2019    source источник
comment
Можете ли вы предоставить минимальную страницу только с анимацией? Предоставление ссылки на вашу незавершенную работу — это хорошо, но трудно увидеть проблему. Это также может помочь вам определить проблему. Рассмотрим jsfiddle.net.   -  person cw'    schedule 01.10.2019
comment
Спасибо за совет. я обновлю адрес в посте   -  person Adrian Gier    schedule 01.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Поместив код в более простую версию для написания кода, я нашел решение.

это этот код:

//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');
}
person Adrian Gier    schedule 01.10.2019