av激情亚洲男人的天堂国语,日韩欧美精品一中文字幕,无码av一区二区三区无码,国产又色又爽又刺激的a片,国产又色又爽又刺激的a片

手把手教你擼一個能生成抖音風格動圖的gif制作平臺

前言

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

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

在線訪問地址: 趣圖——一款輕量級生成抖音風格動效的在線工具

正文

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

首先我們拆解一下功能:

  • 圖形編輯區(qū) —— 用來編輯動圖樣式, 問文字等
  • 預覽區(qū) —— 用來預覽用戶實時配置的動畫效果
  • 結(jié)果展示區(qū) —— 用來存放生成的gif效果
  • gif文件自動下載

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

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

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

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

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

圖形編輯區(qū)主要是表單編輯, 筆者這里使用antd來快速搭建一個簡單表單, 唯一值得注意的就是顏色組件, 這里筆者使用react-color, 因為vue3.0對jsx支持越來越好, 所以實現(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)} /> 
  •   
    •  
  •    
  •      
  •     導出Gif 
  •     {/* 重置 */} 
  •   
    •  
  •  

    • 大家可以不用太關(guān)注代碼細節(jié), 你可以使用任何熟悉的方式去開發(fā), 表單編輯器主要是實現(xiàn)和預覽區(qū)域的互通, 在react里我們用hooks組件的useState來和Blink組件互通, vue的話可以直接用data或者vuex解決問題, 具體如下圖實現(xiàn):

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

    1.2 實現(xiàn)預覽區(qū)

    預覽區(qū)域的實現(xiàn)很簡單, 通過Blink暴露的屬性來動態(tài)傳遞即可, 這里我們有必要了解一下Blink的內(nèi)部實現(xiàn), 先上一下githugb地址: 基于react的css故障藝術(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} 
      23. 
  
  
  
  
    23.         {text} 
      24. 
  
  
  
  
    24.        
      25. 
  
  
  
  
    25.       
      26. 
  
  
  
  
    26.   ) 
      27. 
  
  
  
  
    27. } 
      28.

    至于樣式問題, 筆者在github里有詳細的介紹, 這里就不詳細說明了. 所以說我們在項目中實現(xiàn)預覽也很簡單, 直接引入組件即可:

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

    value就是form表單的配置產(chǎn)物.

    1.3 實現(xiàn)預覽gif動圖

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

    圖中我們涉及到了幾個有意思的插件, 筆者在H5-Dooring項目中也用到過,分別為:

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

     
 
 
 
      
  
  
  
  
    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對象:

     
 
 
 
      
  
  
  
  
    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)里也有詳細的介紹, 這里筆者不一一舉例了, 感興趣的朋友可以研究一下.

    1.4 一鍵下載gif動圖

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

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

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

    最后

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

    github：H5編輯器H5-Dooring

    github：Blink

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


    文章名稱：手把手教你擼一個能生成抖音風格動圖的gif制作平臺
    網(wǎng)頁地址：http://uogjgqi.cn/article/copocie.html

    掃二維碼與項目經(jīng)理溝通

    我們在微信上24小時期待你的聲音

    解答本文疑問/技術(shù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

    其他資訊