Как повторно загрузить данные JSON для компонента Lott ie? - PullRequest
Новая
       90

Как повторно загрузить данные JSON для компонента Lott ie?

0 голосов
/ 14 июля 2020

Я создаю целевую страницу с помощью Gridsome + Vue + Tailwind CSS и пытаюсь воспроизвести различные анимации в компоненте Lott ie.

Я установил npm vue -lott ie пакет. https://www.npmjs.com/package/vue-lottie Компонент Lott ie должен воспроизводить 4 различных анимации в зависимости от данных JSON. Я могу воспроизвести только одну анимацию, но когда я нажимаю кнопки для изменения анимации, она не работает. Ему не нужно изменять его скорость или управлять остановкой или воспроизведением, а просто автовоспроизведение и l oop.

Я хочу воспроизвести 4 анимации с одним компонентом Lott ie и каждой анимацией. должен быть изменен автоматически в течение 10 секунд или может быть изменен нажатием кнопки вручную.

Dynamic Lottie component

I tried to implement this using Lottie functions using setAnimation(), destroy()


       импорт Lott ie из './lottie.vue'; импортировать * как animationData01 из './assets/01.json'; импортировать * как animationData02 из './assets/02.json'; импортировать * как animationData03 из './assets/03.json'; импортировать * как animationData04 из './assets/04.json'; экспорт по умолчанию {name: 'app', компоненты: {'lott ie': Lottie}, data () {return {defaultOptions: {animationData: animationData01.default}, animationSpeed: 1}}, методы: {}}

Я пытался использовать некоторые функции, такие как lott ie .destroy (), lott ie .loadAnimation () и динамически установить defaultOption, но это не сработало. Пожалуйста, дайте мне знать, как динамически загружать данные JSON в один компонент Lott ie.

Спасибо за ваше время и внимание.

...