动画道路上的新宠 -- 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-cli

vue 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>
      <input
        type="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…