当前位置：网站首页>JS slow animation

JS slow animation

2022-07-02 02:13:00 【MyDreamingCode】

One 、 Uniform animation

<body>
    <button> Click Move </button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            clearInterval(div.timer || null);
            div.timer = setInterval(function(){
                if(div.offsetLeft == 400) {
                    clearInterval(div.timer);
                }
                div.style.left = div.offsetLeft + 5 + 'px';
            }, 30)
        })
    </script>
</body>

Two 、 Slow motion animation

<body>
    <button> Click Move </button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            clearInterval(div.timer || null);
            div.timer = setInterval(function(){
                var step = (400 - div.offsetLeft) / 10;
                if(div.offsetLeft == 400) {
                    clearInterval(div.timer);
                }
                div.style.left = div.offsetLeft + step + 'px';
            }, 30)
        })
    </script>
</body>

3、 ... and 、 Encapsulate animation

explain ：1. obj For animated objects

2. destination To achieve the goal

3. callback Callback function called before the end of animation execution

function animate(obj, destination, callback) {
    clearInterval(obj.timer || null);
    obj.timer = setInterval(function(){
        var step = (destination - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft == destination) {
            if(callback) {
                callback();
            }
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 10)
}

原网站

版权声明
本文为[MyDreamingCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202152102425687.html