javascript - 这个序列可以用 HTML5 完成吗？

Question

我当然不希望任何人实际为此提供可行的解决方案。我现在的问题很简单:可以这可以用 HTML5 canvas 完成吗，或者我会在尝试中转动我的轮子吗？

我是一名程序员，但我的强项是 PHP、JavaScript、传统 HTML 等。...我还没有机会使用 HTML5。

您在示例中看到的元素，我可以根据需要单独保存。因此，为了使 block 围绕中心旋转，我想我分别在适当的 Angular 落保存一个方形图像和 block 。然后旋转图像会适本地围绕中心旋转，除非您可以像 PhotoShop 一样在图像上设置原点。

KineticJS 库看起来也很适合这种类型的动画，但我会把建议留给你们这些优秀的人。

无论如何，这是我要复制的示例:

Answer 1

出于与@Diodeus 指出的相同原因，我不会提供任何图书馆推荐，但也许我可以帮助您选择过程。您现在可以通过多种方式在浏览器中完成您尝试做的事情:Canvas、SVG 和/或 CSS3 动画。

您上面的示例基本上是一些矢量 图形与中心“饼图计时器”上的渐变组合在一起。因此，我倾向于使用 S V G，特别是如果您希望允许与您的组件进行交互(每个 SVG 元素都可以有事件处理程序)。

canvas 元素更适合“逐个像素”地控制页面上的视觉内容。在 canvas 中添加内容不会增加 DOM(与 SVG 一样)，因此它通常会表现得更好，但是您会丢失诸如 native 事件处理程序和动画之类的东西，您最终将不得不重新实现这些内容靠自己。

More about the choice between SVG and Canvas, and an SVG animation example

一旦页面中有了组件，就需要对它们进行连接和动画处理。动画可以分解为:

1. 缩放
2. 背景颜色褪色
3. 轮换
4. “奇怪的渐变馅饼计时器”example with CSS3

这些可以通过 CSS 动画、SVG 动画或普通的 javascript 来完成。选择取决于您要制作动画的内容。如果我正在选择一个库，我会希望找到一个在可能的时候尝试使用更新的方法(SVG/CSS3)，而在不能的时候优雅地降级的库。

我会厌倦那些试图重新实现浏览器 native 可用的东西的库。更多地依赖浏览器而不是您自己的代码来执行动画等操作意味着浏览器可以优化其操作并使用硬件加速等功能来提高您的性能。

希望这对您选择图书馆有所帮助。请记住，图书馆总是来去匆匆，所以不要太依赖一个。理想的实现应该允许您轻松更换动画或显示代码，而无需触及其他不相关的部分。