Google涂鸦的动画效果

Question

我一直想知道这些涂鸦是如何动画的。有人可以详细描述这些是如何动画的。我知道它使用JS来动画图像。但我想知道它是如何与用户点击和时间相互作用的，它也是跨浏览器兼容的，让我感到惊讶。

Answer 1

javascript中有许多跨浏览器兼容的方法可以执行简单的操作，例如

a。）移动元素（通过更改其样式位置属性）
b。）以另一种方式调整/编辑元素（切换图像，更改颜色等）
c。）检测鼠标悬停和点击（非常常见）

平滑动画通常由一些函数给出，该函数移动（或以其他方式改变）元素CSS属性少量。例如将位置从（1,1）改变为（1,2）。这一个像素变化看起来很流畅。然后，此函数被调用为一帧，每秒多次（每秒调用此函数15次，导致15 FPS（每秒帧数）动画）。

使用Javascript事件及其更改CSS属性的能力，以及每秒多次执行此操作，可以产生出色的跨浏览器动画：）