ビブラトスタイルのアニメーションを生成できるgif制作プラットフォームの作り方を教えてください

序文

毎週のまとめです。前回のオープンソースプロジェクトの瞬きに基づいて、オンラインでフォールトアートを設定し、ワンクリックでgifアニメーションを生成できるプラットフォームを開発しました。ここでは一時的にQTという名前を付けています。次にレビューします。視覚化プラットフォームの実装手順と機能ポイントにより、誰もが独自のGifアニメーション生成プラットフォームを作成できます。

オンラインアクセスアドレス：Funtu-ビブラトスタイルの動的効果を生成するための軽量オンラインツール

テキスト

テキストを開始する前に、使用効果の図を見てみましょう。

まず、関数を分解します。

グラフィック編集エリア-アニメーションスタイル、質問テキストなどを編集するために使用されます。
プレビューエリア-ユーザーが設定したアニメーション効果をリアルタイムでプレビューするために使用します
結果表示領域-生成されたgif効果を保存するために使用されます
gifファイルの自動ダウンロード

実装する必要のある機能を大まかに明確にした後、段階的に実装できます。

ここで背景を簡単に紹介します。作成者がカスタムフォールトアートを生成するコンポーネントライブラリBlinkをオープンソース化した後、フォールトアニメーションをサードパーティのプラットフォームに配置する場合は、サードパーティの画面記録ソフトウェアを使用して開始する必要があることがわかりました。写真が記録され、gifが保存され、サードパーティのプラットフォームに送信されます。操作リンクは次のとおりです。

作者はそれほど多くのステップに耐えることができません。一般的に、作者の認識では、単純なことを達成するのに3ステップ以上かかります。作者はそれを受け入れることができません。特に、画面を記録するという時間のかかる作業です。したがって、よく考えてみるか、自分で決めてください。プラットフォームを開発し、ステップを2つのステップに圧縮します。では、以下の技術的な調査を始めましょう。

1.1グラフィック編集領域の開発

グラフィック編集領域は主にフォーム編集用です。ここでは、antdを使用して簡単なフォームをすばやく作成します。注目に値するのはカラーコンポーネントだけです。vue3.0はjsxをより適切にサポートするため、ここではreact-colorを使用します。 Reactは非常に似ているので、ここでは例として直接reactを使用します。コードは次のとおりです。

<div className={styles.editorArea}>
  <div className={styles.formItem}>
    <span className={styles.label}>文字: </span>
    <Input value={value['text']} placeholder="请输入文本内容" onChange={(e) => onChange('text', e)} />
  </div>
  <div className={styles.formItem}>
    <span className={styles.label}>大小: </span>
    <InputNumber value={value['fontSize']} placeholder="请输入文本大小" 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}>导出Gif</Button>
    {/* <Button style={
    
    {marginLeft: '20px'}} onClick={reset}>重置</Button> */}
  </div>
</div>

コードの詳細にあまり注意を払う必要はありません。使い慣れた方法で開発できます。フォームエディタは、主にプレビュー領域との相互通信を実現するためのものです。Reactでは、フックコンポーネントのuseStateを使用してBlinkコンポーネントと通信します。vueを使用する場合は、直接使用できます。データまたはvuexが問題を解決し、具体的な実装は次のとおりです。誰もがこのプロセスを実現できる限り、それで十分です。QT プロジェクトでの効果は次のとおりです。

1.2プレビューエリアを実現する

プレビュー領域の実装は非常に単純で、Blinkによって公開される属性を介して動的に送信できます。ここでは、Blinkの内部実装を理解する必要があります。まず、githugbアドレスに移動します。reactベースのCSSフォールトアートライブラリに基づいて、コンポーネントの実装を直接確認します。：

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で詳細に紹介しているので、ここでは詳しく説明しません。したがって、プロジェクトにプレビューを実装するのも非常に簡単で、コンポーネントを直接紹介するだけです。

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

値は、フォームの構成積です。

1.3プレビューgifアニメーションを実現する

gifアニメーションのプレビューを実現することが記事の焦点です。domを画像に変換してから、画像をgifに変換する方法を検討する必要があります。この著者はしばらく考えて、解決策を考え出しました。アイデアは次のとおりです。最初にキャンバスライブラリを使用します。タイミングを取るアニメーションプレビュー領域、nキーフレーム画像を生成し、次にキャンバスを使用して、複数のキーフレームをgif可動にアセンブルします。図は、採用された主なアイデアのキーフレームアニメーションフラッシュソフトウェアの作成者を達成します。 H5-Dooringプロジェクトでそれぞれ使用したいくつかの興味深いプラグインを使用しました。

dom-to-image-domを写真に変えるライブラリ
gif.js-複数の写真をgifアニメーションに変換します

実装プロセスでは、dom-to-imageによる画像の生成プロセスは非同期ですが、画像の生成後にすべての画像をgif.jsに送信する必要があります。ここではpromise.all;を使用して達成します（注、テストポイント）。最初に最初のステップを2回新しいpromiseオブジェクトにカプセル化します。コードは次のとおりです。

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を使用して画像を均一に収集し、gif.jsオブジェクトに送信します。

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 ...
        });
      }
    })
  }

gif.jsの使い方については、公式サイトにも詳しい紹介がありますので、一例一例は紹介しませんので、興味のある方はぜひ勉強してみてください。