动画相关

Yang大约 2 分钟

Lottie

本文文档出处：【lottie 动画】open in new window
lottie-web 一个适用于 Web，Android，iOS，React Native 和 Windows 的移动库
可以使用 Bodymovin 解析以 JSON 格式导出的 Adobe After Effects 动画，并在本地进行渲染
【官方文档】open in new window 【GitHub】open in new window

安装

通过一个叫 Bodymovin 的开源 After Effects 插件，以 JSON 文件的形式进行输出，Lottie 通过 JSON 格式下载动画数据并实时提供给开发者

bodymovin 插件下载安装
安装并解压 bodymovin
打开 AE，添加 bodymovin 扩展
导出 data.json 文件，动画的数据文件详细可参考：【AE 插件 Bodymovin.zxp 的安装与使用】open in new window

使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/lottie.min.js"></script>
    <style>
      #animation {
        height: 680px;
        position: absolute;
        width: 1920px;
        left: 50%;
        top: 0px;
        margin-left: -960px;
      }
    </style>
  </head>

  <body>
    <div class="banner">
      <div id="animation"></div>
    </div>
    <button id="play">播放</button>
    <button id="stop">停止</button>
    <button id="pause">暂停</button>
    <script>
      $(function () {
        var animation = lottie.loadAnimation({
          container: document.getElementById('animation'), // 动画容器
          renderer: 'svg', //渲染格式
          loop: true, //循环播放
          autoplay: true, //自动播放
          path: '/data/bannerData.json' // 动画 JSON 路径
        })

        // 开始播放
        $('#play').click(function () {
          animation.play()
        })

        // 暂停播放，停在当前帧
        $('#pause').click(function () {
          bodymovin.pause()
        })

        // 停止播放，回到第 0 帧
        $('#stop').click(function () {
          animation.stop()
        })

        /**
         * 事件监听
         * 动画结束：onComplete
         * 当前循环结束：onLoopComplete
         */
        animation.onComplete = function () {} 
        animation.onLoopComplete = function () {} // 当前循环结束
        
        // 使用addEventListener方式
        // animation.addEventListener('complete', function () {})
        // animation.addEventListener('loopComplete', function () {})
      })
    </script>
  </body>
</html>

优点

动画由设计使用专业的动画制作工具Adobe After Effects来实现，使动画实现更加方便，动画效果也更好
前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量
设计制作动画，前端展现动画，专业人做专业事，分工合理
卖家秀即买家秀，还原程度百分之百
使用lottie方案，json文件大小会比gif文件小很多，性能也会更好

缺点

lottie-web 文件本身仍然比较大，lottie.js 大小为 513k，轻量版压缩后也有 144k，经过 gzip 后，大小为 39k。所以，需要注意 lottie-web的加载。目前 H5 项目有离线包，PC 项目也会上 PWA，会对其进行缓存，保证加载速度
lottie 动画其实可以理解为 svg动画/canvas动画，不能给已存在的 html 添加动画效果
动画 json文件的导出，目前是将AE里面的参数一一导出成 json 内容，如果设计师建了很多的图层，可能仍然有json文件比较大（20kb）的问题。需要设计师遵循一定的规范
有很少量的AE动画效果，lottie无法实现，有些是因为性能问题，有些是没有做。比如：描边动画等