这个序列可以在HTML5中完成吗？

Question

我当然不希望任何人真正为此提供有效的解决方案.我在这一点上的问题很简单:可以这样用HTML5画布来完成,或者我会在尝试中纺我的车轮？

我是程序员,但我的强项是PHP,JavaScript,传统HTML等......我还没有机会玩HTML5.

您在示例中看到的元素,我可以根据需要单独保存.因此,为了使块围绕中心旋转,我想我分别在适当的角落中保存了一个正方形图像.然后旋转图像将适当地绕中心旋转,除非您可以在PhotoShop上设置图像的原点.

KineticJS库看起来也很适合这种类型的动画,但我会把这些建议留给你们.

无论如何,这是我想要复制的例子:

Answer 1

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

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

该canvas元素更适合对页面上的可视内容进行"逐像素"控制.添加内容canvas不会增加DOM(就像使用SVG一样),因此它通常会表现得更好,但是你会丢失像本机事件处理程序和动画这样的东西,你最终必须自己重新实现.

更多关于SVG和Canvas之间的选择,以及SVG动画示例

一旦你有了页面中的组件,他们就需要连线和动画.动画可以分解为:

1. 缩放
2. 背景颜色褪色
3. 回转
4. 使用CSS3的 "奇怪的渐变饼计时器" 示例

这些可以使用CSS动画,SVG动画或普通的旧javascript来完成.选择取决于你将要动画的内容.如果我选择了一个库,我会想找到一个试图在可能的时候使用更新的方法(SVG/CSS3),并在它不能时优雅地降级.

我会厌倦那些尝试重新实现浏览器中原生可用内容的库.更多地依靠浏览器而不是自己的代码来执行动画等操作意味着浏览器可以优化其操作并使用硬件加速等功能来提高性能.

希望这可以帮助您选择图书馆.请记住,图书馆总是来去匆匆,所以不要过于依赖图书馆.理想的实现应该允许您轻松交换动画或显示代码,而无需触及其他不相关的部分.