將 SVG 數(shù)據(jù)轉(zhuǎn)換為光柵化數(shù)據(jù)<\/h2>\n

gsap.timeline({\n  onUpdate: () => {\n    const xml = new XMLSerializer().serializeToString(svg);\n    const src = `data:image\/svg+xml;base64,${btoa(xml)}`;\n    animationFrames.push(src);\n  },\n  onComplete: () => {\n    let inc = 0;\n    const renderSvgDataToCanvas = () => {\n      const virtualImage = new Image();\n      virtualImage.src = animationFrames[inc];\n      virtualImage.onload = () => {\n        ctx.clearRect(0, 0, 400, 200);\n        ctx.drawImage(virtualImage, 0, 0, 400, 200);\n        canvasFrames.push(canvas.toDataURL('image\/jpeg'));\n        inc++;\n        if (inc < animationFrames.length) {\n          renderSvgDataToCanvas();\n        } else {\n          \/\/console.log(canvasFrames); \/\/調(diào)試用\n          generateGif();\n        }\n      };\n    };\n    renderSvgDataToCanvas();\n  },\n})\n.fromTo('#rect', { x: -50 }, { duration: 2, x: 350, ease: 'power.ease2' });<\/pre>\n
This step is a little more complicated and requires one operation on each index of the animationFrames array. <\/p>\n
 By using the recursive function renderSvgDataToCanvas, I can use the image data in the animationFrames array to write it to the canvas. Then, by using canvas.toDataURL('image\/jpeg'), I can store the rasterized data of each frame of the animation in the canvasFrames array. <\/p>\n
If you have added console.log in the onComplete function, you should see something similar to the following in the browser console. However, this time note the MIME type of the data: it is not svg xml, but image\/jpeg. This is important for the next work I will do. <\/p>\n
<\/p>
Convert rasterized data to GIF<\/h2>\n
 This is the last step, which involves passing each index of the canvasFrames array to a modern-gif. <\/p>\n
\n\n\n  \n