面白いgifアニメーションプラットフォーム開発の開発（2）

素晴らしいレビュー

序文

著者は以前、空き時間にGIF生成プラットフォームを開発しましたが、前回の記事でも紹介した、ビブラトスタイルのGIFを生成できるgif生成プラットフォームを教えるための具体的な開発背景を紹介しました。今後も実装を続けていきます。このプラットフォームとgifアニメーションプラットフォームの実装はフロントエンド手段によって完全に実装されるため、次のコンテンツに多くの興味深いフロントエンドプラグインがあります。次に、実装される主な機能を見てみましょう。

純粋なフロントエンドが画像のアップロードとプレビューを実現
react-beautiful-dndに基づく要素の無料ドラッグソート
javascriptを使用してuuidを生成する機能を実現します
ファイルセーバーを使用して、フロントエンドからファイルをダウンロードします
gif.jsを使用して、写真に基づいてgifアニメーションを生成します
gifアニメーションの再生速度を制御する方法

テキスト

まだ作者の通常のスタイルに従って、関数を実装する前に、実装後のプレビュー効果を見てみましょう。

レンダリングから、gifアニメーションを動的に生成するために一連の画像をアップロードし、右クリックしてgifファイルを保存するだけでよいことがわかります。また、アニメーションの再生速度と配置順序を制御して、アニメーションをより柔軟に構成することもできます。自分で体験したい場合は、次の方法で直接行くことができます。

オンラインアドレス：http：//io.nainor.com/qt

1.基本的なページ設定

始める前に、まず基本的なページ構造を明確にする必要があります。著者は次の構造に分かれています。上の図から、3つの領域に分かれています。使い慣れたサードパーティのコンポーネントを使用して、それを実現できます。著者は、antdを使用してここで開発します。技術計画図は次のとおりです。上記は作者が分析したおおよその実現目標であり、作者がよく使う開発マップでもあります。目標の方向性は開発効率の向上に非常に役立ちます。より複雑なビジネス要件を実現する前に、まず考えることもできます。スキーム、そしてコード。

2.画像のアップロードとプレビュー機能を実現

インターフェースの最初のステップは、誰でも実装できると思います。機能を段階的に実装していきます。画像のアップロードとプレビューを実装しましょう。ここではサーバーを使用しないため、画像のプレビューはフロントエンド方式で完全に実現されます。 FileReaderオブジェクトを使用する必要があります。

FileReaderオブジェクトを使用すると、Webアプリケーションはユーザーのコンピューターに保存されているファイル（または生データバッファー）の内容を非同期で読み取ることができます。FileまたはBlobオブジェクトを使用して、読み取るファイルまたはデータを指定します。

Fileオブジェクトは、ユーザーが入力要素でファイルを選択した後に返されるFileListオブジェクト、またはドラッグアンドドロップ操作によって生成されたDataTransferオブジェクト、またはHTMLCanvasElementでmozGetAsFile（）メソッドを実行することによって返される結果です。次に、antdのUploadコンポーネントとFileReaderを使用して画像プレビューを実現する方法を見てみましょう。具体的なコードは次のとおりです。

const uploadprops = useMemo(() => ({
    name: 'file',
    multiple: true,
    listType:"picture-card",
    onPreview: () => {},
    showUploadList: false,
    beforeUpload(file, fileList) {
      // 解析并提取excel数据
      let reader = new FileReader();
      reader.onload = function(e) {
        let url = e.target.result;
        setImageList(prev => [...prev, {id: uuid(6, 16), url}])
      };
      reader.readAsDataURL(file);
    }
  }), []);

uploadpropsは、Uploadコンポーネントに必要なプロパティ構成です。コードから、beforeUploadステージでイメージをインターセプトし、FileReaderオブジェクトのreadAsDataURL APIを介して読み取りファイルをbase64アドレスに変換したことがわかります。これにより、次のように表示できます。写真：

<img src={item.url} id={item.id} alt=""/>

コードでは、画像データをオブジェクトに格納します。オブジェクトには、uuid関数によって生成された一意のIDとURLが含まれます。一意のIDが生成される理由については、以下で紹介します。

3. react-beautiful-dndを使用して、要素の自由なドラッグソートを実現します

H5-Dooring |強力なオープンソースH5エディターを学習した後、オープンソースエディターはreact-dndによって実装されたコンポーネントドラッグとコンポーネントデータ転送を使用するため、react-dndモジュールは非常によく知られていることがわかります。著者は、コミュニティでより興味深いドラッグアンドドロップライブラリreact-beautiful-dndを見つけました。これは、エレガントでスムーズなインテリジェントなドラッグアンドドロップ効果も実現できます。基本的なケースは次のとおりです。ライブラリを詳細に調べた後、画像コンポーネントの実装に直接使用できることを発見しました。ドラッグと並べ替えの機能であるため、作成者はライブラリを直接使用して画像コンポーネントをカプセル化します。ライブラリの使用には詳細なケースコードがあるため、ここでは詳しく説明しません。並べ替えを実現するために、ここで言及する必要があります。各要素の一意の識別子を決定する必要があるため、ここではuuidについて考えます。したがって、レンダリングされたイメージの配列データ構造は、次の長さになります。

const imgList = [
	{
    	id: uuid(6, 10),
        url: '图片的base64位地址'
    }
]

画像のアップロードサイズを制限するために、UploadコンポーネントのbeforeUploadステージで画像のアップロードサイズを制限することもできます。これは用途によって異なります。uuidを実装する方法はたくさんあります。実装方法は次のとおりです。

// 生成uuid
function uuid(len: number, radix: number) {
  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  let uuid = [],
    i;
  radix = radix || chars.length;

  if (len) {
    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  } else {
    let r;
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    uuid[14] = '4';

    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | (Math.random() * 16);
        uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
      }
    }
  }

  return uuid.join('');
}

実装後の効果は次のとおりです。画像の削除方法も非常に簡単です。画像の一意のIDを使用して、配列内の配列のフィッターメソッドを使用して画像を削除します。

4.GIFの再生速度を制御する方法

スライダーコンポーネントを使用してgifの再生速度を制御でき、gif.jsは速度インターフェイスも提供するため、速度値を計算するだけで済みます。スライダーが長くスライドするほど、値が大きくなり、対応する値が大きくなります。速度が速いほど時間間隔が短くなるため、フロントエンドレイヤーで設計した表示効果は次のようになります。スライダーの最大値は20、最小値は1です。これに対応して、スライダーを最大値に設定すると、gifの再生速度が最大になります。、各画像の滞留間隔は0.1秒で、スライダーが最小値の1の場合、gifの再生速度が最も遅く、各画像は2秒間留まります。このルールに従って、次のルールが得られます。

具体的なコードは次のとおりです。

const handleSpeed = (v) => {
  let realSpeed = (20 - v + 1) / 10;
  setSpeed(realSpeed)
}

もちろん、より簡単な方法でそれを行うことができ、スライダーコンポーネントは逆値操作も提供します。

5.画像シーケンスに基づいてgifアニメーションを生成します

画像シーケンスに基づいてgifを生成する方法も非常に簡単です。画像ドラッグ領域の画像をバッチで取得し、それらを配列にアセンブルしてgif.jsに送信します。効果を直接見てみましょう。

6.ファイルセーバーを使用してフロントエンドからファイルをダウンロードします

生成されたgifイメージをファイルセーバーモジュールに渡し、それによって提供されるAPIを使用してファイルをダウンロードするだけです。これも前の記事で作成者によって紹介されています。コードは次のとおりです。

import { saveAs } from 'file-saver';

// resultImage为gif生成的gif图片对象
saveAs(resultImage, `${uuid(6, 10)}.gif`);

やっと

H5ゲーム、webpack、node、gulp、css3、javascript、nodeJS、キャンバスデータの視覚化、その他のフロントエンドの知識と実際の戦闘について詳しく知りたい場合は、「興味深いフロントエンド」で一緒に勉強して話し合い、フロントエンドの境界を一緒に探索してください。