GSAPアニメーションをアニメーションGIFに変換する：現代GIFを使用するための段階的なガイド
キーポイント
以下は、私が以前に作ったアニメーションのプレビューです。
インデックス：gsap-animation-to-gif.netlify.app
初心者
このステップはもう少し複雑で、AnimationFramesアレイの各インデックスで1つの操作が必要です。
oncomplete関数にconsole.logを追加した場合、ブラウザコンソールに次のようなものが表示されるはずです。ただし、今回は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="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" alt="How to Create Animated GIFs from GSAP Animations " /></p>
<h2>将 SVG 数据转换为光栅化数据</h2>
<pre class="brush:php;toolbar:false"><code class="language-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); //调试用
generateGif();
}
};
};
renderSvgDataToCanvas();
},
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });
ラスター化データを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="https://img.php.cn/upload/article/000/000/000/173898187373194.jpg" alt="How to Create Animated GIFs from GSAP Animations " /></p>
<h2>将 SVG 数据转换为光栅化数据</h2>
<pre class="brush:php;toolbar:false"><code class="language-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); //调试用
generateGif();
}
};
};
renderSvgDataToCanvas();
},
})
.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });コードの次の部分は、ModernGif.Ecodeデータの変換を処理し、「別の」Mimeタイプ、今回の画像/GIFに変換します。
アニメーションGIFを表す最終的な「ブロブ」データを取得したら、それをURLに変換し、画像要素とリンク要素のSRCとHREFを設定して、ブラウザでGIFを表示およびダウンロードできるようにします。
いくつかのアニメーションフレームを「破棄」するには、配列フィルターとJavaScriptの残りのオペレーターを使用して、インデックスが特定の数字で割り切れることができるかどうかを判断します。私の場合、6を選択します。 6で分割できないインデックスは、配列から除外されます。生成されたアニメーションGIFは少し不器用ですが、はるかに速く再生されます。
フレームレートの調整を実装するために
メソッドをgenerateGif関数に追加しました。 filter
この記事で説明されていることについて質問がある場合は、Twitter/X：@PauliesCanlonで私を見つけてください。
以上がGSAPアニメーションからアニメーションGIFを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
