《JavaScript高效图形编程(修订版)》——6.8 使用画布创建动画

  1. 云栖社区>
  2. 博客>
  3. 正文

《JavaScript高效图形编程(修订版)》——6.8 使用画布创建动画

异步社区 2017-05-02 14:00:00 浏览806
展开阅读全文

本节书摘来自异步社区《JavaScript高效图形编程(修订版)》一书中的第6章,第6.8节,作者:【美】Raffaele Cecco著,更多章节内容可以访问云栖社区“异步社区”公众号查看

6.8 使用画布创建动画

使用JavaScript(或jQuery等JavaScript库)时,你可能习惯操作页面元素的位置、大小、图像或色彩,并看着它神奇地直接忘记其旧属性,而更新其新属性。按这个逻辑,如果我们不断增加一个元素的x和y位置,可以创建将此元素移到页面右下角的动画效果。但如果我们在画布上以这种方式移动方块的话,结果可能让我们很意外(如图6-13所示):

screenshot

请记住画布是一个低级别和立即模式系统:每次循环在屏幕上绘制的另一个矩形,都会叠加于上次迭代的矩形之上。这样的结果是一个大涂鸦,而不是一个动画。为创建在页面上移动的方块动画,我们需要稍稍多做点工作:

1.存储方块的初始(x,y)位置;

2.清除画布;

3.更新方块的(x,y)位置;

4.在新的位置绘制方块;

5.等待一小会儿;

6.循环回到第2步。

基本上所有的位图动画系统都在幕后做类似上述循环的操作。在某些情况下第2步是可选的。例如,如果背景完全被实色、渐变或位图图像填补,那就没有必要清除它。第5步是必要的,这使用户有机会看到动画,并让浏览器有时间去做其他事情,否则该浏览器将立即被冻结。通常情况下大约20~50毫秒的延迟比较合适。以下页面会呈现我们想要的效果:
screenshot

网友评论

登录后评论
0/500
评论
异步社区
+ 关注