如何在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 相关文章推荐
学习ExtJS 访问容器对象
Oct 07 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
zTree异步加载展开第一级节点的实现方法
Sep 05 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
小程序Scroll-view上拉滚动刷新数据
Jun 21 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
javascript JSON操作入门实例
2010/04/16 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
JavaScript类和继承 prototype属性
2010/09/03 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JS之相等操作符详解
2016/09/13 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
js实现移动端吸顶效果
2020/01/08 Javascript
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
使用Python实现 学生学籍管理系统
2019/11/26 Python
Python如何存储数据到json文件
2020/03/09 Python
python 如何设置守护进程
2020/10/29 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
在求职信中如何凸显个人优势
2013/10/30 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
店长职务说明书
2014/02/04 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
2016优秀毕业生个人事迹材料
2016/02/29 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
如何书写邀请函?
2019/06/24 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB