Lottie了解

github: https://github.com/airbnb/lottie-android
文档：http://airbnb.io/lottie/#/web

2020.7.13 星期一 23:49

LottieFiles：www.lottiefiles.com/
Lottie-editor：https://github.com/sonaye/lottie-editor

对ue老师的要求也是有的。包括性能/文件大小优化，性能支持/复杂度实现。
有的特效放到工程中可能不生效，需要其它方式来实现。

前端/web使用

多种引入方式

var animation = lottie.loadAnimation({
    container: element,
    renderer: 'svg', // svg,canvas,html
    loop: true,
    autoplay: ture,
    animationData: 'wave.json',
    path: '', // json文件路径
})

实例多个api可以调用：play,stop,pause,setSpeed,goToAndPlay,…,destroy
多事件监听/回调

实际/vue

import lottie from 'lottie-web'
import animationData from '../assets/lottie/wave.json' // 直播条动效数据
<script>
  {
    data() {
      return {
        lottieOptions: {
          loop: true,
          autoplay: true,
          animationData: animationData,
          assetsPath: 'https://activity.xueersi.com/topic/growth/lottie/scholarShip/images/'
        },
      }
    }
  }

</script>

背景

以往方案

前端实现svg动画（实现成本较高、维护成本高、容易有买家秀/卖家秀区别、客户端不能复用）；
设计师切gif（文件较大、容易有锯齿）；
png序列帧（文件较大、容易有锯齿）；

帧动画的缺点和局限性比较明显，合成的雪碧图文件大，且在不同屏幕分辨率下可能会失真。

lottie

Lottie的缺点在于若在AE动画制作的过程不注意规范，会导致数据文件大、耗内存和性能的问题；
Lottie-web的官方文档不够详尽，例如assetsPath参数是在看源码的时候发现的；
开放的API不够齐全，无法很灵活地控制动画层。

而优点也很明显，Lottie能帮助提高开发效率，精简代码，易于调试和维护；资源文件小，输出动画效果保真；跨平台——Android, iOS, Web和Windows通用。

总的来说，Lottie的引用可以替代传统的GIF和帧动画，灵活利用好提供的属性和方法可以控制动画的播放，但需注意规范设计和开发的流程，才可以更高效地完成动画的制作与调试。

原理

Lottie动画Json结构分为4层：

结构层：可以读取到动画画布的宽高，帧数，背景色，时间，起始关键帧，结束帧等信息。
asset：图片资源信息集合，这里放置的是制作动画时引用的图片资源。
layers：图层集合，这里可以获取到多少图层，每个图层的开始帧结束帧等。
shapes：元素集合，可以获取到每个图层都包含多个动画元素。

3.2 Lottie 分层渲染原理

ui/ue

4.1 下载安装 After Effects
4.2 下载安装 Bodymovin

参考

00:00