Java Script运动

一、运动概述

1. 运动原理：JavaScript 实现运动的原理，就是通过定时器不断改变元素的位置，直至到达目标点后停止运动。 通常，要让元素动起来，我们会通过改变元素的 left 和 top 值来改变元素的相对位置。
2. 运动三个步骤：

• 首先要用定时器来定时改变元素位置
• 然后实时获取元素位置
• 最后判断是否到达指定位置，如果达到则清除定时器

二、匀速运动
匀速运动实质上就是让元素在相同的时间内走相同的距离

<script>
        var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.onclick = function(){
            clearInterval(timer)
            var timer = setInterval(()=>{
                div.style.left = div.offsetLeft + 10 +'px'
            },100)
        }
    </script>

三、缓冲运动
缓冲运动的实质就是让元素每次运动的距离越来越小，让其运动速度变小

var btn = document.querySelector('button')
        var div = document.querySelector('div')
        btn.onclick = function(){
            var current = div.style.left
            var step = 10
            var target = 400
            clearInterval(timer)
            var timer = setInterval(()=>{
                step = (target-current)/10
                current += step
                div.style.left = current + 'px'
                if(current==target){
                    clearInterval(timer)
                }
            },100)
        }