使用Canvas和HTML5创建类似动画的flash

Question

这是一个“我在哪里可以开始”的类型问题。

我正在学习HTML5和Canvas的工作，但感觉我正在寻找错误的区域。

我想学习如何创建卡通类闪光响应动画。想象一下这只泰迪熊：

当我将鼠标指向它时，我想通过实现我的“移动脚”动画等让他走过屏幕。点击时，我希望他挥动他的爪子。

使用HTML5和Javascript我可以让他移动/漂浮，但我找不到实际动画移动的方法。

我是否创建了小.mp4文件？我是否创建了一堆图像来循环它们？动画GIF？我想远离闪光灯......

我认为带有Canvas动画的HTML5可以让我实现我想要的效果，但除了绘制简单的形状动画和视频作品外，我似乎无法找到教程或“如何”文章。

我如何实现我想要做的事情或者我需要去其他地方寻找？我希望被指向正确的方向。

编辑：我在做研究时遇到了以下游戏：http://www.cuttherope.ie/ 例如，怪物是用这样的东西制作动画的？

Answer 1

Canvas在这里做得很好。

动画通常仅通过循环遍历不同的PNG文件（或具有不同图像的精灵图）来完成。 Here's a jsfiddle example我不久前在画布上显示了一个简单的动画：

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image = new Image();

var drawTile = function(x, y, tile, width, height) {
    context.drawImage(image, (tile % 6) * width, Math.floor(tile / 6) * height, width, height, x, y, width, height);
};

image.onload = function() {
    // draw all 12 tiles:
    var i = 0;
    setInterval(function() {
        context.clearRect(0,0,500,500);
        drawTile(0, 0, i, 48, 32);
        i++;
        if (i > 11) i = 0;
    }, 85);
}
image.src = 'http://i.stack.imgur.com/qkWe2.png';

如果你看一下例子中的图像，你就会知道动画的精灵地图是什么样的：

Cycling认为基于计时器的精灵中的精灵就是所需要的！

---

在画布上制作和移动可点击的可选对象需要一些步法。在画布上没有内置任何对象检测功能。但是如果你在编程之前没有那么难，那么我写了popular tutorial on the matter作为一个非常温和的介绍。它应该可以帮到你。

除此之外，您最好的资源当然是Stack Overflow。 :)当你遇到个别问题时，我们总是很乐意回答。

Answer 2

如果练习的目的是学习HTML5和画布，那么下面的内容可能不适合你。如果您需要尽可能快速，轻松地创建泰迪动画，并使用基于标准的技术提供它，那么我建议您下载并浏览Adobe Edge的预览。它是一个类似于Flash（时间轴和关键帧）的运动和交互设计工具，它输出HTML，CSS和JavaScript的组合。我没有使用预览版本，但我很确定它能够产生你正在谈论的那种动画。

<强>更新

您可能还需要考虑Zoë，它可用于将SWF动画直接导出到精灵表。它是由开发Canvas库easel.js的团队创建的，可以将附带的帧数据导出为JSON或easel.js。它将允许您在Flash中创建动画（让我们面对它，仍然是最好的Web动画工具），但使用HTML渲染它们。

Answer 3

对于动画，three.js很不错。它甚至有几个physics engine plugin s。

另外，请查看HTML5 Game Development

的部分内容

Answer 4

我会很快向一个更有教养的答案屈服，但我猜你想要做什么可能对浏览器中的canvas / javascript性能有点太多了。

如果你是一名动画师，那可能看起来不是那么乏味的任务，但我想你会写很多代码来制作错综复杂的路径并填充它们等等......

我确定你已经研究过了，但那里有很多javascript画布库。我会想到Paper js或processing js。如果你查看他们关于路径和动画的例子/能力，他们可能会指出你一个不错的方向。

Answer 5

我认为，有两个问题需要解决：

1. 让熊内部运动（腿部至少）
2. 将熊移过屏幕

解决这两个问题会让你看到熊在屏幕上行走的外观（而不是只是在屏幕上移动或走路）。听起来你已经解决了问题＃1。

要解决＃2，最好的办法是每帧都有一个图像。试图在每个帧的不同位置绘制熊是浪费时间。如果您预先加载帧图像，您可以在开始时花费一次成本，而他们只是在走路时显示不同的图像。

现在，这是帆布的工作吗？我不知道。我想你可能会构建我在“老派”HTML / JavaScript / CSS中所描述的内容。平台取决于您 - 但帧 - 而且更具体地说是每帧的图像 - 是这里的关键概念。