如何在vue里添加好看的lottie动画


Posted in Javascript onAugust 02, 2018

如何在vue里添加好看的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 对象的全部属性
  },
}

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

vue-lottie

总结

以上所述是小编给大家介绍的在vue里添加好看的lottie动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
常规表格多表头查询示例
Feb 21 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jQuery中index()方法用法实例
Dec 27 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
通过javascript实现段落的收缩与展开
Jun 26 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
原生js实现form表单序列化的方法
Aug 02 #Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 #Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 #Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 #Javascript
You might like
用来给图片加水印的PHP类
2008/04/09 PHP
关于Appserv无法打开localhost问题的解决方法
2009/10/16 PHP
elgg 获取文件图标地址的方法
2010/03/20 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP学习记录之数组函数
2018/06/01 PHP
JavaScript 输入框内容格式验证代码
2010/02/11 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
Javascript执行效率全面总结
2013/11/04 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
js实现数组转换成json
2015/06/26 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
利用canvas实现的加载动画效果实例代码
2017/07/05 Javascript
jQuery中each方法的使用详解
2018/03/18 jQuery
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
2019/07/31 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python中的pass语句使用方法讲解
2015/05/14 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
使用Python绘制图表大全总结
2017/02/11 Python
python实现点对点聊天程序
2018/07/28 Python
Python同步遍历多个列表的示例
2019/02/19 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
python实现双人五子棋(终端版)
2020/12/30 Python
介绍一下Ruby的特点
2013/01/20 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
廉洁家庭事迹材料
2014/05/15 职场文书
手机被没收的检讨书
2014/10/04 职场文书
Pandas数据类型之category的用法
2021/06/28 Python