0

要素の高さを 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 に関連する素晴らしいリンクを投稿しました。

JavaScriptアニメーションループで使用する最適な「フレームレート」(setInterval遅延)を決定する方法は?

setInterval の代わりにリクエスト アニメーション フレームを使用することになるでしょう。

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

乾杯！

4

1 に答える 1

2

高さの増分に使用しているハードコーディングされた 5 では、設定している時間 (500ms) 内にアニメーションが最終的な高さ全体 (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'));
}());
于 2016-04-21T22:06:12.600 に答える