Добавьте красивую анимацию лотереи в vue (^_^)

Vue.js
Добавьте красивую анимацию лотереи в vue (^_^)

Зачем использовать лотти ★~★

1. Сделайте свою программу менее монотонной

2. Это может улучшить самочувствие некоторых студентов с эстетическим обсессивно-компульсивным расстройством.

3. В Интернете много ресурсовНажмите на меня, чтобы войти на веб-сайт ресурсов лотереи

官方例子

Познакомить с библиотекой lottie (>.<)

Внедрить Lottie в Vue очень и очень просто

1. Установите пакет vue-lottie

npm install --save vue-lottie

2. Представьте vue-lottie по всему миру

Внедрение и регистрация глобальных компонентов в main.js

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
Конечно, вы также можете импортировать локально ~o~

3. Расскажите о своих лотерейных ресурсах

Вы можете загрузить соответствующие ресурсы с веб-сайта ресурсов лотереи в верхней части текста и сохранить загруженные файлы в папку проекта.
// 第一步：script中引入资源
import * as animationData from "../assets/lottie/loading.json";

// 第二步：使用组件
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />

// 第三步：data里面添加相应属性
data(){
    return {
        defaultOptions: { animationData: animationData },
        animationSpeed: 1,
        anim: {}
    }
}

//第四步：定义方法
methods: {
    handleAnimation: function(anim) {
        this.anim = anim;
        console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
}
Вы сделали здесь QAQ
Есть также некоторые API-методы остановки, паузы и setSpeed, которые подробно обсуждаться не будут.

Наконец, вставьте адрес github автора vue-lottie.

vue-lottie

Категории