Javascript动画功能实例原理

前端之家收集整理的这篇文章主要介绍了Javascript动画功能实例原理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
感兴趣的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧。
假设有这样一个动画功能需求:把一个div的宽度从100px变化到200px。写出来的代码可能是这样的:

/**
 * 动画功能实例
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
<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);
原理是每隔一定时间增加1px,一直到200px为止。然而,动画结束后显示的耗时却不止1s(一般是1.5s左右)。究其原因,是因为setInterval并不能严格保证执行间隔。

有没有更好的做法呢?下面先来看一道小学数学题:

A楼和B楼相距100米,一个人匀速从A楼走到B楼,走了5分钟到达目的地,问第3分钟时他距离A楼多远?

匀速运动中计算某个时刻路程的计算公式为:路程 * 当前时间 / 时间 。所以答案应为 100 * 3 / 5 = 60 。

这道题带来的启发是,某个时刻的路程是可以通过特定公式计算出来的。同理,动画过程中某个时刻的值也可以通过公式计算出来,而不是累加得出:

/**
 * 动画功能实例
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
<div id="test2" style="width: 100px; height: 100px; background: red; color: white;"></div>
function animate2(element,startValue = parseInt(element.style.width);

    var timerId = setInterval(function() {
        var percentage = (new Date - startTime) / duration;

        var stepValue = startValue + (endValue - startValue) * percentage;
        element.style.width = stepValue + 'px';

        if (percentage >= 1) {
            clearInterval(timerId);
            element.innerHTML = new Date - startTime;
        }
    },13);
}

animate2(document.getElementById('test2'),1000);
这样改良之后,可以看到动画执行耗时最多只会有10几ms的误差。但是问题还没完全解决,在浏览器开发工具中检查test2元素可以发现,test2的最终宽度可能不止200px。仔细检查animate2函数代码可以发现:
percentage的值可能大于1,可以通过Math.min限制最大值解决

即使保证了percentage的值不大于1,只要endValue或startValue为小数,(endValue - startValue) * percentage的值也可能产生误差,因为Javascript小数运算的精度不够。其实我们要保证的只是最终值的准确性,所以在percentage为1的时候,直接使用endValue即可。

于是,animate2函数代码修改为:

/**
 * 动画功能实例
 *
 * @param 
 * @arrange (512.笔记) jb51.cc
 **/
function animate2(element,startValue = parseInt(element.style.width);

    var timerId = setInterval(function() {
        // 保证百分率不大于1
        var percentage = Math.min(1,(new Date - startTime) / duration);

        var stepValue;
        if (percentage >= 1) {
            // 保证最终值的准确性
            stepValue = endValue;
        } else {
            stepValue = startValue + (endValue - startValue) * percentage;
        }
        element.style.width = stepValue + 'px';

        if (percentage >= 1) {
            clearInterval(timerId);
            element.innerHTML = new Date - startTime;
        }
    },13);
}
还有最后一个疑问:setInterval的间隔为何设为13ms?原因是当下显示器的刷新率一般不超过75Hz(即每秒刷新75次,也就是每隔约13ms刷新一次),把间隔跟刷新率同步效果更好。 原文链接:https://www.f2er.com/js/527693.html

猜你在找的JavaScript相关文章