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

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

[[413844]]

前言

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

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

正文

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

首先我们拆解一下功能:

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

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

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

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

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

1.1 开发图形编辑区

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

  1. <div className={styles.editorArea}> 
  2.   <div className={styles.formItem}> 
  3.     <span className={styles.label}>文字: </span> 
  4.     <Input value={value['text']} placeholder="请输入文本内容" onChange={(e) => onChange('text', e)} /> 
  5.   </div> 
  6.   <div className={styles.formItem}> 
  7.     <span className={styles.label}>大小: </span> 
  8.     <InputNumber value={value['fontSize']} placeholder="请输入文本大小" onChange={(e) => onChange('fontSize', e)} /> 
  9.   </div> 
  10.   <div className={styles.formItem}> 
  11.     <span className={styles.label}>文字颜色: </span> 
  12.     <Color value={value['textColor'][0]} onChange={(e) => onChange('textColor', e, 1)} /> 
  13.     <Color value={value['textColor'][1]} onChange={(e) => onChange('textColor', e, 2)} /> 
  14.   </div> 
  15.   <div className={styles.formItem}> 
  16.     <span className={styles.label}>背景色: </span> 
  17.     <Color value={value['themeColor']} onChange={(e) => onChange('themeColor', e)} /> 
  18.   </div> 
  19.   <div className={styles.formItem}> 
  20.     <span className={styles.label}></span> 
  21.     <Button type="primary" onClick={generateGif}>导出Gif</Button> 
  22.     {/* <Button style={{marginLeft: '20px'}} onClick={reset}>重置</Button> */} 
  23.   </div> 
  24. </div> 

 

 

 

 

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

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

1.2 实现预览区

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

  1. import React, { useRef, useEffect } from 'react' 
  2. import './index.less' 
  3.  
  4. export default function Blink(props) { 
  5.   const {  
  6.     text = '趣谈前端'
  7.     fontSize = '48px'
  8.     themeColor = '#000'
  9.     textColor = ['#74fcfd''#ea3448'], 
  10.     onRef 
  11.   } = props 
  12.  
  13.   const ref = useRef(null
  14.  
  15.   useEffect(() => { 
  16.     onRef && onRef(ref) 
  17.   }, []) 
  18.  
  19.   return ( 
  20.     <div className='blink' style={{backgroundColor: themeColor}} ref={ref}> 
  21.       <div className="blink-item" data-text={text} style={{fontSize: fontSize}}> 
  22.         <div className="text text-front" style={{color: textColor[0]}}>{text}</div> 
  23.         <div className="text text-back" style={{color: textColor[1]}}>{text}</div> 
  24.       </div> 
  25.     </div>  
  26.   ) 

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

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

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

1.3 实现预览gif动图

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

图中我们涉及到了几个有意思的插件, 笔者在H5-Dooring项目中也用到过,分别为:

  • dom-to-image —— 转门将dom转化为图片的库
  • gif.js —— 将多张图片转化为gif动图

实现过程中由于dom-to-image产生图片的过程是异步的, 但是我们要将所以图片生成完之后才能传给gif.js, 这里笔者用了promise.all;来实现(注意, 考点). 我们先将第一步骤二次封装成新的promise对象, 代码如下:

  1. const generateImg = (node, imgId, time) => { 
  2.     return new Promise((resolve, reject) => { 
  3.       setTimeout(() => { 
  4.         domtoimage.toPng(node) 
  5.         .then(function (dataUrl) { 
  6.           let img = new Image(); 
  7.           img.src = dataUrl; 
  8.           img.id = imgId; 
  9.           img.className = 'imgPiece'
  10.           document.getElementById('imgBox').appendChild(img); 
  11.           resolve(document.getElementById(imgId)); 
  12.         }) 
  13.         .catch(function (error) { 
  14.           reject(error); 
  15.         }); 
  16.       }, time
  17.     }) 
  18.  } 

其次我们使用promise.all来将图片统一收集传给gif.js对象:

  1. const generateGif = () => { 
  2.     document.getElementById('imgBox').innerHTML = ''
  3.     let blink = blinkRef.current
  4.     let promiseArr = []; 
  5.  
  6.     for(let i=0, len=24; i < len; i++) { 
  7.       promiseArr.push(generateImg(blink, `img${i+1}`, 16 * i)); 
  8.     } 
  9.  
  10.     Promise.all(promiseArr).then(res => { 
  11.       if(res) { 
  12.         let w = res[0].width; 
  13.         let h = res[0].height; 
  14.          // res即为所有的img集合, 可以直接传给gif.js ... 
  15.         }); 
  16.       } 
  17.     }) 
  18.   } 

关于gif.js的使用方法, 官网里也有详细的介绍, 这里笔者不一一举例了, 感兴趣的朋友可以研究一下.

1.4 一键下载gif动图

实现现在gif文件我们采用file-saver模块来实现, 实现思路也很简单, 如下:

  1. saveAs(image, `${uuid(6, 10)}.gif`); 

image即是gif.js或者其他动图插件生成的gif图片, uuid主要是给图片命名. 我们可以看看几个下载好的gif例子:

[[413849]]

最后

在H5编辑器H5-Dooring中,后期也会实现类似的功能,大家感兴趣的可以了解一下。

github:H5编辑器H5-Dooring

github:Blink

本文转载自微信公众号「趣谈前端」,可以通过以下二维码关注。转载本文请联系趣谈前端公众号。

 

责任编辑:武晓燕 来源: 趣谈前端
相关推荐

2022-08-26 08:01:38

DashWebJavaScrip

2022-02-14 09:11:17

视频下载器抖音

2022-10-19 14:30:59

2023-03-22 09:00:38

2021-06-22 10:43:03

Webpack loader plugin

2022-09-22 12:38:46

antd form组件代码

2019-08-26 09:25:23

RedisJavaLinux

2022-06-28 15:29:56

Python编程语言计时器

2020-12-14 08:05:28

Javascript随机canvas

2020-12-23 09:48:37

数据工具技术

2018-11-22 09:17:21

消息推送系统

2021-08-31 10:02:10

KubernetesLinux集群

2016-11-01 09:46:04

2011-01-10 14:41:26

2011-05-03 15:59:00

黑盒打印机

2021-07-14 09:00:00

JavaFX开发应用

2023-11-28 07:36:41

Shell脚本部署

2021-11-10 11:40:42

数据加解密算法

2022-10-19 08:01:17

Gif动图前端

2019-10-29 15:46:07

区块链区块链技术
点赞
收藏

51CTO技术栈公众号