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

Question

这是一个"我在哪里可以开始"类型的问题.

我正在学习HTML5和Canvas的工作,但感觉我正在寻找错误的领域.

我想学习如何创建卡通类型的闪存响应动画.想象一下这只泰迪熊:

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

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

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

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

我怎样才能实现我想要做的事情或者我需要去其他地方看看？我希望被指向正确的方向.

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

Answer 1

帆布在这里对你有好处.

动画通常仅通过循环遍历不同的PNG文件(或具有不同图像的精灵图)来完成.这是我不久前在画布上显示简单动画的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.:)当你遇到他们时,我们总是很乐意回答个别问题.

Answer 2

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

\n\n

更新：

\n\n

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

\n