手把手教你擼一個(gè)能生成抖音風(fēng)格動(dòng)圖的gif制作平臺(tái)

時(shí)間：2023-06-23 23:57:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-23 23:57:02 來源：網(wǎng)站運(yùn)營(yíng)

手把手教你擼一個(gè)能生成抖音風(fēng)格動(dòng)圖的gif制作平臺(tái)：

前言

又到了一周一次的周總結(jié), 筆者基于之前的開源項(xiàng)目 blink , 開發(fā)了一款能在線配置故障藝術(shù), 并一鍵生成gif動(dòng)圖的平臺(tái), 這里暫時(shí)取名為QT. 接下來筆者將復(fù)盤一下該可視化平臺(tái)的實(shí)現(xiàn)步驟以及功能點(diǎn), 讓大家都能做自己的Gif動(dòng)圖生成平臺(tái).

在線訪問地址: 趣圖——一款輕量級(jí)生成抖音風(fēng)格動(dòng)效的在線工具

正文

在開始正文之前, 我們先來看看使用效果圖:

首先我們拆解一下功能: 圖形編輯區(qū) —— 用來編輯動(dòng)圖樣式, 問文字等 預(yù)覽區(qū) —— 用來預(yù)覽用戶實(shí)時(shí)配置的動(dòng)畫效果 結(jié)果展示區(qū) —— 用來存放生成的gif效果 gif文件自動(dòng)下載

我們大致理清了我們需要實(shí)現(xiàn)的功能之后, 我們就可以一步步來實(shí)現(xiàn)了.

在這里我想先簡(jiǎn)單介紹一下背景: 在筆者之前開源了生成自定義故障藝術(shù)的組件庫Blink之后, 發(fā)現(xiàn)如果要將故障動(dòng)圖放到第三方平臺(tái), 必須需要用第三方錄屏軟件先把動(dòng)圖錄制下來, 然后保存gif之后在傳到第三方平臺(tái), 這個(gè)操作鏈路如下:

筆者是在忍受不了那么多步驟, 一般在筆者的認(rèn)知里一般實(shí)現(xiàn)一件簡(jiǎn)單的事情超過3個(gè)步驟, 筆者是不能接受的,尤其是錄屏這種耗時(shí)任務(wù). 所以再三思考還是決定自己開發(fā)一個(gè)平臺(tái),將步驟壓縮到2步:

好了, 開始我們下面的技術(shù)探索.

1.1 開發(fā)圖形編輯區(qū)

圖形編輯區(qū)主要是表單編輯, 筆者這里使用antd來快速搭建一個(gè)簡(jiǎn)單表單, 唯一值得注意的就是顏色組件, 這里筆者使用react-color, 因?yàn)関ue3.0對(duì)jsx支持越來越好, 所以實(shí)現(xiàn)原理和react很像,這里筆者就直接用react來舉例子. 代碼如下:

<div className={styles.editorArea}> <div className={styles.formItem}> <span className={styles.label}>文字: </span> <Input value={value['text']} placeholder="請(qǐng)輸入文本內(nèi)容" onChange={(e) => onChange('text', e)} /> </div> <div className={styles.formItem}> <span className={styles.label}>大小: </span> <InputNumber value={value['fontSize']} placeholder="請(qǐng)輸入文本大小" onChange={(e) => onChange('fontSize', e)} /> </div> <div className={styles.formItem}> <span className={styles.label}>文字顏色: </span> <Color value={value['textColor'][0]} onChange={(e) => onChange('textColor', e, 1)} /> <Color value={value['textColor'][1]} onChange={(e) => onChange('textColor', e, 2)} /> </div> <div className={styles.formItem}> <span className={styles.label}>背景色: </span> <Color value={value['themeColor']} onChange={(e) => onChange('themeColor', e)} /> </div> <div className={styles.formItem}> <span className={styles.label}></span> <Button type="primary" onClick={generateGif}>導(dǎo)出Gif</Button> {/* <Button style={{marginLeft: '20px'}} onClick={reset}>重置</Button> */} </div></div>大家可以不用太關(guān)注代碼細(xì)節(jié), 你可以使用任何熟悉的方式去開發(fā), 表單編輯器主要是實(shí)現(xiàn)和預(yù)覽區(qū)域的互通, 在react里我們用hooks組件的useState來和Blink組件互通, vue的話可以直接用data或者vuex解決問題, 具體如下圖實(shí)現(xiàn):

只要大家能實(shí)現(xiàn)這種過程就可以了. 在QT項(xiàng)目里的效果如下:

1.2 實(shí)現(xiàn)預(yù)覽區(qū)

預(yù)覽區(qū)域的實(shí)現(xiàn)很簡(jiǎn)單, 通過Blink暴露的屬性來動(dòng)態(tài)傳遞即可, 這里我們有必要了解一下Blink的內(nèi)部實(shí)現(xiàn), 先上一下githugb地址: 基于react的css故障藝術(shù)庫 , 我們直接看組件的實(shí)現(xiàn)方式:

import React, { useRef, useEffect } from 'react'import './index.less'export default function Blink(props) { const { text = '趣談前端', fontSize = '48px', themeColor = '#000', textColor = ['#74fcfd', '#ea3448'], onRef } = props const ref = useRef(null) useEffect(() => { onRef && onRef(ref) }, []) return ( <div className='blink' style={{backgroundColor: themeColor}} ref={ref}> <div className="blink-item" data-text={text} style={{fontSize: fontSize}}> <div className="text text-front" style={{color: textColor[0]}}>{text}</div> <div className="text text-back" style={{color: textColor[1]}}>{text}</div> </div> </div> )}至于樣式問題, 筆者在github里有詳細(xì)的介紹, 這里就不詳細(xì)說明了. 所以說我們?cè)陧?xiàng)目中實(shí)現(xiàn)預(yù)覽也很簡(jiǎn)單, 直接引入組件即可:

<Blink {...value} onRef={(ref) => { blinkRef.current = ref.current}} />value就是form表單的配置產(chǎn)物.

1.3 實(shí)現(xiàn)預(yù)覽gif動(dòng)圖

實(shí)現(xiàn)預(yù)覽gif動(dòng)圖是文章的重點(diǎn), 我們要考慮如何將dom轉(zhuǎn)化為圖片, 然后再將圖片轉(zhuǎn)化為gif. 這塊筆者思考了一會(huì), 想出了一個(gè)解決方案, 思路如下: 先用canvas庫定時(shí)截取預(yù)覽區(qū)域的動(dòng)畫效果, 生成n張關(guān)鍵幀圖片, 然后利用canvas將多張關(guān)鍵幀組裝成gif動(dòng)圖. 筆者的思路主要采用的flash軟件的關(guān)鍵幀動(dòng)畫的實(shí)現(xiàn), 具體流程如下:

圖中我們涉及到了幾個(gè)有意思的插件, 筆者在H5-Dooring項(xiàng)目中也用到過,分別為: dom-to-image —— 轉(zhuǎn)門將dom轉(zhuǎn)化為圖片的庫 gif.js —— 將多張圖片轉(zhuǎn)化為gif動(dòng)圖

實(shí)現(xiàn)過程中由于dom-to-image產(chǎn)生圖片的過程是異步的, 但是我們要將所以圖片生成完之后才能傳給gif.js, 這里筆者用了promise.all;來實(shí)現(xiàn)(注意, 考點(diǎn)). 我們先將第一步驟二次封裝成新的promise對(duì)象, 代碼如下:

const generateImg = (node, imgId, time) => { return new Promise((resolve, reject) => { setTimeout(() => { domtoimage.toPng(node) .then(function (dataUrl) { let img = new Image(); img.src = dataUrl; img.id = imgId; img.className = 'imgPiece'; document.getElementById('imgBox').appendChild(img); resolve(document.getElementById(imgId)); }) .catch(function (error) { reject(error); }); }, time) }) }其次我們使用promise.all來將圖片統(tǒng)一收集傳給gif.js對(duì)象:

const generateGif = () => { document.getElementById('imgBox').innerHTML = ''; let blink = blinkRef.current; let promiseArr = []; for(let i=0, len=24; i < len; i++) { promiseArr.push(generateImg(blink, `img${i+1}`, 16 * i)); } Promise.all(promiseArr).then(res => { if(res) { let w = res[0].width; let h = res[0].height; // res即為所有的img集合, 可以直接傳給gif.js ... }); } }) }關(guān)于gif.js的使用方法, 官網(wǎng)里也有詳細(xì)的介紹, 這里筆者不一一舉例了, 感興趣的朋友可以研究一下.

1.4 一鍵下載gif動(dòng)圖

實(shí)現(xiàn)現(xiàn)在gif文件我們采用file-saver模塊來實(shí)現(xiàn), 實(shí)現(xiàn)思路也很簡(jiǎn)單, 如下:

saveAs(image, `${uuid(6, 10)}.gif`);image即是gif.js或者其他動(dòng)圖插件生成的gif圖片, uuid主要是給圖片命名. 大家可以親自在平臺(tái)體驗(yàn):

地址:

最后

在H5編輯器H5-Dooring中，后期也會(huì)實(shí)現(xiàn)類似的功能，大家感興趣的可以了解一下。

github地址：H5編輯器H5-Dooring

如果想學(xué)習(xí)更多H5游戲, webpack，node，gulp，css3，javascript，nodeJS，canvas數(shù)據(jù)可視化等前端知識(shí)和實(shí)戰(zhàn)，歡迎在《趣談前端》一起學(xué)習(xí)討論，共同探索前端的邊界。