lottie的android动画,Lottie&vue-lottie--更简单的动画实现方式

什么是Lottie

Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画，并生成json格式的文件。该json文件可以通过Lottie开源库在iOS,Android,macOS,React Native中进行解析生成动画效果。

下面是一些官网给出的动画效果：

为什么使用Lottie

一直以来我们的设计同学都是使用设计软件，设计动画效果，开发同学再通过代码来实现动效。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。

还有一种实现动画的方式就是gif图。然而Android并不支持gif图，而且gif图对于移动端还有占用过多空间的问题。

那么，Lottie为我们做了什么呢。

首先，设计同学在Adobe After Effects上设计了动画效果，通过bodymovin插件，可以将动画导出成一个json文件。

然后，开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。

这样就可以高效的实现很多复杂动画效果啦。

在vuejs中使用Lottie

对于现在十分流行的前端框架vuejs，当然有支持Lottie的组件。

vue-lottie是一个基于vuejs的动画效果实现组件。它基于lottie开源项目，可以将After Effects导出的json文件渲染成svg/canvas/html动画效果。

vue-lottie安装

通过NPM安装

npm install --save vue-lottie

vue-lottie使用

Speed: x{{animationSpeed}}

v-on:change="onSpeedChange" v-model="animationSpeed">

stop

pause

play

import Lottie from './lottie.vue';

import * as animationData from './assets/pinjump.json';

export default {

name: 'app',

components: {

'lottie': Lottie

},

data() {

return {

defaultOptions: {animationData: animationData},

animationSpeed: 1

}

},

methods: {

handleAnimation: function (anim) {

this.anim = anim;

},

stop: function () {

this.anim.stop();

},

play: function () {

this.anim.play();

},

pause: function () {

this.anim.pause();

},

onSpeedChange: function () {

this.anim.setSpeed(this.animationSpeed);

}

}

}

轮子工厂--一个分享优秀的vue,angular组件的网站