javascript - GSAP 绩效和结构

Question

GSAP 声称使用 HTML5 来执行出色的网络动画，但在他们关于 Greensock.com 的文章中明确表示它不使用 html5 中的 Canvas 框架。很明显，他们正在使用提供的 script 中的 Javascript ，但解释起来非常困惑。如果没有 Canvas ，他们还会以其他什么方式使用 html5 动画？如果他们确实使用纯 HTML5，这是否意味着 HTML5 动画比 CSS、jQuery 和 Javascript 快得多？

Answer 1

没有“html5 动画”这样的东西。

主要有 CSS3 动画(带有 CSS 过渡或 CSS 动画)和 Javascript 动画。

CSS3 动画通常优化得很好(有一些怪癖)但缺乏支持(旧 IE)和灵 active (你必须使用 JavaScript 来调整它们。)它们最适合悬停效果(带过渡)或基本动画。

JavaScript 转换过去基于 setInterval。一个定时循环，在这个循环中样式被改变。 JQuery 做到了这一点，但不是很好。

最近，引入了 Window.requestAnimationFrame() 来替换这些 setInterval 动画。支持有限(旧 IE)，性能一流(因为浏览器可以跳帧)，并且内部始终进行样式更新。

GSAP 所做的是使用此 requestAnimationFrame()，同时优化以减少重绘并添加许多有用的功能(反向、时间轴、交错......)在基本动画上，您可以使用 CSS3 或您自己的 JS 实现相同的性能代码...如果您知道该怎么做。

还有其他动画(canvas、svg...event webgl)但更专业。