canvas动画科技园_使用 canvas 实现精灵动画

在最近项目中需要实现一个精灵动画，素材方只提供了一个短视频素材，所以在实现精灵动画之前先介绍两个工具来帮助我们更好的实现需求。在这篇文章中，主要是介绍两个命令行工具来实现将一个短视频文件转化成一张 sprite 图片与如何使用 canvas 绘制精灵动画

两个工具官方地址如下：

1、ffmpeg 视频转图片工具

ffmpeg 是「一个完整的跨平台解决方案，用于记录，转换和流式传输音频和视频的工具」，它的作用原不止于这篇文章中所介绍的，有兴趣的同学可以自己去官方网站了解更多。

将视频转成图片输出

基本用法

./ffmpeg -i jellyfish.mp4 -vf scale=138:-1 -r 8 %04d.png

-i 视频流输入 URL

-vf 创建由过滤器指定的过滤器，并使用它过滤流，过滤器是要应用于流的过滤器的描述，并且必须具有相同类型流的单个输入和单个输出。对应的过滤器参数必须跟在这个之后，不然无法生效

scale 视频缩放，scale=width:height 其中，如果 height=-1 ，则表示自适应高度，按照视频的宽高比输出,后面紧接这 scale=width:height,setar=16:9 则可以指定输出宽高比

-r 视频输出 fps 值, 值越大，则以越高的 fps 切片视频，别名 -framerate，比如我们想以 60fps 去裁剪视频导出图片，则使用 -r 60

-aspect 视频输出宽高比，比如常用的 4:3、16:9 都是规范的参数用法

-ss 裁剪开始位置，表示从视频的某个时间开始裁剪，是