日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎ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).

為獻(xiàn)縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及獻(xiàn)縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)、獻(xiàn)縣網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

在線訪問地址: 趣圖——一款輕量級(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來舉例子. 代碼如下:

   
 
 
 
    
    
  
  
  
  1.  
    2. 
    
  
  
  
  2.    
    3. 
    
  
  
  
  3.     文字:  
    4. 
    
  
  
  
  4.      onChange('text', e)} /> 
    5. 
    
  
  
  
  5.   
 
  •    
  •     大小:  
  •      onChange('fontSize', e)} /> 
  •   
    •  
  •    
  •     文字顏色:  
  •      onChange('textColor', e, 1)} /> 
  •      onChange('textColor', e, 2)} /> 
  •   
    •  
  •    
  •     背景色:  
  •      onChange('themeColor', e)} /> 
  •   
    •  
  •    
  •      
  •     導(dǎo)出Gif 
  •     {/* 重置 */} 
  •   
    •  
  •  

    大家可以不用太關(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)方式:

     
 
 
 
      
  
  
  
  
    1. import React, { useRef, useEffect } from 'react' 
      2. 
  
  
  
  
    2. import './index.less' 
      3. 
  
  
  
  
    3.  
      4. 
  
  
  
  
    4. export default function Blink(props) { 
      5. 
  
  
  
  
    5.   const {  
      6. 
  
  
  
  
    6.     text = '趣談前端', 
      7. 
  
  
  
  
    7.     fontSize = '48px', 
      8. 
  
  
  
  
    8.     themeColor = '#000', 
      9. 
  
  
  
  
    9.     textColor = ['#74fcfd', '#ea3448'], 
      10. 
  
  
  
  
    10.     onRef 
      11. 
  
  
  
  
    11.   } = props 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.   const ref = useRef(null) 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.   useEffect(() => { 
      16. 
  
  
  
  
    16.     onRef && onRef(ref) 
      17. 
  
  
  
  
    17.   }, []) 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.   return ( 
      20. 
  
  
  
  
    20.      
      21. 
  
  
  
  
    21.        
      22. 
  
  
  
  
    22.         {text}
     
  •         {text}
    •  
  •       
    •  
  •     
    •   
  •   ) 
  • } 

    • 至于樣式問題, 筆者在github里有詳細(xì)的介紹, 這里就不詳細(xì)說明了. 所以說我們?cè)陧?xiàng)目中實(shí)現(xiàn)預(yù)覽也很簡(jiǎn)單, 直接引入組件即可:

     
 
 
 
      
  
  
  
  
    1.  { blinkRef.current = ref.current}} /> 
      2.

    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)目中也用到過,分別為:

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

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

    其次我們使用promise.all來將圖片統(tǒng)一收集傳給gif.js對(duì)象:

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

    關(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)單, 如下:

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

    image即是gif.js或者其他動(dòng)圖插件生成的gif圖片, uuid主要是給圖片命名. 我們可以看看幾個(gè)下載好的gif例子:

    最后

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

    github：H5編輯器H5-Dooring

    github：Blink

    本文轉(zhuǎn)載自微信公眾號(hào)「趣談前端」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系趣談前端公眾號(hào)。


    網(wǎng)頁標(biāo)題：手把手教你擼一個(gè)能生成抖音風(fēng)格動(dòng)圖的gif制作平臺(tái)
    標(biāo)題來源：http://www.5511xx.com/article/copocie.html

    其他資訊