javascript - jQuery .animate() に相当する純粋な JS

Question

純粋な JavaScript での次の jQuery animate に相当するものは何ですか?

function animate(element, position, speed) {
  $(element).animate({
    "top": position
  }, speed);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

setTimeoutおよびsetIntervalメソッドを使用して、純粋な JavaScript で複雑なアニメーションを実現できます。

こちらをご確認ください。

要素を移動する際の重要な部分は次のとおりです。

function move(elem) {
    var left = 0
    function frame() {
        left++  // update parameters
        elem.style.left = left + 'px' // show frame
        if (left == 100)  // check finish condition
            clearInterval(id)
    }
    var id = setInterval(frame, 10) // draw every 10ms
}

Answer 2

setInterval() メソッドはブラウザにとって重すぎるため、アニメーションには requestAnimationFrame() を使用することをお勧めします。次のコードは、このメソッドの使用例です。

let _btns = document.querySelectorAll('.btn'),
        _start = null;

let _loop = function (timestamp, duration, position, wrap) {
        if (!_start) _start = timestamp;
        let progress = (timestamp - _start) / duration;
        wrap.style.left = progress * position + 'px'
        if ( progress < 1 ) {
            window.requestAnimationFrame( function (timestamp){
                _loop(timestamp,duration,position,wrap);
            } );
        } else {
            _start = null;
        }
    },
    _animation = function () {
        const wrap = document.querySelector('.logo-2'),
            position = 300, // 300 pixels
            duration = 500; // 500 milliseconds
        _loop(0,duration,position,wrap);
    },

    _addEvents = function () {

        [].forEach.call(_btns,function(el){
            el.addEventListener('click', function (e) {
                _animation();
            })
        });

    },
    _init = function() {
        _addEvents();
    };

_init();

Answer 3

Element.animate() 関数は非常にシンプルで便利なようです。しかし、今のところ多くの互換性の問題があります。あなたはそれについて読むことができます：

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

requestAnmationFrame に慣れることをお勧めします。すべてのブラウザと互換性があり、非常に強力です。

https://javascript.info/js-animation