纯 JavaScript - 定时动画 - 高度一致？

Question

我创建了一个脚本，可以在 500 毫秒内为元素的高度设置动画。

定时器工作正常，但我正在努力使高度持续增加。

如何在时间段内平滑地动画高度？瞬间跳起来了。

我想用更智能的东西替换以下内容：

self.startHeight + 5

我想这与速度和经过的时间有关？

https://jsfiddle.net/zrm7xena/1/

(function () {
    'use strict';

    var animator = {};

    animator.endHeight = 200; //The end height
    animator.interval = null; //Create a variable to hold our interval
    animator.speed = 500; //500ms
    animator.startHeight = 0; //The start height

    animator.animate = function (el) {
        var self = this,
            startTime = Date.now(); //Get the start time

        this.interval = setInterval(function () {
            var elapsed = Date.now() - startTime, //Work out the elapsed time
                maxHeight = self.maxHeight; //Cache the max height 

            //If the elapsed time is less than the speed (500ms)
            if (elapsed < self.speed) {
                console.log('Still in the timeframe');

                //If the client height is less than the max height (200px)
                if (el.clientHeight < self.endHeight) {
                    self.startHeight = self.startHeight + 5; //Adjust the height
                    el.style.height = self.startHeight + 'px'; //Animate the height
                }
            } else {
                console.log('Stop and clear the interval');
                el.style.height = self.endHeight + 'px';
                clearInterval(self.interval);
            }
        }, 16); //60FPS
    };

    animator.animate(document.getElementById('box'));
}());

提前致谢！

Carorus 在下面给出了很好的答案。我已经更新了我的 jsfiddle，所以你可以看到最终的代码工作：

https://jsfiddle.net/zrm7xena/8/

Typhoon 发布了关于浏览器 FPS 的出色 link：

How to determine the best "framerate" (setInterval delay) to use in a JavaScript animation loop?

我可能会使用请求动画帧而不是 setInterval:

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

大家干杯！

Answer 1

您用于高度增量的硬编码 5 不允许动画在您设置的时间（500 毫秒）内完成整个最终高度（200），您需要根据计算高度增量关于最终高度，动画时间和间隔要保持一致：

(function () {
'use strict';

var animator = {};

animator.endHeight = 200; //The end height
animator.interval = null; //Create a variable to hold our interval
animator.speed = 500; //500ms
animator.startHeight = 0; //The start height
animator.interval = 16;

animator.animate = function (el) {
    var self = this,
    startTime = Date.now(); //Get the start time
    //calculating height variation
    self.deltaHeight = (animator.endHeight / animator.speed) * animator.interval;
    this.intervalId = setInterval(function () {
        var elapsed = Date.now() - startTime, //Work out the elapsed time
            maxHeight = self.maxHeight; //Cache the max height 

        //If the elapsed time is less than the speed (500ms)
        if (elapsed < self.speed) {
            console.log('Still in the timeframe');

            //If the client height is less than the max height (200px)
            if (el.clientHeight < self.endHeight) {
                self.startHeight = self.startHeight + self.deltaHeight; //Adjust the height
                el.style.height = self.startHeight + 'px'; //Animate the height
            }
        } else {
            console.log('Stop and clear the interval');
            el.style.height = self.endHeight + 'px';
            clearInterval(self.intervalId);
        }
    },  animator.interval); //60FPS
};

animator.animate(document.getElementById('box'));
}());

纯 JavaScript - 定时动画 - 高度一致？

Pure JavaScript - Timed Animation - Consistent height?

javascript

animation

timed