14

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

我正在学习 HTML5 和 Canvas 的工作，但感觉我找错地方了。

我想学习如何创建卡通类型的类似 Flash 的响应式动画。想象一下这只泰迪熊： 泰迪熊图片

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

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

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

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

我怎样才能实现我正在尝试做的事情，或者我需要寻找其他地方吗？我会很感激被指出正确的方向。

编辑：我在研究时遇到了以下游戏：http ://www.cuttherope.ie/ 例如，怪物是如何以这样的方式动画的？

4

5 回答 5

8

帆布在这里会很好。

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

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

如果您查看示例中的图像，您会了解动画的精灵图是什么样子的：

在此处输入图像描述

骑自行车认为这种基于计时器的图像中的精灵就足够了！

在画布上制作和移动可点击、可选择的对象需要一些步骤。画布上没有任何内置对象检测功能。但是，如果您以前做过编程，这并不太难，而且我已经写了一篇关于这件事的流行教程，作为一个非常温和的介绍。它应该可以帮助你。

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

于 2012-07-08T03:51:38.510 回答
4

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

更新：

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

于 2012-07-08T00:08:27.623 回答
2

对于动画，three.js很好。它甚至还有一些物理引擎插件。

另外，看看HTML5 游戏开发的部分内容

于 2012-09-06T23:03:57.047 回答
1

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

  1. 让熊在自身内部运动（至少腿）
  2. 在屏幕上移动熊

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

要解决 #2，最好的办法是每帧都有一个图像。尝试在每一帧中将熊画在不同的位置是浪费时间。如果您预加载帧图像，您可以在开始时收取一次费用，并且您只是在他走路时显示不同的图像。

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

于 2012-07-08T00:59:50.733 回答
1

我会很快接受一个更有根据的答案，但我猜你想要做的可能对于浏览器中的 canvas/javascript 性能来说有点太多了。

如果您是一名动画师，这似乎不是一项繁琐的任务，但我想您会编写大量代码来为复杂的路径设置动画并填充它们等等......

我确定您已经研究过，但是那里有许多 JavaScript 画布库。想到Paper js或者处理 js。如果您查看他们关于路径和动画的示例/功能，他们可能会为您指明一个不错的方向。

于 2012-07-07T23:01:32.207 回答