问题标签 [html5-animation]

我想使用 HTML5 和canvas标签，但没有像 Flash 那样提供动画的界面是很棘手的。HTML5 画布是否有任何所见即所得的界面？我看到Adobe现在有把Flash转canvas的软件，但是价格太高了。

如何开始编程 WebGL

在现代 HTML5 浏览器中测量帧率（即 FPS）的最准确方法是什么？我对 Canvas 动画的 FPS 特别感兴趣。

http://weblogs.mozillazine.org/roc/archives/2010/11/measuring_fps.html会告诉您尝试通过计算 setTimeout 运行的频率来测量帧速率是不准确的。浏览器可以在屏幕绘制之间多次运行您的超时回调。

原来 Mozilla 有一个 window.mozPaintCount https://developer.mozilla.org/en/DOM/window.mozPaintCount可用，它应该提供准确的 FPS。但是，这只适用于 Mozilla。

Chrome 有一个类似的未解决问题：http ://code.google.com/p/chromium/issues/detail?id=65348

在 Chrome 中检查硬件加速 FPS 的手动方法是获取 Chrome Beta 通道（截至发布日期）并转到 about:flags 并打开 FPS Counter。但是，在 Mac 上，只有在使用 WebGL 时才会开启加速。因此，无法在 Mac 版 Chrome 上检查 FPS 的画布。

准确测量 HTML5 FPS 的其他策略是什么？

谢谢！

我有兴趣在其中一个或 HTML5/JQuery 的组合中制作更多类似 Flash 的动画。

漂浮的想法之一是飞鸟、角色动画和类似“补间”的动画序列。我是一名 Flash 开发人员，所以所有这一切都是通过 Flash 的基于时间轴的补间动画系统的第二天性，所以我想知道 HTML5 Canvas、CSS3 和 jQuery 等新兴技术有什么可能？这些在补间动画方面有多熟练？什么是阅读的好起点？

例如， http://www.thewildernessdowntown.com/上的飞鸟是惊人的，它们看起来是 3d 的，可变方向、速度、旋转、襟翼、速度。在 Flash 中可以相对轻松地实现这一点，将场景动画创建为电影剪辑，在舞台上生成这些动画并在 tweenlite 中以各种速度甚至在 PV3D 中移动它们，但我几乎不知道如何在画布上实现这一点.

因此，简而言之，关于如何实现上述目标的想法、关于 Flash 之外的此类动画的良好阅读材料以及您可能拥有的任何一般提示将不胜感激。

谢谢

自从不久前的粒子爆炸以来，我一直试图弄清楚谷歌是如何为他们的徽标制作动画的，而今天他们有一套化学方法来庆祝罗伯特·本生 (Robert Bunsen) 诞辰 200 周年。

我假设这是 HTML5（我使用的是 Firefox 4、Chrome 和 Safari 5），但任何人都可以确认是否是这样，以及是否有任何关于如何制作这些类型动画的好的教程？

我似乎无法弄清楚如何在 html5 画布上缩放像素。这就是我到目前为止的位置。

编辑：我在这里更新了代码。不确定发生了什么变化。

也许一些图像会有所帮助。第一个图像的像素大小为 1，第二个像素大小为 2。请注意，图像会加倍并且仅填充画布的一半。

Edit2：我制作了一个网页，至少显示了我正在经历的一种奇怪行为。

活生生的例子

我有一个非常优化的网站，我想进一步优化。具体来说，我有一个相当大的徽标，目前是 png。标志是一个非常简单的形状。

我以前从未见过这样做过，但是有没有办法可以在我的 html 中使用一些矢量绘图代码在这个徽标的绘图中进行编码？我意识到 HTML5 可能是可能的，但是 HTML4 和当前的浏览器支持呢？

谢谢，

简·伊斯特比

我在预加载 HTML5 音频内容然后使用缓存中的内容而不是每次尝试重播音频时都尝试重新下载音频时遇到问题。

http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/

体验应该是当有人点击横幅时，它会弹出一个带有加载栏的广告。加载栏正在加载动画所需的所有图像。与此同时，音频也通过 DOM 中已经存在的音频标签加载（这很好）。加载完所有图像后，加载栏消失，用户可以继续。屏幕底部有 4 个按钮可供他们单击。单击其中一个播放音频文件，图像会播放与音频同步的翻书式动画。

音频标签：

播放按钮事件监听器：

问题是，在 javascript 中，每次我单击 play() 时，它都会重新加载音频文件然后播放它。我似乎无法让它在开始时加载一次音频并关闭存储在内存中的内容，而不是每次单击按钮时都尝试重新加载音频。

我尝试过使用 preload 和 autobuffer 属性，但似乎移动 safari 忽略了这些属性，因为无论我如何设置它们，行为总是相同的。我尝试过使用源标签和不同的文件格式……什么都没有。

有任何想法吗？

我正在尝试制作一个页面布局，其中包含在导航到时滑入和滑出的部分。每个部分都填满屏幕（100% 宽度/高度），并以基于百分比的值绝对定位。

在随附的示例中，有四个部分，位置如下：

其中 [a] 为 0 0，[b] 为 0 100%，[c] 为 100% 100%，[d] 为 200% 100%。

现在，为了实现导航，我将所有部分放置在一个 100% x 100% 绝对定位的溢出隐藏容器中。当导航到某个部分时，容器的“顶部”和“左侧”值会动画到该部分偏移量的负值，例如，如果选择 [d]，则容器会动画到 -200% -100%。

奇怪的行为比比皆是！当导航到 0% 偏移量（向左或向上）时，转换工作正常。然而，其他组合（即负偏移）会导致看似不合逻辑（但始终如一）的怪癖。

亲自查看：http: //www.doronassayas.com/ypsite

这是一个摘要：

• [c] 和 [d] 到 [a] 或 [b] 都可以正常工作。
• [a] 到 [b] 和 [a] 到 [d]：跳到结尾，跳回到开头并开始动画。
• [a] 和 [b] 到 [c] 是最奇怪的 - 在过渡开始之前，整个主体（或其他一些高级元素？）弹出到一些无法通过 CSS 追踪的视觉偏移（在 Firebug 和其他开发中不可见工具）。因此，我们不是在 [c] 处结束，而是在 [d] 处结束（视觉上），即使 CSS 值清楚地表明我们应该在 [c] 处。执行随机操作（例如单击 Firebug 层次结构）会将视图重置到正确的位置。怎么回事？

在 Firefox 4、Chrome 10 和 Safari 5 中对此进行了测试，并且在所有浏览器中都出现了相同的行为，无论是使用 jQuery.animate() 还是Louis Remi 非常酷的 jQuery.transition 插件，它只是将 -prefix-transition 应用于容器调用 animate() 时使用新的偏移值。

陌生感的一致性让我很感兴趣。有任何想法吗？

非常感谢任何帮助。

有没有办法通过 HTML5 画布/视频 API 或 JavaScript 库获取画布图像（通过 canvas.toDataURL 或类似的东西导出）并将它们拼接在一起以在浏览器中制作视频？