手把手教你撸一个能生成抖音风格动图的gif制作平台

前言

又到了一周一次的周总结, 笔者基于之前的开源项目 blink , 开发了一款能在线配置故障艺术, 并一键生成gif动图的平台, 这里暂时取名为QT. 接下来笔者将复盘一下该可视化平台的实现步骤以及功能点, 让大家都能做自己的Gif动图生成平台.

在线访问地址: 趣图——一款轻量级生成抖音风格动效的在线工具

正文

在开始正文之前, 我们先来看看使用效果图:

首先我们拆解一下功能:

图形编辑区 —— 用来编辑动图样式, 问文字等
预览区 —— 用来预览用户实时配置的动画效果
结果展示区 —— 用来存放生成的gif效果
gif文件自动下载

我们大致理清了我们需要实现的功能之后, 我们就可以一步步来实现了.

在这里我想先简单介绍一下背景: 在笔者之前开源了生成自定义故障艺术的组件库Blink之后, 发现如果要将故障动图放到第三方平台, 必须需要用第三方录屏软件先把动图录制下来, 然后保存gif之后在传到第三方平台, 这个操作链路如下:

笔者是在忍受不了那么多步骤, 一般在笔者的认知里一般实现一件简单的事情超过3个步骤, 笔者是不能接受的,尤其是录屏这种耗时任务. 所以再三思考还是决定自己开发一个平台,将步骤压缩到2步:

好了, 开始我们下面的技术探索.

1.1 开发图形编辑区

图形编辑区主要是表单编辑, 笔者这里使用antd来快速搭建一个简单表单, 唯一值得注意的就是颜色组件, 这里笔者使用react-color, 因为vue3.0对jsx支持越来越好, 所以实现原理和react很像,这里笔者就直接用react来举例子. 代码如下:

<divclassName={styles.editorArea}>
<divclassName={styles.formItem}>
<spanclassName={styles.label}>文字:</span>
<Inputvalue={value['text']}placeholder="请输入文本内容"onChange={(e)=>onChange('text',e)}/>
</div>
<divclassName={styles.formItem}>
<spanclassName={styles.label}>大小:</span>
<InputNumbervalue={value['fontSize']}placeholder="请输入文本大小"onChange={(e)=>onChange('fontSize',e)}/>
</div>
<divclassName={styles.formItem}>
<spanclassName={styles.label}>文字颜色:</span>
<Colorvalue={value['textColor'][0]}onChange={(e)=>onChange('textColor',e,1)}/>
<Colorvalue={value['textColor'][1]}onChange={(e)=>onChange('textColor',e,2)}/>
</div>
<divclassName={styles.formItem}>
<spanclassName={styles.label}>背景色:</span>
<Colorvalue={value['themeColor']}onChange={(e)=>onChange('themeColor',e)}/>
</div>
<divclassName={styles.formItem}>
<spanclassName={styles.label}></span>
<Buttontype="primary"onClick={generateGif}>导出Gif</Button>
{/*<Buttonstyle={{marginLeft:'20px'}}onClick={reset}>重置</Button>*/}
</div>
</div>

大家可以不用太关注代码细节, 你可以使用任何熟悉的方式去开发, 表单编辑器主要是实现和预览区域的互通, 在react里我们用hooks组件的useState来和Blink组件互通, vue的话可以直接用data或者vuex解决问题, 具体如下图实现:

只要大家能实现这种过程就可以了. 在QT项目里的效果如下:

1.2 实现预览区

预览区域的实现很简单, 通过Blink暴露的属性来动态传递即可, 这里我们有必要了解一下Blink的内部实现, 先上一下githugb地址: 基于react的css故障艺术库 , 我们直接看组件的实现方式:

importReact,{useRef,useEffect}from'react'
import'./index.less'
exportdefaultfunctionBlink(props){
const{
text='趣谈前端',
fontSize='48px',
themeColor='#000',
textColor=['#74fcfd','#ea3448'],
onRef
}=props
constref=useRef(null)
useEffect(()=>{
onRef&&onRef(ref)
},[])
return(
<divclassName='blink'style={{backgroundColor:themeColor}}ref={ref}>
<divclassName="blink-item"data-text={text}style={{fontSize:fontSize}}>
<divclassName="texttext-front"style={{color:textColor[0]}}>{text}</div>
<divclassName="texttext-back"style={{color:textColor[1]}}>{text}</div>
</div>
</div>
)
}

至于样式问题, 笔者在github里有详细的介绍, 这里就不详细说明了. 所以说我们在项目中实现预览也很简单, 直接引入组件即可:

<Blink{…value}onRef={(ref)=>{blinkRef.current=ref.current}}/>

value就是form表单的配置产物.

1.3 实现预览gif动图

实现预览gif动图是文章的重点, 我们要考虑如何将dom转化为图片, 然后再将图片转化为gif. 这块笔者思考了一会, 想出了一个解决方案, 思路如下: 先用canvas库定时截取预览区域的动画效果, 生成n张关键帧图片, 然后利用canvas将多张关键帧组装成gif动图. 笔者的思路主要采用的flash软件的关键帧动画的实现, 具体流程如下: