在VUE中使用Lottie动画

Lottie简介

官方介绍：Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! http://airbnb.io/lottie/

Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovin导出为json格式），支持web、ios、android和react native。在web侧，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制到我们页面中。

Lottie的优点

Lottie方法方案是由设计师出动画，导出为json，给前端播放。所以，使用Lottie方案的好处在于：

动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好；
前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量；
设计制作动画，前端展现动画，专业人做专业事，分工合理；
卖家秀即买家秀，还原程度百分之百；
使用lottie方案，json文件大小会比gif文件小很多，性能也会更好。

有用链接：（一部分整理内容来自于以下文档）

Lottie官方文档：https://lottiefiles.com/

vue-lottie Github地址：https://github.com/chenqingspring/vue-lottie#license

Lottie介绍：http://test.imweb.io/topic/5b23a745d4c96b9b1b4c4efc

Lottie实践：http://test.imweb.io/topic/5b23a850d4c96b9b1b4c4efe

Lottie源码分析：http://test.imweb.io/topic/5b2b129e61340cbe5576ca44

使用方法及步骤：

1.在webStorm的terminal窗口中下载vue-lottie插件，下载命令：npm install --save vue-lottie

2.在main.js文件中引入vue-lottie插件,你可以将其设置为全局组件，也可以在需要使用的时候单独引入

第一种：全局引入,在main.js中加入如下代码

import lottie from 'vue-lottie'
Vue.component('lottie',lottie)

第二种：局部引入

在vue文件中引用vue-lottie,然后在组件中进行注册

import lottie from 'vue-lottie'export default{
...
components:{'lottie':lottie
}
...
}

第3步：在使用到的Vue文件中引入lottie json文件

  import Anim from "../assets/anim.json"

第4步：在我们需要使用到的菜单位置使用lottie

 <lottie :options="defaultOptions"  :width="24" :height="24" v-on:animCreated="handleAnimation" />data:{return{defaultOptions:{animationData:Anim,loop:false,autoplay:false},defaultAnim:''}
},
methods:{
handleAnimation(anim){this.defaultAnim = anim;}
}

说明：lottie初始化时，需要指定一个options配置项，因为lottie是没有宽高的，所以宽高必须设置，animCreated方法用于创建lottie动画，它的方法返回一个anim对象，里面包含这个动画的所有属性。我们可以根据它返回的这个对象，来对lottie动画做一系列的控制。

lottie的参数options说明：

  container: element, //要包含该动画的dom元素renderer: 'svg',    //渲染方式，svg、canvas、html（轻量版仅svg渲染）loop: true,    //是否循环播放，true表示循环，false表示不循环autoplay: true,   //是否自动播放，true表示自动播放animationData: animationData,   //需要引入的json动画对象

可调用方法：

Anim.play(); // 播放该动画，从目前停止的帧开始播放
Anim.stop(); // 停止播放该动画，回到第0帧
Anim.pause(); // 暂停该动画，在当前帧停止并保持Anim.goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止。isFrame(默认false)指示value表示帧还是时间(毫秒)
Anim.goToAndPlay(value, isFrame); // 跳到某个时刻/帧并从该帧往后进行播放
Anim.goToAndStop(30, true); // 跳转到第30帧并停止
Anim.goToAndPlay(300); // 跳转到第300毫秒并从300毫秒开始向后播放Anim.playSegments(arr, forceFlag); // 播放片段，arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段，如果是false则需等前一个动画结束后开始播放，如果是true，则立即开始播放
Anim.playSegments([10,20], false); // 播放完之前的片段，播放10-20帧
Anim.playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧Anim.setSpeed(speed); // 设置播放速度，speed为1表示正常速度
Anim.setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放
Anim.destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法

lottie常用监听方法，我们可以在mounted时为动画添加监听器

Anim.addEventListener('data_ready', () => {console.log('animation data has loaded');
});

其他监听事件：

complete: 播放完成后触发（循环播放下不会触发）
loopComplete: 当前循环下播放（循环播放/非循环播放）结束时触发
enterFrame: 每进入一帧就会触发，播放时每一帧都会触发一次，stop方法也会触发
segmentStart: 播放指定片段开始时触发，playSegments、resetSegments等方法刚开始播放指定片段时会发出，如果playSegments播放多个片段，多个片段最开始都会触发。
data_ready: 动画json文件加载完毕触发
DOMLoaded: 动画相关的dom已经被添加到html后触发
destroy: 将在动画删除时触发

在VUE中使用Lottie动画相关推荐

Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
如何实现vue中的列表动画，如何封装vue动画
文章目录一.vue中的列表动画如何实现列表动画原理: 二.vue中如何封装动画第1个版本:css动画版第2个版本: js动画版(推荐) 一.vue中的列表动画如何实现举个例子: 列表动画原理 ...
VUE 中渲染Echarts 动画柱状图
VUE 中渲染Echarts 动画柱状图效果图: 安装Echarts依赖要在vue中使用Echarts 需要先安装依赖 npm install echarts --save 这是我的Echart ...
在vue项目中使用Lottie动画(随看随用)
前言: Lottie是一个IOS,Android和React Native库,可以实时渲染动画,动画被转化成JSON文件,节省了很多资源,允许应用程序像使用静态图像一样轻松使用动画.网上也有丰富的动画 ...
如何在Vue中使用lottie加载SVG动画
背景最近刚搞完官网,是时候分享一波我在码官网过程中遇到的一些小困难.当然,我会分享一些比较重点的内容.现在网页上比较复杂的动画基本都采用 SVG,像 Ant Design 全家桶的官网,首页的 Ba ...
在vue里使用Lottie动画（实现 json 格式的动画）
一.Lottie简介与作用 Lottie是一个库,可以解析使用AE制作的动画(需要用bodymovin导出为json格式),支持web.ios.android和react native.在前端使用,l ...
记一次在Taro开发的微信小程序中使用lottie动画的经验
前景提要最近在做公司项目的时候,看到移动端开发用的小图标有动态效果,非常好玩了解到是使用lottie进行实现的,这个东西以前有看到过对应的插件库,但是一直没有时间做研究,趁着这个五一就抽一天时间,去 ...
Jetpack Compose 中使用 Lottie 动画
从事 Android 开发的都知道 airbnb 的 Lottie 库,如今它也支持在 Jetpack Compose 中使用了. http://airbnb.io/lottie/#/android ...

在VUE中使用Lottie动画

在VUE中使用Lottie动画相关推荐

最新文章

热门文章