缓慢动画
一个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);
