如何在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 相关文章推荐
用JQuery 实现的自定义对话框
Mar 24 Javascript
javascript 数组的方法集合
Jun 05 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
JavaScript实现的MD5算法完整实例
Feb 02 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
node.js express框架简介与实现
Jul 23 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
May 19 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
一个颜色轮换的简单例子
2006/10/09 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JavaScript实现添加及删除事件的方法小结
2015/08/04 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
使用Browserify来实现CommonJS的浏览器加载方法
2017/05/14 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
python实现超市商品销售管理系统
2019/10/25 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
为什么使用接口?
2014/08/13 面试题
Java如何读取CLOB字段
2013/10/10 面试题
医院护士工作检讨书
2014/10/26 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
2015最新民情日记范文
2015/06/26 职场文书
跳高加油稿
2015/07/21 职场文书