Javascript动画(一)

本文深入解析JavaScript中定时执行代码的三种方式:setInterval、setTimeout及requestAnimationFrame。详细介绍了它们的工作原理,如何设置定时器,以及如何取消定时器。特别强调了requestAnimationFrame在动画绘制中的优势,确保了更平滑的动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Javascript定时执行代码块方式

number:setInterval(func, msec)

此方法是每隔一定的时间(msec参数值)调用一次传给它的函数(func参数),若不主动调用clearInterval(number)取消定时器,则会一直执行下去。

function animate(){
	// 需执行的代码
}
// 每秒60帧速率执行
let timerId = setInterval(animate, 1000 / 60);
// 取消定时器
clearInterval(timerId)

number:setTimeout(func, msec)

此方法是在一定时间(msec参数)后,调用一次传给它的函数(func参数),若需重复执行,则需在重复调用setTimeout

function animate(){
	let start = +new Date(), end;
	// 需执行的代码
	
	end = +new Date()
	// 重复执行
	setTimeout(animate, 1000 / 60 - (end - start));		// 做次时间上的补偿,使之更接近1秒60帧的速率
}
animate()

提示: setInterval与setTimeout中的msec参数可不填写或填写不为正数的值,意思是使浏览器以它所允许的最小时间间隔来调用func函数。

HTML5 出的number:requestAnimationFrame(func)

setInterval与setTimeout都是开发者告诉浏览器,在某个大致的时间点上执行代码。若是在绘制动画,我们其实并不清楚绘制下一帧的最佳时机,相反,浏览器肯定比我们更了解绘制下一帧动画的最佳时机。
requestAnimationFrame为此而生!
浏览器会在最佳时机调用func函数,若需一直执行下去,则需在func内再次调用requestAnimationFrame(func)
,浏览器会给func传递一个从程序启动(页面载入)到调用func函数时的时间间隔(chrome浏览器)

let handleId = 0;
let lasttime = undefined;
// 浏览器会给函数传递一个从程序启动(页面载入)到调用animate函数时的时间间隔
function animate(time){
	if (lasttime === undefined) {		// 抛弃第一帧
		lasttime = time;
	} else {
		let dt = time - lasttime;	// 此帧距上一帧的时间间隔
		lasttime = time;
		// 需执行的代码
		
	}
	
	// 重复执行
	handleId  = requestAnimationFram(animate);		// 做次时间上的补偿,使之更接近1秒60帧的速率
}
// 使浏览在最佳时机执行第一帧动画
handleId  = requestAnimationFram(animate);

// ==== 取消 ====
cancelAnimationFrame(handleId);

提示: Chrome 浏览器调用动画回调函数的最大速率不超过每秒60次。

requestAnimationFrame的polyfill

(function (win) {
  'use strict';
  var startTime = +new Date();        //程序启动时的时间点
  win.requestAnimationFrame = (function () {
    return win.requestAnimationFrame ||
      win.webkitRequestAnimationFrame ||
      win.mozRequestAnimationFrame ||
      win.msRequestAnimationFrame ||
      function (callback) {
        var self = this,
          start, finish;
        return win.setTimeout(function () {
          start = +new Date();
          callback(start - startTime);        //将程序运行的总时长返回给回调函数
          finish = +new Date();
          self.timeout = 1000 / 60 - (finish - start);
        }, self.timeout);
      }
  })();

  win.cancelAnimationFrame = (function () {
    return win.cancelAnimationFrame ||
      win.webkitCancelAnimationFrame ||
      win.mozCancelAnimationFrame ||
      win.msCancelAnimationFrame ||
      function (id) {
        win.clearTimeout(id);
      }
  })();
})(window)
下一节:动起来了的小球
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值