三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

植树
作者:Neoxone    发表时间: 2011年01月21号,星期五     阅读:3,851 次

在闪吧看见一棵树,移植到canvas+javascript里来。

用setInterval让它动起来

补充:
除了setTimeout/setInterval这两个函数控制动画外。现在很多浏览器还提供了另一个函数requestAnimationFrame,这个函数接口所拥有的优势是:

对于一个侦中对DOM的所有操作,只进行一次Layout和Paint。
如果发生动画的元素被隐藏了,那么就不再去Paint。

不过这个方法的使用只类似于递归调用,并没有一个时间停顿,所以我们一般要根据记录时间间隔来决定动画的每一帧的绘制情况。
下面用requestAnimationFrame来完成上面的动画。由于requestAnimationFrame的兼容性,我们需要先写一个兼容性的方法(来自three.js):

  1. (function() {
  2.     /* 兼容requestAnimationFrame */
  3.     var lastTime = 0;
  4.     var vendors = ['ms', 'moz', 'webkit', 'o'];
  5.     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  6.         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  7.         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
  8.                                    || window[vendors[x]+'RequestCancelAnimationFrame'];
  9.     }
  10.     if (!window.requestAnimationFrame)
  11.         window.requestAnimationFrame = function(callback, element) {
  12.             var currTime = new Date().getTime();
  13.             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  14.             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  15.               timeToCall);
  16.             lastTime = currTime + timeToCall;
  17.             return id;
  18.         };
  19.  
  20.     if (!window.cancelAnimationFrame)
  21.         window.cancelAnimationFrame = function(id) {
  22.             clearTimeout(id);
  23.         };
  24. }());

标签: ,

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(