GSAP 애니메이션에서 애니메이션 GIF를 만드는 방법

> GSAP 애니메이션 변환 애니메이션 GIF : Modern Gifs 사용에 대한 단계별 안내서 키 포인트

프로세스를 사용하여 GSAP 애니메이션을 SVG 데이터를 캡처하고 트윈을 조정할 때마다 HTML 캔버스에 작성하는 애니메이션 GIF로 GSAP 애니메이션을 변환 할 수 있습니다. 그런 다음이 SVG 데이터를 래스터 화 된 이미지 데이터로 변환 할 수 있으며, 그 후 Modern GIF에서 애니메이션 GIF의 각 프레임을 생성하는 데 사용됩니다. 변환 프로세스에는 SVG 데이터 캡처, SVG 데이터를 래스터 화 된 데이터로 변환하고 래스터 화 된 데이터를 GIF로 변환하는 등 여러 단계가 포함됩니다. 각 단계에는 특정 코드 수정 및 캡처 및 변환 된 데이터를 저장하기 위해 배열 사용이 포함됩니다.

브라우저 애니메이션과 GIF 사이의 프레임 속도는 일반적으로 다르기 때문에 최종 GIF의 프레임 속도는 원래 애니메이션보다 느리게 될 수 있습니다. GIF 속도를 높이려면 배열 필터와 JavaScript 나머지 연산자를 사용하여 인덱스가 숫자로 나눌 수 있는지 여부를 결정하여 일부 프레임을 폐기 할 수 있습니다.

• 이 기사에서는 GSAP를 사용하여 생성 된 애니메이션을 Modern GIF를 사용하여 애니메이션 GIF로 변환하는 방법을 설명합니다.
다음은 이전에 만든 애니메이션의 미리보기입니다.
아래 링크 에서이 기사에서 참조 할 모든 코드의 실시간 미리보기를 찾을 수 있습니다.
• >? 미리보기 : 색인 : gsap-animation-to-gif.netlify.app
간단한 버전 : gsap-animation-to-gif.netlify.app/simple
⚙️ 코드베이스 : github.com/pauliescanlon/gsap-animation-to-gif 코드베이스에는 두 개의"페이지 "가 있습니다. 색인에는 위의 GIF에 대한 모든 코드가 포함되어 있으며 Simple 은이 기사에 설명 된 단계의 시작점입니다. <p> <g> GSAP 애니메이션을 GIF로 변환하는 방법 <use> GSAP 애니메이션을 GIF로 변환하는 데 사용하는 방법에는 SVG 데이터를 캡처하여 트윈의 각 "업데이트"에서 HTML 캔버스에 작성합니다. 트윈이 완료되면 SVG 데이터를 래스터 화 된 이미지 데이터로 변환 할 수 있습니다. <img src="https://img.php.cn/upload/article/000/000/000/173898187154231.jpg" alt="How to Create Animated GIFs from GSAP Animations "> 초보자 </use></g></p> <code> 이것은 간단한 예제에서 사용한 코드이며, GSAP 애니메이션에서 애니메이션 GIF를 만드는 데 필요한 각 단계를 설명하는 데 사용합니다. <p> <a>이 단계는 조금 더 복잡하며 AnimationFrames 배열의 각 색인에서 하나의 작업이 필요합니다. </a></p> <rec> 재귀 함수 rendersvgdatocanvas를 사용하면 AnimationFrames 배열의 이미지 데이터를 사용하여 캔버스에 작성할 수 있습니다. 그런 다음 Canvas.todataurl ( 'Image/JPEG')을 사용하여 CanvasFrames 어레이에 애니메이션의 각 프레임의 래스터 화 된 데이터를 저장할 수 있습니다. <ul> <added> Console.log를 oncomplete 함수에 추가 한 경우 브라우저 콘솔에서 다음과 비슷한 내용을 볼 수 있습니다. 그러나 이번에는 MIME 유형의 데이터에 주목하십시오. SVG XML이 아니라 이미지/jpeg입니다. 이것은 내가 할 다음 작업에 중요합니다. <li> <ul> <li><ized> 래스터 화 된 데이터를 gif <h2>로 변환합니다 <last> 이것은 마지막 단계이며, 여기에는 캔버스 프레임 어레이의 각 색인을 최신 GIF로 전달하는 것입니다. </last> </h2> <p> <if> moderngif.encode를 사용하여 데이터 배열을 프레임으로 전달하고 각 프레임에 대해 지연을 정의 할 수 있습니다. 0 초의 지연을 추가하기로 결정했습니다. </if></p> <of of> 코드의 다음 부분은 moderngif.ecode 데이터를 변환하고이를 "다른"마임 유형, 이번에는 이미지/gif로 변환합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang='en'&gt; &lt;head&gt; &lt;meta charset='utf-8' /&gt; &lt;title&gt;Simple&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;main&gt; &lt;svg id='svg' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' width={400} height={200} style={{ border: '1px solid red' }} &gt; &lt;rect id='rect' x='0' y='75' width='50' height='50' fill='red'&gt;&lt;/rect&gt; &lt;/svg&gt; &lt;canvas id='canvas' style={{ border: '1px solid blue' }} width={400} height={200}&gt;&lt;/canvas&gt; &lt;img src=&quot;https://img.php.cn/upload/article/000/000/000/173898187373194.jpg&quot; alt=&quot;How to Create Animated GIFs from GSAP Animations &quot; /&gt;&lt;/p&gt; &lt;h2&gt;将 SVG 数据转换为光栅化数据&lt;/h2&gt; &lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-javascript&quot;&gt;gsap.timeline({ onUpdate: () =&gt; { const xml = new XMLSerializer().serializeToString(svg); const src = `data:image/svg+xml;base64,${btoa(xml)}`; animationFrames.push(src); }, onComplete: () =&gt; { let inc = 0; const renderSvgDataToCanvas = () =&gt; { const virtualImage = new Image(); virtualImage.src = animationFrames[inc]; virtualImage.onload = () =&gt; { ctx.clearRect(0, 0, 400, 200); ctx.drawImage(virtualImage, 0, 0, 400, 200); canvasFrames.push(canvas.toDataURL('image/jpeg')); inc++; if (inc &lt; animationFrames.length) { renderSvgDataToCanvas(); } else { //console.log(canvasFrames); //调试用 generateGif(); } }; }; renderSvgDataToCanvas(); }, }) .fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });</pre><div class="contentsignin">로그인 후 복사</div></div> <the> 애니메이션 GIF를 나타내는 최종 "Blob"데이터가 있으면 URL로 변환 한 다음 이미지 및 링크 요소의 SRC 및 HREF를 설정하여 브라우저에서 GIF를보고 다운로드 할 수 있습니다. <p> </p> <p> </p> 프레임 속도 <that> 브라우저에서 실행되는 애니메이션은 일반적으로 초당 60 프레임 (FPS)을 재생하는 반면 GIF는 일반적으로 12 또는 24 fps에서 훨씬 느리기 때문에 최종 GIF는 상당히 느리게 실행된다는 것을 알 수 있습니다. <p> <ard> 일부 애니메이션 프레임을 "파괴"하려면 배열 필터와 JavaScript 나머지 연산자를 사용하여 인덱스가 특정 숫자로 나눌 수 있는지 여부를 결정합니다. 제 경우에는 6을 선택합니다. 6으로 나눌 수없는 인덱스는 배열에서 필터링됩니다. 생성 된 애니메이션 GIF는 약간 서투르지 만 훨씬 더 빨리 재생됩니다. </ard></p> <the> 나는 프레임 속도의 조정을 구현하기 위해 <p> 메소드를 함수에 추가했습니다. <img src="https://img.php.cn/upload/article/000/000/000/173898187673605.jpg" alt="How to Create Animated GIFs from GSAP Animations "> 그게 IT입니다. GSAP SVG 애니메이션을 HTML 캔버스를 통해 애니메이션 GIF로 변환 할 수 있습니다! </p> 이 기사에 설명 된 내용에 대해 궁금한 점이 있으면 Twitter/X : @PauliesCanlon에서 저를 찾으십시오. <h2></h2></the></that></the></of></ized></li> </ul> </li></added> </ul></rec>

위 내용은 GSAP 애니메이션에서 애니메이션 GIF를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!