用webm做动画效果

WEB上的动画主要有2种实现路径：

• 用css animation 或js实现。
  • 优点：省资源
  • 缺点：得靠程序员实现。效果也受语法能力限制。
• 用动图或者视频
  • 优点：有各种软件可以实现。
  • 缺点：可能体积大、耗资源。

这里采用第2种方式。选择有：

• GIF
• webm/webp
• apng
• svga

GIF颜色有限制，稍微时间长一点，体积也很大。首先PASS。

SVGA格式比较特殊，也先不考虑。

apng和webp： 没有找到很方便的工具，能从视频转apng和webp。也列为备选。

webm目前大多数浏览器是可以用的。

步骤如下：

1. 用视频编辑软件导出带alpha通道的mov文件,例如love.mov

2. 用ffmpeg把mov文件转为webm文件

   安装
   choco install ffmpeg
   转换
   ffmpeg -i love.mov -c:v libvpx -pix_fmt yuva420p -auto-alt-ref 0 love.webm
   

3. 放进网页里

<video  width="200" height="400" muted  autoplay="autoplay" preload="auto" id="v1" loop  src="./love.webm" type="video/webm"/>

最终效果如下: