使用requestAnimationFrame更好的实现javascript动画(转)

最新推荐文章于 2024-12-05 09:31:30 发布

dujunzhi

最新推荐文章于 2024-12-05 09:31:30 发布

阅读量127

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/dujunzhi/article/details/84406990

JavaScript 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现元素动画的方法，通过两种不同方式来控制元素的位置变化：一种是利用定时器逐步改变元素位置；另一种是采用requestAnimationFrame进行平滑过渡。这两种方法都实现了从初始位置到目标位置的动画效果。

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

详细说明：http://www.cnblogs.com/rubylouvre/archive/2011/08/22/2148793.html

function animate(element, name, from, to, time) {
	time = time || 800; // 默认0.8秒
	var style = element.style;

	var latency = 13; // 时间间隔 每13ms一次变化
	var count = parseInt(time / latency); // 变化的次数
	var step = Math.round((to - from) / count); // 步长 每一步的变化量
	var now = from;

	function go() {
		count--;
		now = count ? now + step : to;
		style[name] = now + 'px';
		if (count) {
			setTimeout(go, latency);
		}
	}

	style[name] = from + 'px';
	setTimeout(go, latency);
}

var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
function (callback) {
	setTimeout(callback, 1000 / 60);
};

function animate1(element, name, from, to, time) {
	time = time || 800; // 默认0.8秒
	var startTime = new Date;

	function go(timestamp) {
		console.log(timestamp)

		var progress = timestamp - startTime;
		if (progress >= time) {
			element.style[name] = to + 'px';
			return;
		}

		var now = (to - from) * (progress / time);
		element.style[name] = now.toFixed() + 'px';

		//console.log(now.toFixed())
		requestAnimationFrame(go);
	}

	element.style[name] = from + 'px';

	requestAnimationFrame(go);
}

//animate1(document.getElementById('holder'), 'marginLeft', 0, 180, 500)