type
status
date
slug
summary
tags
category
icon
password
项目简介
最近在维护一个原有的视频合成项目，还算比较有意思，就记录下来（公司项目，不贴代码）; 功能大致如下：给定几张图片，选择图片缓动特效，然后生成视频；
实现方式
- 设计缓动特效函数，按照一定时间间隔在canvas上进行绘制；
- 在固定时间间隔对canvas进行截图操作；
- 使用之前的所有截图调用FFmpeg进行视频合成；
用户操作流程
- 选择音频、特效；
- 选择一定张数的图片；
- 点击生成，此时会生成一个
array<object>类型的json数据；
代码执行过程
- 首先是代码初始化，分为以下几步：
- 根据每张图片的宽高比计算出用于渲染的宽、高，上、左偏移值；
- 配置每张图片的缓动函数、需要的steps数以及在哪一个step开始；
- 最终也会配置所有图片的总步骤数(步骤取决于总运动时长以及帧率)；
- 初始化完成后开始绘制图片，绘制的具体逻辑如下：
- 判断当前步骤是否为最后一步，如果是，则标记为已完成，否则就继续执行；
- 然后开始循环渲染所有图片，渲染每一帧图片的具体逻辑如下：
- 判断当前图片是否应该开始并且为结束，如果是，则进行渲染，否则就执行下一个；
- 获取图片对应的缓动函数，如果是第一步，则计算缓动的初始状态，否则就进行下一步；
- 渲染当前步骤对应的效果，然后把当前step+1；
- 然后判断当前图片是否已经渲染完成，如果完成，则强制更新并重置状态，否则什么也不做；
- 每渲染完成一张图片就把总的step+1；
- 在指定1000/FPS的时间间隔下保存图片到本地；
- 等绘制完最后一步后，调用FFmpeg进行视频合成；
tips
未完待续（never）