关于前端:更高效的web动效解决方案

To C 业务场景下的 Web 页面，常常会有炫酷简单的动效需要。在一个无限的我的项目排期下，抉择适合的动效解决方案：既能够合乎设计师的动效要求，又能够用起码的工夫实现工作，但往往对前端工程师来说是一个微小的挑战。

有的同学可能会问：Web 动画不就是用 CSS 写吗？transition、transfrom、animation、keyframes 这些 CSS 属性和用法，我烂熟于心。如果动画再简单点，那就持续用上 JavaScript 动画库，比方 Tween.js、Gsap、JQuery 的 animate 办法，等等。

确实，“CSS + JavaScript”曾经能够满足绝大部分的场景。然而，随着动效复杂度的回升，咱们须要手写的代码量也在剧增。而且，对于动画的细节出现，设计师往往比咱们有着更高的要求：当咱们耗时耗力手写完一个成果后，往往还要持续破费大量工夫和设计师进行沟通，以便对动画的细节进行调整。

上图的扭蛋机动画，如果是前端工程师手撸代码（CSS + JavaScript）来实现的话，弊病很显著：开发周期长。动画的各处细节须要和设计师沟通，例如设置静止速度的transition-timing-function、animation-timing-function 属性值，都须要设计师给出咱们具体的贝塞尔曲线，以保障动画播放的晦涩。

那有没有一种更高效的计划，让设计师制作完动画成果，咱们就能够拿来即用呢？

这就是本篇将要探讨的几种更高效的 web 动效计划。

最简略的计划，当然就是让设计师间接导出一张动图。

Gif

说到动图，咱们首先想到的必定是 Gif：

上图就是一张 Gif 动图，能够看见，十分不便就能播放动画了。

<!-- 间接 img 标签引入图片即可播放 -->
<img src="https://img.zcool.cn/community/01584659ccc891a801218e18e4097e.gif" />

长处：简略不便，兼容性好，反对通明。

毛病：

仅反对 8bit 的索引色，也就是说只有 256 个色彩，会呈现色彩失真，白边锯齿的状况，并且体积较大，不反对半透明。
只能循环播放，无奈精准管制动画。(能够通过 libgif-js 第三方库进行播放和暂停。)

Apng

APNG 是一种可动画 PNG 格局，也称为“动静 PNG”。须要留神的是，APNG 格局的图片，后缀名仍旧是.png。

上图就是一张 APNG 格局的动图。

<!-- 间接 img 标签引入图片即可播放 -->
<img src="https://www.zhangxinxu.com/study/202109/chip.png" />

长处：反对半透明，色彩还原度更高，且体积较小。

毛病：

兼容性相比 Gif 差点，浏览器如果不反对 APNG，则会以一般的 PNG 图片显示（静止在第一帧）。能够应用 apng-canvas 来兼容 APNG 的播放。
只能循环播放，然而能够通过 apng-js 转成 Canvas 绘制，来播放和暂停动画。

WebP

WebP 是一种由谷歌开发的古代图像格式，旨在提供更高的压缩率和更好的图像品质，同时放弃较小的文件大小。它还反对透明度和动画。

上图就是一张 WebP 格局的动图。

<!-- 间接 img 标签引入图片即可播放 -->
<img src="https://mathiasbynens.be/demo/animated-webp" />

长处：完满反对无损图像，等同品质下体积更小。

毛病：

兼容性相比 Gif 差点。
只能循环播放，然而能够通过 freezeframe.js 转成 Canvas 绘制，来播放和暂停动画。

设计师提供一系列的序列帧图片，前端通过间断循环切换这些图片，实现动画的播放。

实现帧动画的形式有很多，能够具体参考《CSS3 动画之逐帧动画》文章。

长处：自在管制播放、暂停、帧速率、动画时长。

毛病：动画帧率较高时须要申请大量的图片资源，弱网状态下可能导致动画卡顿。

通明背景 MP4
各大直播软件中的全屏礼物特效，业界有 VAP 和 YYEVA 计划：能够播放带通明背景的 MP4。但这些计划对于 web 的反对度不太敌对，只适宜在端内进行尝试。

非通明背景 MP4
因为一般的 MP4 格局的视频是带背景色的，因而全屏的背景动画比拟适宜此种计划。
设计师须要提供给咱们一个全屏的静音视频，PC 端倡议 19201080 尺寸，挪动端倡议 7501750 尺寸。

PC 端
PC 端对于视频自动播放限度不多，只须要默认静音即可：

<div class='video-container'>
  <video 
    autoplay 
    loop 
    muted 
    preload="auto"
    src='https://media-cdn-zspms.kurogame.com/pnswebsite/website2.0/video/1679328000000/c9s9mf24e3fotwqyqk-1679393034357.mp4'>
  </video>
</div>

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

挪动端
挪动端对于视频自动播放限度严格：

iOS 10+ 才开始反对视频自动播放，然而须要视频静音并且有 playsinline 属性。
Android 手机上不同的浏览器，对于 video 标签的解决不尽相同，很可能被原生控件拦挡。
因而倡议采纳 Canvas 绘制视频：业界曾经有了 jsmpeg 的成熟计划，反对 TS 格局，MPEG1 编码的视频播放。

jsmpeg 播放视频
首先咱们将设计师给咱们的 MP4 格局视频转码成 MPEG1 编码的 TS 格局。
能够通过网站 Convertio 进行转码（留神编解码器肯定要抉择 MPEG1）：

当然，咱们也能够通过 FFmpeg 自行转码：

# 应用 ffmpeg 命令行转换 mp4 至 ts (如果画质不行，能够自行调整画质 3000k 5000k)
ffmpeg -i soruce.mp4  -f mpegts -codec:v mpeg1video -an -b:v 3000k output.ts

# 应用 ffmpeg 命令行截图 poster 封面
ffmpeg -i soruce.mp4 -ss 00:00:00.000 -vframes 1 poster.png

失去了 TS 格局的视频后，前端通过 jsmpeg 即可进行播放：

<div class="video-container">
  <canvas class="canvas-view"></canvas>
</div>
<button id="btn1"> 暂停 </button>
<button id="btn2"> 播放 </button>
<button id="btn3"> 跳到 2s</button>

.canvas-view {width: 50%;}

const player = new JSMpeg.Player('./output.ts', {canvas: document.querySelector('.canvas-view'),
  autoplay: true,
  disableWebAssembly: true,
  onPlay(player){console.log('onPlay', player);
  },
});

const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');

btn1.addEventListener('click', () => {player.pause();
});

btn2.addEventListener('click', () => {player.play();
});

btn3.addEventListener('click', () => {player.currentTime = 2;});

实际效果，可点击 demo 查看 demo 地址。

长处：简直任何的动画成果都能实现。

毛病：

不带通明通道，须要全屏尺寸。
交互能力较弱，弱网状态下视频播放可能卡顿。

《代号·世界》官网中使用了大量的骨骼动画。

上图中人物衣服和头发的飘动，就是典型的骨骼动画。

Spine 和 DragonBones 是两款比拟常见的骨骼动画制作软件，在手游中被大量利用，同时它也反对在 web 端播放。

DragonBones 因为不再保护（白鹭科技已开张），所以不倡议新我的项目应用。
Spine 动画，则通过 pixi-spine，就能够很容易地集成进 web 我的项目里。

Live2D 是一种利用于电子游戏的绘图渲染技术，由日本 Cybernoids 公司开发。和 Spine 相似，也能够制作动作细腻的人物动效。手游中的角色立绘就常常应用 Live2d 制作。同时，虚构主播的二次元模型也经常应用该技术。

上图中，人物随着鼠标的挪动，身材各处都在静止，就是应用的 Live2d 技术。

因为官网的 web sdk 比拟难用，这里举荐应用第三方的 pixi-live2d-display 进行我的项目集成

官网：https://svga.io/intro.html

SVGA 是 YY 直播团队开源的一种跨平台的动画格局，同时兼容 iOS / Android / Web。动画设计师专一动画设计，通过工具输入 svga 动画文件，提供给开发工程师在集成 svga player 之后间接应用。

个别用在直播间的礼物特效。

通过官网的 Web-Player 即可在 web 端播放。

官网：http://airbnb.io/lottie

Airbnb 开源的可利用于 Android、iOS、Web、React Native 和 Windows 动画库，实质上是一套跨平台的动画解决方案。
通过 AE 的 Bodymovin 插件将设计师做的动画导出成一套定义好的 JSON 文件，之后再通过 Lottie 各端的库就能够实现动画成果，动画还原度 100%。

结尾介绍的扭蛋机动画，正是应用 Lottie 实现的。

SVGA 与 Lottie 最实质的区别在于代码对动画过程记录的形式，Lottie 基本上是依照咱们在 AE 当中的关键帧及缓动的联合模式去记录动画，而 SVGA 则是通过记录咱们每一个图层每一个工夫上的动画状态，从而省去对缓动值的计算。

因而能够把 Lottie 看成是补间动画，SVGA 看成是帧动画。

最初，咱们也能够应用 Oasis、Cocos、Unity 等更业余的游戏引擎，为我的项目提供更实在的物理成果。

本文次要介绍了几种高效的动效解决方案，旨在解放前端工程师在动效还原上的开发工夫和效率，让更业余的人做更业余的事：

动效设计师负责动效的实现和输入
前端工程师负责动效的播放和交互

本系列教程专门介绍 Lottie 的应用办法和高级技巧，后续的篇章将会率领大家进入 Lottie 的学习之旅。

夏日花火，谈谈挪动端背景视频实现
前端动效解说与实战
【得物技术】web 端动效计划比照

关于前端:更高效的web动效解决方案

Gif / APNG / WebP

帧动画

Video 视频

骨骼动画

Live2d

SVGA

Lottie

游戏引擎

总结

参考