这篇文章主要介绍了Javascript动画的实现原理浅析,本文用两个实例来解释Javascript动画的实现原理,需要的朋友可以参考下
假设有这样一个动画功能需求：把一个div的宽度从100px变化到200px。写出来的代码可能是这样的：
复制代码 代码如下:
function animate1(element, endValue, duration) {
var startTime = new Date(),
startValue = parseInt(element.style.width),
step = 1;
var timerId = setInterval(function() {
var nextValue = parseInt(element.style.width) + step;
element.style.width = nextValue + 'px';
if (nextValue >= endValue) {
clearInterval(timerId);
// 显示动画耗时
element.innerHTML = new Date - startTime;
}
}, duration / (endValue - startValue) * step);
}
animate1(document.getElementById('test1'), 200, 1000);
以上就是Javascript动画的实现原理浅析的详细内容，更多请关注0133技术站其它相关文章！
未经允许不得转载：0133技术站首页 » JavaScript 教程
