Загрузка json lott ie анимации в angular веб-приложении очень медленная на Android устройствах, но очень плавная на iPhone - PullRequest
Новая
       12

Загрузка json lott ie анимации в angular веб-приложении очень медленная на Android устройствах, но очень плавная на iPhone

0 голосов
/ 16 апреля 2020

Я пытаюсь загрузить анимацию с несколькими лотами ie в свое веб-приложение для мобильных устройств. Я использую angular 6 с ng-lott ie. У меня есть 16 json файлов для загрузки, представляющих 16 лот ie анимаций. На iOS все действительно плавно, без проблем. Однако на устройствах Android (протестировано на нескольких устройствах: samsung galaxy S7, S9, asus Zenphone 6 ...) загрузка анимации занимает от 3 до 5 секунд, что приводит к зависанию всей страницы во время загрузки. Это означает, что пользователь не может взаимодействовать со страницей в течение этого времени, что не идеально.

Моя настройка

  • angular 6
  • ng-lott ie 0.3.2
  • файлы json для анимации весом от 100 до 200Ко и хранятся в папке ресурсов

Вот способ отображения анимации в лоте ie:

HTML: 

<lottie-animation-view [options]="animation1"
                       [width]="scrWidth*0.9"
                       (animCreated)="handleAnimation($event,0,'animation1')">
</lottie-animation-view>

TS: 

this.animation1_file=require('../../../../assets/anims/Question1-People/04.0-People-Fix-Father.json')
this.animation1 = {
      animationData: this.animation1_file,
      autoplay: true,
      loop: true
    };

Что я пробовал:

Я попытался заменить параметр animationData на 

path:'../../../../assets/anims/Question1-People/04.0-People-Fix-Father.json'

Я попытался изменить средство визуализации анимации (svg, canvas ...).

Я пытался установить для параметраgressiveLoad значение true.

Ни один из этих тестов не вносит значительных изменений во время загрузки. Я не уверен, что это проблема с лотом ie или с тем, как загружаются мои json файлы.

...