Javascript动画的实现原理浅析

前端技术 2023/09/09 JavaScript

假设有这样一个动画功能需求：把一个div的宽度从100px变化到200px。写出来的代码可能是这样的：

复制代码 代码如下:

<div id=\"test1\" style=\"width: 100px; height: 100px; background: blue; color: white;\"></div>
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);

本文地址：https://www.stayed.cn/item/23395

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案