GSAPアニメーションをアニメーションGIFに変換する:現(xiàn)代GIFを使用するための段階的なガイド
キーポイント
プロセスを使用して、GSAPアニメーションをAnimated GIFに変換し、SVGデータをキャプチャし、Tweenを調(diào)整するたびにHTMLキャンバスに書(shū)き込むことができます。このSVGデータは、ラスター化された畫(huà)像データに変換できます。これは、Modern-GIFが使用してアニメーションGIFの各フレームを作成します。 -
変換プロセスには、SVGデータのキャプチャ、SVGデータのラスター化データへの変換、最終的にラスター化データをGIFに変換するなど、複數(shù)のステップが含まれます。各ステップには、特定のコードの変更と、キャプチャされたデータを保存するための配列の使用が含まれます。 -
ブラウザアニメーションとGIFの間のフレームレートは通常異なるため、最終GIFのフレームレートは元のアニメーションよりも遅くなる可能性があります。 GIFをスピードアップするには、アレイフィルターとJavaScriptの殘りのオペレーターを使用して、インデックスが數(shù)で分割できるかどうかを判斷して、一部のフレームを破棄できます。 -
この記事では、GSAPを使用して作成されたアニメーションをModern-GIFを使用してアニメーションGIFに変換する方法について説明します。
以下は、私が以前に作ったアニメーションのプレビューです。
以下のリンクでは、この記事で參照するすべてのコードのライブプレビューを見(jiàn)つけることができます。
?
インデックス:gsap-animation-to-gif.netlify.app
simpleバージョン:gsap-animation-to-gif.netlify.app/simple
-
- ?姉妹コードベース:github.com/pauliescanlon/gsap-animation-to-gif
-
コードベースには2つの「ページ」があります。インデックスには、上記のGIFのすべてのコードが含まれています。この記事で説明する手順の出発點(diǎn)です。
GSAPアニメーションをgif- に変換する方法
GSAPアニメーションをGIFに変換するために使用する方法には、SVGデータをキャプチャし、Tweenの各「更新」でHTMLキャンバスに書(shū)き込むことが含まれます。 Tweenが完了したら、SVGデータをラスター化された畫(huà)像データに変換できます。これは、Animated GIFのすべてのフレームを作成するためにModern-GIFを使用できます。
初心者
これは私が私の簡(jiǎn)単な例で使用したコードであり、GSAPアニメーションからアニメーションGIFを作成するために必要な各ステップを説明するために使用します:
このステップはもう少し複雑で、AnimationFramesアレイの各インデックスで1つの操作が必要です。
再帰関數(shù)を使用することにより、AnimationFramesアレイの畫(huà)像データを使用してキャンバスに書(shū)き込むことができます。次に、canvas.todataurl( 'image/jpeg')を使用することにより、CanvasFramesアレイにアニメーションの各フレームのラスター化されたデータを保存できます。
oncomplete関數(shù)にconsole.logを追加した場(chǎng)合、ブラウザコンソールに次のようなものが表示されるはずです。ただし、今回はMIMEタイプのデータに注意してください。SVGXMLではなく、Image/JPEGです。これは、私がする次の仕事にとって重要です。 <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Simple</title>
</head>
<body>
<main>
<svg id='svg'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 400 200'
width={400}
height={200}
style={{ border: '1px solid red' }}
>
<rect id='rect' x='0' y='75' width='50' height='50' fill='red'></rect>
</svg>
<canvas id='canvas' style={{ border: '1px solid blue' }} width={400} height={200}></canvas>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" class="lazy" alt="How to Create Animated GIFs from GSAP Animations " /></p>
<h2>將 SVG 數(shù)據(jù)轉(zhuǎn)換為光柵化數(shù)據(jù)</h2>
<pre class="brush:php;toolbar:false"><code class="javascript">gsap.timeline({
onUpdate: () => {
const xml = new XMLSerializer().serializeToString(svg);
const src = `data:image/svg+xml;base64,${btoa(xml)}`;
animationFrames.push(src);
},
onComplete: () => {
let inc = 0;
const renderSvgDataToCanvas = () => {
const virtualImage = new Image();
virtualImage.src = animationFrames[inc];
virtualImage.onload = () => {
ctx.clearRect(0, 0, 400, 200);
ctx.drawImage(virtualImage, 0, 0, 400, 200);
canvasFrames.push(canvas.toDataURL('image/jpeg'));
inc++;
if (inc < animationFrames.length) {
renderSvgDataToCanvas();
} else {
//console.log(canvasFrames); //調(diào)試用
generateGif();
}
};
};
renderSvgDataToCanvas();
},
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });
ラスター化データをgif
に変換します
これは最後のステップであり、CanvasFramesアレイの各インデックスを最新のGIFに渡すことを伴います。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Simple</title>
</head>
<body>
<main>
<svg id='svg'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 400 200'
width={400}
height={200}
style={{ border: '1px solid red' }}
>
<rect id='rect' x='0' y='75' width='50' height='50' fill='red'></rect>
</svg>
<canvas id='canvas' style={{ border: '1px solid blue' }} width={400} height={200}></canvas>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" class="lazy" alt="How to Create Animated GIFs from GSAP Animations " /></p>
<h2>將 SVG 數(shù)據(jù)轉(zhuǎn)換為光柵化數(shù)據(jù)</h2>
<pre class="brush:php;toolbar:false"><code class="javascript">gsap.timeline({
onUpdate: () => {
const xml = new XMLSerializer().serializeToString(svg);
const src = `data:image/svg+xml;base64,${btoa(xml)}`;
animationFrames.push(src);
},
onComplete: () => {
let inc = 0;
const renderSvgDataToCanvas = () => {
const virtualImage = new Image();
virtualImage.src = animationFrames[inc];
virtualImage.onload = () => {
ctx.clearRect(0, 0, 400, 200);
ctx.drawImage(virtualImage, 0, 0, 400, 200);
canvasFrames.push(canvas.toDataURL('image/jpeg'));
inc++;
if (inc < animationFrames.length) {
renderSvgDataToCanvas();
} else {
//console.log(canvasFrames); //調(diào)試用
generateGif();
}
};
};
renderSvgDataToCanvas();
},
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });
ModernGif.Encodeを使用して、データの配列をフレームに渡し、各フレームの遅延を定義することができ、0秒の遅延を追加することを選択しました。
コードの次の部分は、ModernGif.Ecodeデータの変換を処理し、「別の」Mimeタイプ、今回の畫(huà)像/GIFに変換します。
アニメーションGIFを表す最終的な「ブロブ」データを取得したら、それをURLに変換し、畫(huà)像要素とリンク要素のSRCとHREFを設(shè)定して、ブラウザでGIFを表示およびダウンロードできるようにします。
フレームレート
ブラウザで実行されているアニメーションは通常60フレーム(fps)を再生するため、最終的なGIFが非常にゆっくりと実行されることに気付くかもしれませんが、GIFは通常12 fpsまたは24 fpsではるかに遅くなります。
いくつかのアニメーションフレームを「破棄」するには、配列フィルターとJavaScriptの殘りのオペレーターを使用して、インデックスが特定の數(shù)字で割り切れることができるかどうかを判斷します。私の場(chǎng)合、6を選択します。 6で分割できないインデックスは、配列から除外されます。生成されたアニメーションGIFは少し不器用ですが、はるかに速く再生されます。
フレームレートの調(diào)整を?qū)g裝するためにメソッドをgenerateGif
関數(shù)に追加しました。 filter
それだけです。GSAPSVGアニメーションをHTMLキャンバスを介してアニメーションGIFに変換できます!
この記事で説明されていることについて質(zhì)問(wèn)がある場(chǎng)合は、Twitter/X:@PauliesCanlonで私を見(jiàn)つけてください。 以上がGSAPアニメーションからアニメーションGIFを作成する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。