为什么用lottie ★~★

1.能让你的程序不那么单调

2.能让一些有审美强迫症的同学好受一点

3.网上有丰富的资源 点我进入lottie资源网站

引入lottie库 (>.<

在vue中引入lottie非常非常简单

1.安装vue-lottie包

npm install --save vue-lottie
复制代码

2.全局引入vue-lottie

在main.js引入并注册全局组件即可

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
复制代码
当然你也可以局部引入 ~o~

3.引入你的lottie资源

在文中顶部lottie资源网站可以下载相应的资源,下载下来的文件保存到项目的文件夹下
// 第一步: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
还有一些 stop,pause,setSpeed 的一些api方法就不细说了

最后贴上vue-lottie作者的github地址

vue-lottie

随机推荐

  1. 打开mac上面的apache 服务器

    1. apache 服务器在系统安装的时候就默认安装了 config 文件未知:  /etc/apache2/httpd.conf 2. 编辑配置文件 httpd.conf 2.1 查找  Docum ...

  2. Magento 最佳开发配置

    概观 典型的软件开发流程如下: 本地开发机器 > QA /集成服务器 > 预览服务器(可选)> 生产服务器 无论您是在编写新的Magento 2 扩展 还是为代码库做贡献,任何开发人 ...

  3. 【nginx】nginx的工作模式和信号量控制

    nginx是一个多进程/多线程高性能web服务器,在linux系统中,nginx启动后会以后台守护进程(daemon)的方式去运行,后台进程包含一个master进程和多个worker进程(这个数量可以 ...

  4. Lua语法基础(一)

    1. 注释 -- 单行注释 --[[ 多行注释 --]] 2. 运行方式     (1)交互式运行         命令行下 lua进入交互模式     (2)命令行运行         lua + ...

  5. SQL随记(三)

    1.关于package: 包的作用:可以将任何出现在块声明的语句(过程,函数,游标,游标,类型,变量)放入包中,相当于一个容器. 包的好处:在包中的(过程,函数,游标,游标,类型,变量)相当于sql/ ...

  6. KNN算法的实现

    K近邻(KNN)算法简介 KNN是通过测量不同特征值之间的距离进行分类.它的思路是:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别,其 ...

  7. ETL过程跑完后,使用python发送邮件

    目标库中,如果有行数为0的表,使用python发送邮件 # -*- coding:utf-8 -*- # Author: zjc # Description:send monitor info to ...

  8. 查看linux的cpu信息

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  9. OGG微服务架构入门

    数据复制任务路线图 设置数据复制必须执行许多任务. 下表列出了构建分发路径的阶段. Task Description 运行Oracle GoldenGate Configuration Assista ...

  10. 关于 min_25 筛的入门以及复杂度证明

    min_25 筛是由 min_25 大佬使用后普遍推广的一种新型算法,这个算法能在 \(O({n^{3\over 4}\over log~ n})\) 的复杂度内解决所有的积性函数前缀和求解问题(个人 ...