lottie

简介

Lottie适用于Android, iOS、 iOS、Web, React Native、[React Native](https://github.com/airbnb/lottie-react-native 和Windows

Lottie是Airbnb开源的一个用于Android, iOS, Web和Windows的库，解析Adobe After Effects动画导出为json与Bodymovin，并在移动和Web上原生渲染它们!

开始使用

npm install --save vue-lottie

第一种

main.js

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

将json文件引入项目中

vue

<template><div><lottie  :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/></div></template><script>
/*** When I wrote this code,Only God and I understood what I was doing.* Now,God only knows  !!!*/
import loading from '../assets/lottie/load'
export default {name: "lottie-demo",data() {return {defaultOptions: {animationData: loading},anim:{},};},methods: {handleAnimation: function (anim) {this.anim = anim;},},
}
</script><style lang="scss" scoped></style>

第二种

同样是将json文件引入项目中

不再在main.js中引用，直接在vue中引用

<template><div><lottie  :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/></div></template><script>
/*** When I wrote this code,Only God and I understood what I was doing.* Now,God only knows  !!!*/
import Lottie  from 'vue-lottie';
import loading from '../assets/lottie/load'
export default {name: "lottie-demo",components:{Lottie},data() {return {defaultOptions: {animationData: loading},anim:{},};},methods: {handleAnimation: function (anim) {this.anim = anim;},},
}
</script><style lang="scss" scoped></style>

效果

使用方法，可以控制动画

anim

anim.play()
anim.stop()
anim.pause()
anim.setSpeed(speed) – 播放速度，1 为正常速度。
anim.goToAndStop(value, isFrame) 跳转到某一时间（或帧）并停在那。第一个参数(value)是数值。第二个参数是布尔值，"true"则第一个参数表示“帧”，“false”则表示“时间”。
anim.goToAndPlay(value, isFrame) 跳转到某一时间（或帧）并播放。第一个参数(value)是数值。第二个参数是布尔值，"true"则第一个参数表示“帧”，“false”则表示“时间”。
anim.setDirection(direction)** – 播放方向，正数和0为正常播放，负数为倒放。
anim.playSegments(segments, forceFlag) – 播放指定段落。第一个参数是一个数组，形式为[(a,b),(c,d),(e,f)…]则播放第a帧到b帧，然后第c帧到d帧，e到f…… ，第二个参数为布尔值，“true”则立刻播放参数一中的片段，“false”则播放完当前动画后再开始播放片段。
anim.destroy()

bodymovin

bodymovin.play() – 播放指定动画，1个参数动画名。
bodymovin.stop() – 停止播放指定动画，1个参数动画名。
bodymovin.setSpeed() – 第一个参数设置动画速度 (1为正常速度），第二个参数动画名可选。
bodymovin.setDirection() – f播放方向，正数和0为正常播放，负数为倒放，第二个参数动画名可选。
bodymovin.searchAnimations() – 检测class值为"bodymovin"的元素。
bodymovin.loadAnimation() – 前面已有介绍，返回一个可单独控制的动画实例。
bodymovin.destroy() --销毁和释放资源。 DOM 元素将会被清空。
bodymovin.registerAnimation() – 你可以直接用registerAnimation来注册一个自定义元素，它必须包含"data-animation-path"属性并指向data.json的地址。
bodymovin.setQuality() – 画质设置，调整动画播放器性能。默认为高画质(high), 可选值为’high’、‘medium’、‘low’, 或者大于1的数字。对于有的动画这些设置差别不大。

vue-lottie控制动画的播放、暂停、跳转帧数相关推荐

U3D Animator 组件控制动画的播放暂停，动态添加帧事件
//顺便说一句,U3D的动画编辑器有BUG,添加关键帧事件后选了函数会说不支持,其实是可以用.运行下看结果来定吧. //大家好我是笨笨,笨笨的笨,笨笨的笨,谢谢! //20150810 by Jerr ...
CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{animation-play-state:paused;-webkit- ...
unity Timeline控制动画的播放
unity Timeline控制动画的播放创建一个空物体GameObject,添加Playable Director组件,添加脚本组件: 新建一个长方体: 创建timeline并将其拖到空物体的Pl ...
UE4(unreal engine4)蒙太奇动画删除不想要的帧数
UE4系列文章目录文章目录 UE4系列文章目录前言一.问题原因二.具体操作步骤前言 UE4(unreal engine4)蒙太奇动画删除不想要的帧数.当我们在UE4中导入一个fbx骨骼动画. ...
如何查看一个avi文件的播放帧率？和帧数
如何查看一个avi文件的播放帧率?和帧数右键属性,详细信息: 如何查看avi文件的帧数? 拖拽到imageJ中,在左上角就可以看到:
html音乐自动播放暂停js,JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现. 首先在网页中嵌入背景音乐,html5代码为: 通过audio的id即可控制音乐的播放(play())和暂停(pa ...
Service后台服务控制音乐的播放暂停和停止,播放完自动播放下一曲
//添加获得sd卡的状态权限,和读取sd卡的权限 <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FIL ...
使用as3控制动画的播放与暂停
1.需要两个按钮元件 2.在属性面板为两个按钮元件分别命名为pausebutton与playButton 3.代码 stop();pausebutton.visible = false; playBu ...
html让gif图片暂停,控制gif图片播放暂停插件-jquery.gif.js
插件描述:jquery.gif.js是一款可以对Gif图片进行预览和播放的jQuery插件. 效果预览: Gif图片预览和播放jQuery插件-jquery.gif.js 简要教程 jquery.gi ...

vue-lottie控制动画的播放、暂停、跳转帧数