如何在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代码
Jan 13 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
javaScript基础详解
Jan 19 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
Javascript的this详解
Mar 23 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作的文本留言本的例子(一)
2006/10/09 PHP
php str_pad 函数使用详解
2009/01/13 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
javascript实现图片切换的幻灯片效果源代码
2012/12/12 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
详解js动态获取浏览器或页面等容器的宽高
2019/03/13 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python逐行读取文件内容的三种方法
2014/01/20 Python
Python深入06——python的内存管理详解
2016/12/07 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
用python写测试数据文件过程解析
2019/09/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python Django搭建网站流程图解
2020/06/13 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
Hotels.com南非:酒店预订
2017/11/02 全球购物
医学生职业规划范文
2014/01/05 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
《帝国时代4》赛季预告 新增内容编译器可创造地图
2022/04/03 其他游戏