JavaScript中的缓慢动画

缓慢动画

一个box前一段时间运动的快,后一段时间运动的慢
和匀速动画的代码非常相似.只要将step从固定的值,变成变化的值.最难的是怎么判断box已经到达终点
先利用公式

//0.3是用来控制速度的
let step=(target-begin)*0.3
//           (500-497)*0.3=0.9,我的意思是当越靠近终点,step的值就会小于1.所以只要step的值小于1,我们就认定它已经靠近终点了
function linerAnimation (target,ele) {
        clearInterval(timer);
        timer=setInterval(function () {
            let begin = parseInt(ele.style.marginLeft) || 0;
            let step = (target - begin) * 0.3;
            begin += step;
            console.log(step);
            if (Math.abs(Math.floor(step)) <= 1) {
                begin = target;
                clearInterval(timer);
            }
            ele.style.marginLeft=begin+"px";
        },100);