運動框架move.js

不廢話上代碼

//獲取非行間樣式
function getStyle(obj,name) {
    return (obj.currentStyle || getComputedStyle(obj,false))[name]; 
}
// 運動MOVE開始
function (obj,json,options) {
    // 1、整理options
    options = options || {};
    options.duration = options.duration || 500;
    options.easing = options.easing || 'ease-out';
    // 2、清理obj的定時器
    clearInterval(obj.timer);
    // 3、整理 start & dis & count
    var start = {};
    var dis = {};
    for (var name  in json) {
        start[name] = parseFloat(getStyle(obj,name));
        dis[name] = json[name] - start[name];
    }
    var count = Math.round(options.duration/30);
    var n = 0;
    
    // 4、做事開定時器
    obj.timer = setInterval(function(){
        // n++
        n++;
        for (var name in json) {
            //判斷運動種類 
            switch (options.easing){
                case 'linear' :
                    var a = n / count;
                    var cur = start[name] + dis[name]*a;
                    break;
                case 'ease-in':
                    var a = n / count;
                    var cur = start[name] + dis[name]*(a*a*a);
                    break;
                case 'ease-out':
                    var a = 1 - n / count;
                    var cur = start[name] + dis[name]*(1-a*a*a);
                    break;
                
            }
            //判斷name是否是opacity,是直接賦cur
            if (name == 'opacity') {
                obj.style.opacity = cur;
                obj.style.fliter = 'alpha(opacity:'+cur*100+')';
            } else {
                obj.style[name] = cur + 'px';   
            }
        }
        
        //判斷什么是定時器停止并回調(diào)函數(shù)
        if (n == count) {
            clearInterval(obj.timer);
            options.complete && options.complete();
        }
    },30);

}









最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,288評論 25 708
  • 嗯哼嗯哼蹦擦擦~~~ 轉(zhuǎn)載自:https://github.com/Tim9Liu9/TimLiu-iOS 目錄 ...
    philiha閱讀 5,017評論 0 6
  • 匆匆而行 無暇回望 某天 心覺累倦 沉心駐足 回首間 ...
    夏風里的青芒閱讀 160評論 0 0
  • 你是否也“忙、茫、盲”? 忙,是我們一生的課題。每個人忙的事務有所不同,但有一點是相同的;不能碌碌無為地茫;要忙就...
    心語春天閱讀 486評論 0 1
  • 文字的力量,說弱也弱,說強大也強大,從魯迅先生為救國棄醫(yī)從文,還有到毛爺爺?shù)?quot;不光槍桿子要硬、筆桿子也要硬"諄諄教...
    區(qū)白露閱讀 354評論 1 0