动画道路上的新宠 -- Lottie

能够成为新宠，必定是有他自己的独特之处，那么lottie到底是什么呢？

在没有接触lottie之前，要想做一个很炫酷的动画效果要经过很复杂的计算，嗯，对于不善于这种高难度的计算的我来说，很是具有挑战性啊，不过从今以后，制作一个动画就很容易啦

1. lottie 简介

Lottie是一个iOS，Android和React Native库，可以实时渲染After Effects动画，并且允许本地app像静态资源那样轻松地使用动画。Lottie使用名为Bodymovin的开源After Effects的扩展程序导出的JSON文件格式的动画数据。简单来说就是利用一个json格式的动画数据来渲染到页面上，就是这么简单，官方文档上就有很多的小demo，比如?

2. lottie 能帮到我们吗？

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

然后，开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。
这样就可以高效的实现很多复杂动画效果啦

是不是看着就很有技术含量，不要急，下面我们也来做一个

3. lottie 实例

• 第一步 安装vue-cli 搭建一个基本的vue实例

npm install -g vue-clivue init webpack test   // 构建一个名为test的文件

• 第二步 安装vue-lottie

npm install --save vue-lottie

• 第三步 引入到你的文件中，当然你也可以全局引入

import Lottie from 'vue-lottie' 

• 第四步 引入json文件

这一步很是关键，他决定了你动画的成败，在做练习的时候，你可以到下面这个地方，也就是官网去找一个你喜欢的动画，然后下载下来

神奇世界的大门

像这样引入到你的文件中

import * as animationData from './assets/pumped_up.json'复制代码

• 第五步 开始做动画啦

    像引入canvas一样写入你的文件中

<lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>复制代码

  不同于canvas的是他要有自己的方法

data () {return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}},methods: {handleAnimation (anim) {this.anim = anim}}复制代码

如果你想要加上暂停键，开始键等这些就这样写?

<template><div id="app"><lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/><div><p>Speed: x{{animationSpeed}}</p><inputtype="range"value="1"min="0"max="3"step="0.5"v-on:change="onSpeedChange"v-model="animationSpeed"></div><button @click="stop">stop</button><button @click="pause">pause</button><button @click="play">play</button></div> </template> <script> import Lottie from 'vue-lottie' import * as animationData from './assets/pumped_up.json' export default {name: 'app',components: { 'lottie': Lottie },data () {return {defaultOptions: { animationData: animationData },animationSpeed: 1,anim: {}}},methods: {handleAnimation (anim) { this.anim = anim},// 停止动画stop () {this.anim.stop()},// 开始动画play: function () {this.anim.play()},// 暂停动画pause: function () {this.anim.pause()},// 动画速度onSpeedChange () {this.anim.setSpeed(this.animationSpeed)}}} </script>复制代码

好了，到了看效果的时候了?（我承认这个动图做得有点丑，但是相信我，运行的效果真的很赞?）

• 第六步  感谢欣赏

上面的案例是不是很简单呢，不知道这个新的分享有没有让你get到新世界的大门，反正我是领略到了，想要做更炫酷的效果可以自己细细的研究一下哦☺️

最后附上开源地址：

• Android: Android地址
• iOS： iOS地址
• React Native：React Native地址
  
• lottie-web地址：github.com/airbnb/lott…
  

转载于:https://juejin.im/post/5b7e74ce51882542a92ba0e9

总结

以上是生活随笔为你收集整理的动画道路上的新宠 -- Lottie的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。