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

这是一个“从哪里开始”类型的问题

我正在学习HTML5和画布作品，但感觉我找错了方向

我想学习如何创建卡通类型的flash响应动画。想象一下这个玩具熊：

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

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

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

我以为HTML5和画布动画可以让我实现我想要的，但除了画简单的形状动画和视频作品，我似乎找不到教程或“如何”文章

我怎样才能实现我想要做的事情，或者我需要去别处看看？如果能给我指出正确的方向，我将不胜感激

编辑：我在做研究时遇到了以下游戏：

---

例如，怪物是如何以这样的方式进行动画制作的？

我很快会接受一个更有教育意义的答案，但我猜您想要做的事情对于浏览器中的canvas/javascript性能来说可能有点太多了

如果你是一名职业动画师，这看起来可能不是一项乏味的任务，但我想你会编写大量代码来制作复杂路径的动画，并填充它们等等

---

我相信您已经研究过了，但是有很多javascript画布库。出现在脑海或脑海中。如果您查看他们关于路径和动画的示例/功能，他们可能会为您指出一个不错的方向。

如果练习的目的是学习HTML5和canvas，那么以下内容可能不适合您。如果您需要尽可能快速、轻松地创建您的teddy动画，并使用基于标准的技术交付，那么我建议您下载并浏览的预览。它是一个运动和交互设计工具，类似于Flash（时间线和关键帧），它输出HTML、CSS和JavaScript的组合。我还没有玩过预览版，但我很确定它能制作出你所说的那种动画

更新：

---

您可能还想考虑哪些可以用来将SWF动画直接导出到SpRITE表。它是由开发

Canvas

库的团队创建的，可以将附带的帧数据导出为JSON或easel.js。它将允许您在Flash中创建动画（面对现实，Flash仍然是最好的web动画工具），但使用HTML进行渲染

在我看来，有两个问题需要解决：

让熊在自身内运动（至少腿）

在屏幕上移动熊

解决这两个问题会让你看到熊在屏幕上行走的样子（而不是仅仅在屏幕上移动或原地行走）。听起来你们已经解决了问题1

要解决#2问题，最好的办法是每帧有一个图像。试图在每帧的不同位置绘制熊是浪费时间的。如果你预装了帧图像，你可以在开始的时候花一次钱，你只是在他走路的时候显示一个不同的图像

---

现在，这是画布的工作吗？我不知道。我想您可能可以构建我在“老派”HTML/JavaScript/CSS中描述的内容。平台由您决定，但框架——更具体地说，是每个框架的图像——是这里的关键概念

帆布在这里会很适合你

动画通常仅通过循环浏览不同的PNG文件（或具有不同图像的spritemap）来完成。不久前，我没有在画布上显示一个简单的动画：

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';

如果查看示例中的图像，您将了解用于动画的精灵贴图的外观：

我认为这样一个基于计时器的图像中的精灵就是所需要的

---

在画布上制作和移动可点击、可选择的对象需要一些步法。画布上没有内置的对象检测功能。但是如果你以前做过编程，这并不难，我已经写了一篇文章，作为一个非常温和的介绍。它应该会帮助你

除此之外，您最好的资源当然是堆栈溢出当您遇到个别问题时，我们会很高兴回答您。

对于动画来说，这很好。它甚至有几个s

---

另外，请看一下

的部分内容，谢谢。我没有意识到边缘。我只是花了几个小时来了解它。虽然它看起来像一个伟大的产品，但它似乎并没有达到我所期待的效果。正如我上面所说，使用Edge，我看起来可以在屏幕上滑动熊，但我看不到它被用于创建自定义动画，例如在行走时放手或移动脚。这里有一个例子说明它的基本功能：就像我说的，我已经有一段时间没有玩Edge了，所以我必须服从你。然而，如果你不能用它来创建一个简单的动画，如你所描述的，我会非常非常惊讶。它正是为了这个目的而设计的，并且应该消除像Brian和Simon在回答中所描述的手动制作动画的繁重工作。我是一个.net web开发人员，但我在动画和类似任务方面没有太多经验。给我一些时间来学习你的教程。brb:）关于使用Spritemap，我有一个问题。它是否只对你在例子中使用的微小图像有效。。。如果我的图像是500x400左右（随机示例），该怎么办？我想精灵贴图文件会变得相当大。与图像库相同。。我真的要在一个网络文件夹中保存100个文件吗