原生JS封裝運動框架(二)

你們好,咱們又見面了,昨天咱們封裝了一個簡單的運動框架,今天 來完善一下,以下:

昨天咱們傳入了一堆的參數,我來改善一下,把name和value變成一個json傳進去,把dur,easing,fn三個參數變成一個完整的一個對象傳進去.

//dur,easing,fn
function move(obj,json,complete) {
// 用計時器前先清除,防止屢次點擊
　　clearInterval(obj.timer);
// 設置complete的默認值
//若是有就是用戶傳入的值,不然就是一個空對象
　　var complete=complete||{};
//時間:若是有就是用戶傳入的值,不然默認2000
　　complete.dur=complete.dur||2000;
//運動方式:若是有就是用戶傳入的值,不然默認勻速
　　complete.easing=complete.easing||"linear";
// 總步數=總時間÷計時器設定的時間
　　var count = parseInt(complete.dur / 30);
// 起始位置,先定義一個json
　　var start={};
// 總距離=傳入的距離-起始距離
　　var dis={};
// 由於傳入了多個起始目標和多個終點目標,因此先循環
　　for(name in json){
　　　　start[name]=parseFloat(setStyle(obj,name));
　　　　dis[name]=json[name]-start[name];
　　}
// 每步運動的距離=總距離÷總步數
//　　 var spen = dis[name] / count;
// 定義起始步數
　　var n = 0;
　　obj.timer = setInterval(function () {
　　n++;
　　for(name in json){
// 　　 console.log(name);

到這裏咱們要作一些簡單的運動方式,咱們能夠本身模擬數學函數

 

　　var a=n/count;
　　switch(complete.easing){
　　　　case "linear":
//起始位置+當前運動的距離*總距離÷總步數,由於數學中先乘後除或先除後乘結果都同樣
　　　　var cur=start[name] + a * dis[name];
　　　　break;
　　　　case "ease-in":
//勻加速=a*a*a;
　　　　var cur=start[name] + Math.pow(a,3) * dis[name];
　　　　break;
　　　　case "ease-out":
　　　　var a=1-n/count;
// 勻減速=1-a*a*a;
　　　　var cur=start[name] +(1-Math.pow(a,3)) * dis[name];
　　　　break;
　　};
// 判斷屬性是否是透明度,透明度不用加單位
　　if(name=='opacity'){
　　　　obj.style[name]=cur;
// 兼容IE低版本,IE的透明度是1到100
　　　　obj.style.filter='alpha('+cur*100+')';
　　}else {
　　　　obj.style[name] = cur + "px";
　　};
}

// 判斷運動是否完成
　　if (n == count) {
// 完成後清除定時器,中止運動
　　　　clearInterval(obj.timer);
// 判斷用戶是否傳入回調函數
　　　　complete.fn && complete.fn();
　　　};
　　}, 30);
};
// 獲取非行間樣式
function setStyle(obj,name){
// 考慮兼容性問題
　　if(obj.currentStyle){//不兼容火狐和谷歌
　　　　return obj.currentStyle[name];
　　　}else{
　　　　return getComputedStyle(obj,false)[name];//不兼容IE
　　};
};

原生JS咱們就封裝到這裏了,但咱們寫的這個運動框架不是萬能的,有須要仍是要本身想辦法的,再見了!