使用画布的 HTML5 中的逐帧动画

Posted 2023-03-05

【中文标题】使用画布的 HTML5 中的逐帧动画

【英文标题】：Frame by frame animation in HTML5 with canvas

【发布时间】：2011-06-14 08:39:05

【问题描述】：

我有一个要转换为 html5 的 Flash 动画。现在我已经取出了所有的图像。例如在手部动画中，我拍摄了所有手部图像的图像。我已经用基础绘图制作了画布，但我不知道如何逐帧替换这些图像。

function draw()
    var canvas = document.getElementById('canvas');
    if(canvas.getContext)
        // canvas animation code here:
        var ctx = canvas.getContext('2d');

        var lhs = new Image();

        lhs.src = "images/left_hnd_1.png";

        lhs.onload = function()
            ctx.drawImage(lhs, 293, 137);
        

     else 
        // canvas unsupported code here:
        document.getElementById('girl').style.display = "block";
    

现在我为这张图片多了三个框架。 left_hnd_2.png、left_hnd_3.png 和 left_hnd_4.png。我会使用一张图像，但帧数的差异太大了，无法用一张图像完成。如何使用我想要的时差制作动画。

任何想法将不胜感激。谢谢！

【参考方案1】：

这也对我有用！由于某种原因，当我使用 OP 的打开代码时它不起作用：function draw()

但是，当我使用：window.onload = function draw() 时，动画会在画布上播放。我还使用了大约 150 张带有 Alpha 通道的 PNG 图像，因此这是将“视频”或创建合成到 iPad/iPhone 的好方法。我确认它可以在 iPad ios 4.3 上运行。

【参考方案2】：

试试这个：

var imgNumber = 1;
var lastImgNumber = 4;

var ctx = canvas.getContext('2d');
var img = new Image;
img.onload = function()
  ctx.clearRect( 0, 0, ctx.canvas.width, ctx.canvas.height );
  ctx.drawImage( img, 0, 0 );
;
var timer = setInterval( function()
  if (imgNumber>lastImgNumber)
    clearInterval( timer );
  else
    img.src = "images/left_hnd_"+( imgNumber++ )+".png";
  
, 1000/15 ); //Draw at 15 frames per second

如果您只有 4 个图像，另一种方法是在“纹理图集”中创建一个包含所有四个图像的单个巨大图像，然后使用 setTimeout 或 setInterval 以不同的参数调用 drawImage()将图像的不同子集绘制到画布上。

【讨论】：

这个解决方案效果很好。问题：当我在画布上绘制多个图像时，我得到了级联效果。我需要绘制图像、清除画布、绘制图像++等。我有 62 个图像文件，因此合并到一个文件不是最好的方法。使用您的代码，清除画布、重新绘制等的最佳方法是什么？

我已经编辑了我的答案，以添加在绘制之前清除画布所需的一行。 （您可以通过缓存画布的宽度/高度来使这变得更快，或者如果它们都相同，则使用 img 宽度/高度。）

这很棒，但是，在播放动画之前，必须完全缓存图像。因此它不会在第一次加载时播放。仅在重新加载时。我要问一个问题来帮助解决这个问题。

您不应强加 15 帧/秒或任何值的预定义帧速率。相反，让浏览器通过使用requestAnimationFrame()

来决定它需要重绘每一帧的频率

@JoseRuiSantos 如果您有独立于帧率的动画并希望它尽可能快地绘制，那是真的。如果您想要较慢的动画（例如，您要将固定帧率的帧序列从 Flash 转换为 HTML5 画布），那么您可以尝试控制帧率。