撸一个可视化生成抖音风格的gif动图制作平台

前言

作者定期进行的周总结中介绍了QT，一款在线配置故障艺术并生成gif动图的平台，旨在降低用户制作Gif动图的难度。QT平台的在线访问地址为 http://h5.dooring.cn/qt。

正文

功能概述

QT平台包括图形编辑区、预览区和结果展示区，支持gif文件自动下载。作者为了避免繁琐的录屏步骤，决定自己开发一个平台，将生成Gif动图的步骤简化。

1.1 开发图形编辑区

图形编辑区通过antd搭建表单编辑，并使用react-color组件实现颜色选择。作者使用React的useState或Vue的data/vuex实现表单与预览区的数据同步。

1.2 实现预览区

预览区根据Blink组件的属性动态展示效果。Blink是一个基于React的css故障艺术库，用于生成动态文本效果。

1.3 实现预览gif动图

将预览动画转化为gif动图的过程涉及dom-to-image库转换DOM为图片，以及gif.js将多张图片生成gif。作者使用promise.all确保所有图片加载后再生成gif。

1.4 一键下载gif动图

作者采用file-saver模块实现gif动图的下载，通过uuid生成唯一文件名。

最后

作者欢迎更好的设计方法的反馈和交流，并回顾了往期的工作成果。

摘要： 本文是作者的周总结，主要分享了QT平台的介绍，它是一个可以在线配置和生成Gif动图的工具。QT平台功能包括图形编辑、预览和结果展示，并支持动图的自动下载。作者为了简化Gif制作流程，开发了这个平台，避免了繁琐的录屏步骤。在技术实现上，QT平台的图形编辑区采用了antd和react-color组件，预览区通过Blink组件实现动态效果。作者详细说明了如何将预览动画转换为gif动图，包括使用dom-to-image库和gif.js。此外，文章还介绍了如何通过file-saver模块实现一键下载功能。作者最后邀请反馈和讨论更好的设计方法，并简要回顾了以往的工作。