javascript的运动

沽名钓誉不过而而
154 阅读8分钟

基础运动（基于运动值）

运动基础

function startMove() {
    clearInterval(iTimer);

    iTimer = setInterval(function() {
        if (oDiv.offsetLeft == 500) {
            clearInterval(iTimer);
        } else {
            oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
        }	
    }, 30);
}

封装目标值和运动速度值

function startMove(iTarget, iSpeed) {
    clearInterval(iTimer);
    iTimer = setInterval(function() {
        if (oDiv1.offsetLeft == iTarget) {
            clearInterval(iTimer);
        } else {
            oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
        }

    }, 30);
}

多物体的运动

function startMove(obj, attr, iTarget, iSpeed) {
    clearInterval(obj.iTimer);
    var iCur = 0;

    obj.iTimer = setInterval(function () {
        if (attr == 'opacity') {
            iCur = Math.round(css(obj, 'opacity') * 100);
        } else {
            iCur = parseInt(css(obj, attr));
        }
        if (iCur == iTarget) {
            clearInterval(obj.iTimer);
        } else {
            if (attr == 'opacity') {
                obj.style.opacity = (iCur + iSpeed) / 100;
                obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
    }, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

多值同时运动

function startMove(obj, json, iSpeed) {
    clearInterval(obj.iTimer);
    var iCur = 0;

    obj.iTimer = setInterval(function() {

        var iBtn = true;

        for ( var attr in json ) {

            //什么时候停止定时器？所有属性都运动到了目标点的时候

            var iTarget = json[attr];

            if (attr == 'opacity') {
                iCur = Math.round(css( obj, 'opacity' ) * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }
            if (iCur != iTarget) {
                iBtn = false;
                if (attr == 'opacity') {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }
        }
        //在这里来看下，所有属性是不是都到了目标点
        if (iBtn) {
            clearInterval(obj.iTimer);
        }

    }, 30);
}

function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

运动回调

function startMove(obj, json, iSpeed, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;

    obj.iTimer = setInterval(function() {

        var iBtn = true;

        for ( var attr in json ) {

            var iTarget = json[attr];

            if (attr == 'opacity') {
                iCur = Math.round(css( obj, 'opacity' ) * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

            if (iCur != iTarget) {
                iBtn = false;
                if (attr == 'opacity') {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

        }

        if (iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

    }, 30);
}
	
function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

弹性运动

function startMove(obj,iTarget){
    clearInterval(timer);
    timer = setInterval(function(){
        iSpeed += (iTarget - obj.offsetLeft)/6;
        iSpeed *= 0.75;
        if( Math.abs(iSpeed)<=1 && Math.abs(iTarget - obj.offsetLeft)<=1 ){
            clearInterval(timer);
            obj.style.left = iTarget+"px";
            iSpeed = 0;
        }
        else{
            obj.style.left = oDiv.offsetLeft + iSpeed + 'px';
        }
        document.title = obj.style.left + ',' + iSpeed;
    },30);
}

拖拽甩出碰撞弹窗

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            var disX = 0;
            var disY = 0;
            var prevX = 0;
            var prevY = 0;
            var iSpeedX = 0;
            var iSpeedY = 0;
            var timer = null;
            oDiv.onmousedown = function(ev) {
                var ev = ev || window.event;
                disX = ev.clientX - oDiv.offsetLeft;
                disY = ev.clientY - oDiv.offsetTop;
                prevX = ev.clientX;
                prevY = ev.clientY;
                document.onmousemove = function(ev) {
                    var ev = ev || window.event;
                    oDiv.style.left = ev.clientX - disX + 'px';
                    oDiv.style.top = ev.clientY - disY + 'px';
                    iSpeedX = ev.clientX - prevX;
                    iSpeedY = ev.clientY - prevY;
                    prevX = ev.clientX;
                    prevY = ev.clientY;
                };
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    startMove();
                };
                return false;
            };
            function startMove() {
                clearInterval(timer);
                timer = setInterval(function() {
                    iSpeedY += 3;
                    var L = oDiv.offsetLeft + iSpeedX;
                    var T = oDiv.offsetTop + iSpeedY;
                    if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
                        T = document.documentElement.clientHeight - oDiv.offsetHeight;
                        iSpeedY *= -1;
                        iSpeedY *= 0.75;
                        iSpeedX *= 0.75;
                    } else if (T < 0) {
                        T = 0;
                        iSpeedY *= -1;
                        iSpeedY *= 0.75;
                    }
                    if (L > document.documentElement.clientWidth - oDiv.offsetWidth) {
                        L = document.documentElement.clientWidth - oDiv.offsetWidth;
                        iSpeedX *= -1;
                        iSpeedX *= 0.75;
                    } else if (L < 0) {
                        L = 0;
                        iSpeedX *= -1;
                        iSpeedX *= 0.75;
                    }
                    oDiv.style.left = L + 'px';
                    oDiv.style.top = T + 'px';
                }, 30);
            }
        };
    </script>
</head>

<body>
    <div id="div1"></div>
</body>

</html>

运动函数最终版本

function startMove(obj, json, endFn) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var bBtn = true
        for (var attr in json) {
            var iCur = 0;
            if (attr == 'opacity') {
                if (Math.round(parseFloat(getStyle(obj, attr)) * 100) == 0) {
                    iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                } else {
                    iCur = Math.round(parseFloat(getStyle(obj, attr)) * 100) || 100;
                }
            } else {
                iCur = parseInt(getStyle(obj, attr)) || 0;
            }
            var iSpeed = (json[attr] - iCur) / 20;
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if (iCur != json[attr]) {
                bBtn = false;
            }
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }
        }
        if (bBtn) {
            clearInterval(obj.timer);
            if (endFn) {
                endFn.call(obj);
            }
        }
    }, 30);
}
function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

时间运动的最终版本

 function startMove(obj, json, times, fx, fn) {
     if (typeof times == 'undefined') {
         times = 400;
         fx = 'linear';
     }
     if (typeof times == 'string') {
         if (typeof fx == 'function') {
             fn = fx;
         }
         fx = times;
         times = 400;
     } else if (typeof times == 'function') {
         fn = times;
         times = 400;
         fx = 'linear';
     } else if (typeof times == 'number') {
         if (typeof fx == 'function') {
             fn = fx;
             fx = 'linear';
         } else if (typeof fx == 'undefined') {
             fx = 'linear';
         }
     }
     var iCur = {};
     for (var attr in json) {
         iCur[attr] = 0;
         if (attr == 'opacity') {
             iCur[attr] = Math.round(getStyle(obj, attr) * 100);
         } else {
             iCur[attr] = parseInt(getStyle(obj, attr));
         }
     }
     var startTime = now();
     clearInterval(obj.timer);
     obj.timer = setInterval(function() {
         var changeTime = now();
         var t = times - Math.max(0, startTime - changeTime + times); //0到2000
         for (var attr in json) {
             var value = Tween[fx](t, iCur[attr], json[attr] - iCur[attr], times);
             if (attr == 'opacity') {
                 obj.style.opacity = value / 100;
                 obj.style.filter = 'alpha(opacity=' + value + ')';
             } else {
                 obj.style[attr] = value + 'px';
             }
         }
         if (t == times) {
             clearInterval(obj.timer);
             if (fn) {
                 fn.call(obj);
             }
         }
     }, 13);
     function getStyle(obj, attr) {
         if (obj.currentStyle) {
             return obj.currentStyle[attr];
         } else {
             return getComputedStyle(obj, false)[attr];
         }
     }
     function now() {
         return (new Date()).getTime();
     }
 }
var Tween = {
	linear: function (t, b, c, d){  //匀速
		return c*t/d + b;
	},
	easeIn: function(t, b, c, d){  //加速曲线
		return c*(t/=d)*t + b;
	},
	easeOut: function(t, b, c, d){  //减速曲线
		return -c *(t/=d)*(t-2) + b;
	},
	easeBoth: function(t, b, c, d){  //加速减速曲线
		if ((t/=d/2) < 1) {
			return c/2*t*t + b;
		}
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInStrong: function(t, b, c, d){  //加加速曲线
		return c*(t/=d)*t*t*t + b;
	},
	easeOutStrong: function(t, b, c, d){  //减减速曲线
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
		if ((t/=d/2) < 1) {
			return c/2*t*t*t*t + b;
		}
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线（弹动渐入）
		if (t === 0) { 
			return b; 
		}
		if ( (t /= d) == 1 ) {
			return b+c; 
		}
		if (!p) {
			p=d*0.3; 
		}
		if (!a || a < Math.abs(c)) {
			a = c; 
			var s = p/4;
		} else {
			var s = p/(2*Math.PI) * Math.asin (c/a);
		}
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线（弹动渐出）
		if (t === 0) {
			return b;
		}
		if ( (t /= d) == 1 ) {
			return b+c;
		}
		if (!p) {
			p=d*0.3;
		}
		if (!a || a < Math.abs(c)) {
			a = c;
			var s = p / 4;
		} else {
			var s = p/(2*Math.PI) * Math.asin (c/a);
		}
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},    
	elasticBoth: function(t, b, c, d, a, p){
		if (t === 0) {
			return b;
		}
		if ( (t /= d/2) == 2 ) {
			return b+c;
		}
		if (!p) {
			p = d*(0.3*1.5);
		}
		if ( !a || a < Math.abs(c) ) {
			a = c; 
			var s = p/4;
		}
		else {
			var s = p/(2*Math.PI) * Math.asin (c/a);
		}
		if (t < 1) {
			return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
					Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		}
		return a*Math.pow(2,-10*(t-=1)) * 
				Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
	},
	backIn: function(t, b, c, d, s){     //回退加速（回退渐入）
		if (typeof s == 'undefined') {
		   s = 1.70158;
		}
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	backOut: function(t, b, c, d, s){
		if (typeof s == 'undefined') {
			s = 3.70158;  //回缩的距离
		}
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	}, 
	backBoth: function(t, b, c, d, s){
		if (typeof s == 'undefined') {
			s = 1.70158; 
		}
		if ((t /= d/2 ) < 1) {
			return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		}
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	bounceIn: function(t, b, c, d){    //弹球减振（弹球渐出）
		return c - Tween['bounceOut'](d-t, 0, c, d) + b;
	},       
	bounceOut: function(t, b, c, d){
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
		}
		return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
	},      
	bounceBoth: function(t, b, c, d){
		if (t < d/2) {
			return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
		}
		return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
	}
}

transform运动函数

doMove(obj,  { "webkitTransform": "matrix(1,0,0,1,0,0)", "zIndex": "99" },800, "backOut2", callback)
function doMove(obj, json, d, fx, fn) {
    clearInterval(obj.iTimer);
    var startTime = +new Date();

    var j = {};

    for (var attr in json) {

        j[attr] = {};
        if (attr == 'opacity') {
            j[attr].b = Math.round(css(obj, attr) * 100);
            j[attr].c = json[attr] - j[attr].b;
        } else if (attr == "webkitTransform") {
            j[attr].scaleXb = Math.round(getMatrix(css(obj, attr), 0) * 100);
            j[attr].scaleYb = Math.round(getMatrix(css(obj, attr), 3) * 100);
            j[attr].translateXb = Math.round(getMatrix(css(obj, attr), 4));
            j[attr].translateYb = Math.round(getMatrix(css(obj, attr), 5));
            j[attr].scaleXc = getMatrix(json[attr], 0) * 100 - j[attr].scaleXb;
            j[attr].scaleYc = getMatrix(json[attr], 3) * 100 - j[attr].scaleYb;
            j[attr].translateXc = getMatrix(json[attr], 4) - j[attr].translateXb;
            j[attr].translateYc = getMatrix(json[attr], 5) - j[attr].translateYb;
        } else {
            j[attr].b = parseInt(css(obj, attr));
            j[attr].c = json[attr] - j[attr].b;
        }
        console.log(j);
    }

    //console.log(j);

    obj.iTimer = setInterval(function() {

        var t = +new Date() - startTime;
        if (t >= d) {
            t = d;
        }

        for (var attr in json) {
            if (attr == "webkitTransform") {
                var valueSX = Tween[fx](t, j[attr].scaleXb, j[attr].scaleXc, d) / 100;
                var valueSY = Tween[fx](t, j[attr].scaleYb, j[attr].scaleYc, d) / 100;
                var valueTX = Tween[fx](t, j[attr].translateXb, j[attr].translateXc, d);
                var valueTY = Tween[fx](t, j[attr].translateYb, j[attr].translateYc, d);
                obj.style[attr] = "matrix(" + valueSX + ",0,0," + valueSY + "," + valueTX + "," + valueTY + ")";

            } else {
                var value = Tween[fx](t, j[attr].b, j[attr].c, d);
                if (attr == 'opacity') {
                    obj.style.opacity = value / 100;
                    obj.style.filter = 'alpha(opacity=' + value + ')';
                } else {
                    obj.style[attr] = value + 'px';
                }
            }
        }

        if (t == d) {
            clearInterval(obj.iTimer);
            fn && fn();
        }

    }, 30);
}


function css(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

var Tween = {
    linear: function(t, b, c, d) { //匀速
        return c * t / d + b;
    },
    easeIn: function(t, b, c, d) { //加速曲线
        return c * (t /= d) * t + b;
    },
    easeOut: function(t, b, c, d) { //减速曲线
        return -c * (t /= d) * (t - 2) + b;
    },
    easeBoth: function(t, b, c, d) { //加速减速曲线
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t + b;
        }
        return -c / 2 * ((--t) * (t - 2) - 1) + b;
    },
    easeInStrong: function(t, b, c, d) { //加加速曲线
        return c * (t /= d) * t * t * t + b;
    },
    easeOutStrong: function(t, b, c, d) { //减减速曲线
        return -c * ((t = t / d - 1) * t * t * t - 1) + b;
    },
    easeBothStrong: function(t, b, c, d) { //加加速减减速曲线
        if ((t /= d / 2) < 1) {
            return c / 2 * t * t * t * t + b;
        }
        return -c / 2 * ((t -= 2) * t * t * t - 2) + b;
    },
    elasticIn: function(t, b, c, d, a, p) { //正弦衰减曲线（弹动渐入）
        if (t === 0) {
            return b;
        }
        if ((t /= d) == 1) {
            return b + c;
        }
        if (!p) {
            p = d * 0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    },
    elasticOut: function(t, b, c, d, a, p) { //正弦增强曲线（弹动渐出）
        if (t === 0) {
            return b;
        }
        if ((t /= d) == 1) {
            return b + c;
        }
        if (!p) {
            p = d * 0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
    },
    elasticBoth: function(t, b, c, d, a, p) {
        if (t === 0) {
            return b;
        }
        if ((t /= d / 2) == 2) {
            return b + c;
        }
        if (!p) {
            p = d * (0.3 * 1.5);
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p / (2 * Math.PI) * Math.asin(c / a);
        }
        if (t < 1) {
            return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) *
                Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
        }
        return a * Math.pow(2, -10 * (t -= 1)) *
            Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
    },
    backIn: function(t, b, c, d, s) { //回退加速（回退渐入）
        if (typeof s == 'undefined') {
            s = 1.70158;
        }
        return c * (t /= d) * t * ((s + 1) * t - s) + b;
    },
    backOut: function(t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 3.70158; //回缩的距离
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    backOut2: function(t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 1.2; //回缩的距离
        }
        return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
    },
    backBoth: function(t, b, c, d, s) {
        if (typeof s == 'undefined') {
            s = 1.70158;
        }
        if ((t /= d / 2) < 1) {
            return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
        }
        return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
    },
    bounceIn: function(t, b, c, d) { //弹球减振（弹球渐出）
        return c - Tween['bounceOut'](d - t, 0, c, d) + b;
    },
    bounceOut: function(t, b, c, d) {
        if ((t /= d) < (1 / 2.75)) {
            return c * (7.5625 * t * t) + b;
        } else if (t < (2 / 2.75)) {
            return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
        } else if (t < (2.5 / 2.75)) {
            return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
        }
        return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
    },
    bounceBoth: function(t, b, c, d) {
        if (t < d / 2) {
            return Tween['bounceIn'](t * 2, 0, c, d) * 0.5 + b;
        }
        return Tween['bounceOut'](t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
    }

}

function getMatrix(str, n) {
    var reg = /(\([^]*\))/;
    return str.match(reg)[0].slice(1, -1).split(",")[n];
}
avatar
文章
阅读
粉丝