javascript 使用 Canvas 和 HTML5 创建类似 Flash 的动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11378774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating flash like animations with Canvas and HTML5
提问by InspiredBy
This is a "where can I start" type question.
这是一个“我可以从哪里开始”类型的问题。
I'm in process of learning HTML5 and Canvas work but have a feeling that I'm looking in the wrong area.
我正在学习 HTML5 和 Canvas 工作，但有一种感觉，我正在寻找错误的领域。
I would like to learn how to create cartoon type flash-like responsive animations. Imagine this teddy bear:
我想学习如何创建卡通类型的类似 Flash 的响应式动画。想象一下这只泰迪熊：
When I point my mouse at it I want to make him walk across the screen by implementing my "moving feet" animations etc..When click, I want him to wave his paw.
当我将鼠标指向它时，我想让他通过实现我的“移动脚”动画等让他在屏幕上行走。点击时，我想让他挥动他的爪子。
With HTML5 and Javascript I can make him move/float across but I can't find the way to actually ANIMATE the movements.
使用 HTML5 和 Javascript 我可以让他移动/漂浮，但我找不到实际动画移动的方法。
Do I create small .mp4 files? Do I create a bunch of images to loop through them? Animated GIFs? I would like to stay away from flash ofcourse...
我要创建小的 .mp4 文件吗？我是否创建了一堆图像来循环遍历它们？动画 GIF？我想远离闪光灯当然...
I thought HTML5 with Canvas animation would allow me to achieve what I want but other than drawing simple shape animations and Video work I can't seem to find tutorials or "How to" articles.
我认为带有 Canvas 动画的 HTML5 可以让我实现我想要的，但除了绘制简单的形状动画和视频工作之外，我似乎找不到教程或“如何”文章。
How can I achieve what I'm trying to do or do I need to look elsewhere? I would appreciate being pointed in the right direction.
我怎样才能实现我想要做的事情，或者我需要去别处寻找？我很感激被指出正确的方向。
Edit: I ran into the following game while doing research: http://www.cuttherope.ie/How, for example is the monster animated in something like this?
编辑：我在做研究时遇到了以下游戏：http: //www.cuttherope.ie/例如，怪物是如何以这样的方式动画的？
采纳答案by net.uk.sweet
If the purpose of the exercise is to learn HTML5 and canvas then the following is probably not for you. If you need to create your teddy animation as quickly and easily as possible, and deliver it using standards based technologies, then I would suggest you download and explore the preview of Adobe Edge. It's a motion and interaction design tool similar to Flash (timeline and keyframes) which outputs a combination of HTML, CSS and JavaScript. I haven't played with the preview version but I'm pretty sure it will be capable of producing the sort of animation you're talking about.
如果练习的目的是学习 HTML5 和画布，那么以下内容可能不适合您。如果您需要尽可能快速轻松地创建泰迪动画，并使用基于标准的技术交付它，那么我建议您下载并探索Adobe Edge的预览版。它是一种类似于 Flash（时间轴和关键帧）的运动和交互设计工具，可输出 HTML、CSS 和 JavaScript 的组合。我还没有玩过预览版，但我很确定它能够制作出你所说的那种动画。
Update:
更新：
You might also want to consider Zo?which can be used to export SWF animations directly to sprite sheets. It was created by the team which developed the Canvaslibrary easel.jsand can export the accompanying frame data as either JSON or easel.js. It will allow you to create your animations in Flash (which, let's face it, is still the best web animation tool around) but render them using HTML.
您可能还想考虑Zo? 可用于将 SWF 动画直接导出到精灵表。它是由开发Canvas库easel.js的团队创建的，可以将伴随的帧数据导出为JSON 或easel.js。它将允许您在 Flash 中创建动画（让我们面对现实，它仍然是最好的网络动画工具），但使用 HTML 呈现它们。
回答by Simon Sarris
Canvas will do you well here.
帆布在这里会很好。
Animation is typically done merely by cycling through different PNG files (or a spritemap with different images). Here's a jsfiddle exampleI did not long ago that shows a simple animation on the canvas:
动画通常仅通过循环浏览不同的 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';
If you look at the image in the example, you get an idea of what a sprite map for animation looks like:
如果您查看示例中的图像，您就会了解动画的精灵图是什么样子的：
Cycling thought the sprites in such an image based on a timer is all that's needed!
Cycling 认为这种基于计时器的图像中的精灵就是所需要的！
Making and moving clickable, selectable objects on the canvas takes a bit of footwork. There's nothing built in for object detection on the canvas. But if you've done programming before it isn't too hard, and I've written a popular tutorial on the matterthat serves as a very gentle introduction. It should help you out.
在画布上制作和移动可点击、可选择的对象需要一些步法。画布上没有内置任何对象检测功能。但是，如果您以前做过编程，那也不会太难，而且我写了一篇关于这个问题的流行教程，作为一个非常温和的介绍。它应该可以帮助你。
Other than that, your best resource is, of course, Stack Overflow. :) We'll always be glad to answer individual questions as you come across them.
除此之外，您最好的资源当然是 Stack Overflow。:) 当您遇到个人问题时，我们总是很乐意回答这些问题。
回答by Peter Ajtai
For animations, three.jsis nice. It's even got a few physics engine plugins.
对于动画，three.js很好。它甚至还有一些物理引擎插件。
Also, take a look at parts of HTML5 Game Development
另外，看看部分HTML5 游戏开发
回答by Brian Warshaw
The way I see it, there are two problems to tackle:
在我看来，有两个问题需要解决：
- Give the bear motion within itself (legs at a minimum)
- Move the bear across the screen
- 让熊在其自身内运动（至少腿）
- 在屏幕上移动熊
Tackling these two gets you the appearance of the bear walking across the screen (as opposed to just moving across the screen or walking in place). It sounds like you've already tackled problem #1.
解决这两个问题会让你看到熊穿过屏幕的样子（而不是仅仅穿过屏幕或原地行走）。听起来您已经解决了问题#1。
To tackle #2, your best bet is to have an image per-frame. Trying to draw the bear in a different position for each frame is a waste of time. If you preload the frame images, you can take the cost once at the beginning and them you're just displaying a different image as he walks.
要解决 #2，最好的办法是每帧都有一个图像。试图为每一帧将熊画在不同的位置是浪费时间。如果您预加载帧图像，您可以在开始时承担一次成本，而他们只是在他走路时显示不同的图像。
Now, is this a job for canvas? I don't know. I'm thinking you could probably build what I've described in "old school" HTML/JavaScript/CSS. The platform is up to you--but frames--and more specifically an image for each frame--are the key concept here.
现在，这是画布的工作吗？我不知道。我想你可能会构建我在“老派”HTML/JavaScript/CSS 中描述的内容。平台由您决定——但框架——更具体地说是每个框架的图像——是这里的关键概念。
回答by brains911
I'll quickly bow to a more educated answer, but I would guess what you want to do may be a little too much for canvas/javascript performance in the browser.
我会很快屈服于一个更有教养的答案，但我猜你想要做的对于浏览器中的 canvas/javascript 性能来说可能有点太多了。
If you're an animator by trade it might not seem like such a tedious task, but I imagine you would be writing a lot of code to animate intricate paths and fill them and etc...
如果您是一名动画师，这似乎不是一项乏味的任务，但我想您会编写大量代码来为复杂的路径设置动画并填充它们等等......
I'm sure you've researched, but there are numerous javascript canvas libraries out there. Paper jscomes to mind or processing js. They might point you in a decent direction if you check out their examples/capabilities concerning paths and animation.
我相信你已经研究过了，但是有很多 javascript 画布库。想到纸js还是处理js。如果您查看他们关于路径和动画的示例/功能，他们可能会为您指明一个不错的方向。
