在所有方法之间选择动画

时间:2013-12-14 17:45:54

标签: javascript html css html5 css3

现在有各种各样的动画元素方法。 HTML5画布动画,CSS3动画和过渡,常规CSS动画,甚至创建新的HTML对象(http://uperduper.com/tronGame/index.html)。你如何在这些之间做出选择?有没有更快的?

1 个答案:

答案 0 :(得分:2)

毫无疑问,我确信,简单的答案是“它取决于”。有几个因素会影响动画技术的选择:

  1. 如你所述,表现肯定是一个因素。现代浏览器,尤其是移动设备上的浏览器,可以依靠基于硬件的图形加速来获得最佳性能。强制使用硬件加速的最可靠方法是谨慎使用CSS转换。如果你的目标是最大的性能,那么CSS3可能是最好的方法。

  2. 但并非所有浏览器都支持CSS3。例如,如果您的用户使用Internet Explorer 8访问您的站点,则CSS3转换和转换将不适用。您可以选择(a)为这些用户放弃动画(如果动画对您的网站不重要),或者(b)使用更普遍支持的其他技术。对于后者,基于JavaScript的动画(尤其是jQuery中的动画)可能是最好的方法。

  3. 当然,这些答案假设您可以通过JavaScript访问CSS3过渡和/或CSS(及相关)属性来满足您的目标。如果您考虑到复杂的动画,那可能不是真的。 (好吧,它可能在CSS和/或JavaScript中重现任何动画,但复杂性可能令人难以置信。)对于更复杂的动画,您可能希望查看画布动画(特别是如果您的源图稿是基于栅格的)甚至SVG动画(如果您的源是基于矢量的)。

  4. 这些选项并未考虑源或受众以外的其他因素。其他要问的问题包括开发人员的技能和经验。对JavaScript开发非常熟悉的人可能会更成功地使用JavaScript / jQuery方法,而更传统的(例如Flash)设计师可能会更熟悉canvas或SVG。