js動畫演算法

⑴ js實現勻速下落動畫怎麼實現

/*
data:2022-11-17
author:lfp
move運動函數
dom--需要運動的對象
json--{width:100,height:100,left:100,top:100}
callback--回調函數 可調用自己 實現非同步動畫效果
*/
//主函數
function move(dom,json,callback){
//讓每一次動畫都是新的開始，防止出現動畫一直不停的運行
if(dom.timer)clearInterval(dom.timer);
var i=0;
var start=0;
//在對象中增加timer 便於控制他停止
dom.timer=setInterval(function(){
i++;
//循環每一個目標屬性添加動畫方法
for(var attr in json){
//獲取當前attr的屬性值 已經去除了px 還有 如果初始值是auto 用零代替
var cur=getStyle(dom,attr);
if(i==1)start=cur;
//拿到該屬性的目標值
var target=json[attr];
//設置分成10次增加增量 你可以根據需要修改
var speed=(target-start)/10;
console.log(speed+"====="+cur)
//如果沒有達到目標值就一直加
if(Math.abs(cur-target)>1){
dom.style[attr]=cur+speed+"px";
}else{
//達到目標值了就停止或者其他情況也停止
clearInterval(dom.timer);
//等停止了動畫再回調函數進行另外的操作
if(callback)callback.call(dom);
};
};
},45);
};
//配套函數
function getStyle(dom,attr){
var value="";
if(window.getComputedStyle){
value=window.getComputedStyle(dom,false)[attr];
}else{
value=dom.currentStyle[attr];
};
value=parseInt(value);
return value || 0;//如果你再樣式中沒有設置初始的值就會出現NaN 所以要用0來補充
};
function $(id){
//return document.getElementById(id);
return document.querySelector("#"+id);
};