时间版运动框架

来源：互联网发布：ubuntu 14.04 jdk1.6 编辑：程序博客网时间：2024/06/04 18:18

关于运动

速度的运动通过速度来控制元素的位移 / 折叠 / 淡入淡出
时间的简单运动通过时间来控制元素的位移 / 折叠 / 淡入淡出(jQuery)

时间的运动基于一些数学公式
以匀速运动例子==> 在路程的每一个点速度都一样.

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Author" content=" ">    <title>Document</title>    <style type="text/css">        *{margin: 0;padding: 0;}        a{text-decoration: none;}        ul,li{list-style: none;}        body{font-size: 14px;font-family: "微软雅黑";}        #box{width: 100px;height: 100px;background: red;position: relative;opacity: .2;filter:alpha(opacity=20);}    </style></head><body>    <div id="box"></div>    <script type="text/javascript">    /*    关于运动        速度的运动 通过速度来控制元素的 位移 / 折叠 / 淡入淡出        时间的运动 通过时间来控制元素的 位移 / 折叠 / 淡入淡出(jQuery)    时间的运动 基于一些数学公式 匀速运动 在路程的每一个点 速度都一样     */        var boxDom = document.getElementById("box");        //第一个问题 opacity        //第二个问题 要把两句话变成一句话 需要传入一个对象        //move(boxDom,{width:300,height:400},1500);        boxDom.onclick = function(){            // move(boxDom,"opacity",100,1500);            move(boxDom,{"left":300,"opacity":100,"width":200,"height":200},1500,function(){                move(this,{"left":0,"opacity":20,"width":100,"height":100},500)            });        }        function move(obj,json,time,callBack){            //一般定时器 结束后要清除            clearInterval(obj.timer);            var cur = {};            var end = {};            for(var attr in json){                if(attr=="opacity"){                    cur[attr] = getStyle(obj,attr)*100 || 0;                }else{                    cur[attr] = parseInt(getStyle(obj,attr)) || 0;                }                end[attr] = json[attr];            };            var nTime = new Date();            /*             S =  vt;===>linear匀速运动作为例子             St= (Tt-T0)/Time * (S-S0) + S0             */            // St= (Tt-T0)/Time * (S-S0) + S0 //== >St= Tt时间点 St的位移是多少.            obj.timer = setInterval(function(){                var sTime = new Date();                var prop = (sTime - nTime)/time;                //duration 持续时间                if(prop>=1){                    clearInterval(obj.timer);                    callBack&&callBack.call(obj);                    prop = 1;                }                var s = undefined;                for(var attr in json){                    s = prop * (end[attr]-cur[attr]) + cur[attr];                    if(attr=="opacity"){                        // IE                        obj.style.filter = "alpha(opacity="+s+")";                        obj.style[attr] = s/100 ;                    }else{                       obj.style[attr] = s + "px";                    }                }            },13);        }        function getStyle(obj,attr){            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];        }    </script></body></html>

图解:
这里写图片描述

添加其他运动曲线

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Author" content=" ">    <title>Document</title>    <style type="text/css">        *{margin: 0;padding: 0;}        a{text-decoration: none;}        ul,li{list-style: none;}        body{font-size: 14px;font-family: "微软雅黑";}        #box{width: 100px;height: 100px;background: red;position: relative;opacity: .2;filter:alpha(opacity=20); transition: transform 3s;}    </style></head><body>    <div id="box"></div>    <script type="text/javascript">        var boxDom = document.getElementById("box");        //第一个问题 opacity        //第二个问题 要把两句话变成一句话 需要传入一个对象        //move(boxDom,{width:300,height:400},1500);        boxDom.onclick = function(){            // move(boxDom,"opacity",100,1500);            move(boxDom,{"left":300,"opacity":100,"width":200,"height":200},1500,"easeBothStrong",function(){                move(this,{"left":0,"opacity":20,"width":100,"height":100},500,"easeBoth",function(){                    this.style.transform = "scale(.5)";                })            });        }        //mc ==> motion curve        function move(obj,json,time,mc,callBack){            //一般定时器 结束后要清除            clearInterval(obj.timer);            var cur = {};            var end = {};            for(var attr in json){                if(attr=="opacity"){                    cur[attr] = getStyle(obj,attr)*100 || 0;                }else{                    cur[attr] = parseInt(getStyle(obj,attr)) || 0;                }                end[attr] = json[attr];            };            var sTime = new Date();            /*                    t, b, c, d                    time             : current time==>(nTime-sTime)现在过去的时间                    beginning value  : cur                    change in value  : 变化量(end-cur)                    duration         : 持续时间 time             */            obj.timer = setInterval(function(){                // var sTime = new Date();                var t = new Date() - sTime;                //duration 持续时间                if(t>=time){                    t = time;                    clearInterval(obj.timer);                    callBack&&callBack.call(obj);                }                var s = undefined;                for(var attr in json){                    //var s = prop * (end[attr] - cur[attr]) + cur[attr];                    var b = cur[attr];                    var c = end[attr]-b;                    s = Tween[mc](t,b,c,time);                    if(attr=="opacity"){                        obj.style.filter = "alpha(opacity="+s+")";                        obj.style[attr] = s/100 ;                    }else{                       obj.style[attr] = s + "px";                    }                };            },13);            //数学公式            var Tween = {                linear: function (t, b, c, d){  //匀速                    return c*t/d + b;   //  t/d = prop;                },                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;                }            };        }        function getStyle(obj,attr){            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];        }    </script></body></html>

结合之前的速度版的,封装成Animate.js

/** * * @authors weikeduopupu * @date    2017-03-26 17:15:57 * @version $Id$ *//*    obj, 元素对象    json, 改变的属性attr 和值        {            width: 100, height:100,left:300,opacity:100.....        }    time,===>duration持续时间    mc,  运动曲线            linear,easeIn...    callBack */// 时间版(function(win){    function move(obj,json,time,mc,callBack){     //一般定时器 结束后要清除     clearInterval(obj.timer);     var cur = {};     var end = {};     for(var attr in json){         if(attr=="opacity"){             cur[attr] = getStyle(obj,attr)*100 || 0;         }else{             cur[attr] = parseInt(getStyle(obj,attr)) || 0;         }         end[attr] = json[attr];     };     var sTime = new Date();     /*             t, b, c, d             time             : current time==>(nTime-sTime)现在过去的时间             beginning value  : cur             change in value  : 变化量(end-cur)             duration         : 持续时间 time      */     obj.timer = setInterval(function(){         // var sTime = new Date();         var t = new Date() - sTime;         //duration 持续时间         if(t>=time){             t = time;             clearInterval(obj.timer);             callBack&&callBack.call(obj);         }         var s = undefined;         for(var attr in json){             //var s = prop * (end[attr] - cur[attr]) + cur[attr];             var b = cur[attr];             var c = end[attr]-b;             s = Tween[mc](t,b,c,time);             if(attr=="opacity"){                 obj.style.filter = "alpha(opacity="+s+")";                 obj.style[attr] = s/100 ;             }else{                obj.style[attr] = s + "px";             }         };     },13);     var Tween = {....};    }    win.AnimateTime = move;})(window);// 速度版(function(win){    function move(dom,json,callBack){        clearInterval(dom.timer);        dom.timer = setInterval(function(){            var mark = true;            for(var attr in json){                var cur = null;                var speed = null;                var target = json[attr];                if(attr == "opacity"){                    // 传入格式为 opacity: 1;的情况                    cur = getStyle(dom,attr)*100;                    target = target*100;                    speed = ( target - cur)*0.2;                }else{                    //如果没写 默认填充成0                    cur = parseInt(getStyle(dom,attr))||0;                    speed = (target - cur)*0.2;                }                //console.log(cur);                speed = speed>0?Math.ceil(speed):Math.floor(speed);                if(cur != target){                    if(attr == "opacity"){                        //IE opacity兼容问题                        dom.style.filter = "alpha(opacity="+(cur+speed)+")";                        dom.style[attr] = (cur + speed)/100;                    }else{                        dom.style[attr] = cur + speed + "px";                    }                    mark = false;                };            }            if(mark){                clearInterval(dom.timer);                callBack && callBack.call(dom);            }        },1000/30);    }    win.AnimateSpeed = move;})(window); function getStyle(obj,attr){     return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr]; } function $(dom){    if(typeof dom == "function"){        window.onload = dom;    }else if((typeof dom).toLowerCase() == "string"){        return document.querySelector(dom);    } }

引用测试

<!DOCTYPE html><html lang="en">    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <meta name="Author" content="">        <meta name="Keywords" content="">        <meta name="Description" content="">        <title>Document</title>        <style type="text/css">            * {margin: 0; padding: 0;}            a {text-decoration: none;}            ul,li {list-style: none;}            body {font-family: "Microsoft yahei";}            #box {width: 100px; height: 100px; position: relative; opacity: .1; background-color: #373F66; filter: alpha(opacity=10); transition: transform .5s; color: #fff;}            #box1 {width: 100px; height: 100px; position: relative; opacity: .1; background-color: #373F66; filter: alpha(opacity=10); margin-top: 20px; transition: transform .5s; color: #fff;}        </style>    </head><body>    <div id="box"></div>    <div id="box1"></div><script type="text/javascript" src="Animate.js"></script><script type="text/javascript">    $(function(){        var boxDom = $("#box");        var boxDom1 = $("#box1");        // console.log(boxDom1);        boxDom.onclick = function(){            AnimateSpeed(this,{"width":50,"height":50,"left":300,"opacity":1},function(){                AnimateSpeed(this,{"width":100,"height":100,"left":0,"opacity":.8},function(){                    this.style.transform = "rotate(360deg)";                    this.innerHTML = "速度版";                })            })        };        boxDom1.onclick = function(){            AnimateTime(this,{"width":50,"height":50,"left":300,"opacity":100},2000,"linear",function(){                AnimateTime(this,{"width":100,"height":100,"left":0,"opacity":80},1000,"elasticOut",function(){                    this.style.transform = "rotate(360deg)";                    this.innerHTML = "时间版";                })            })        }    });</script></body></html>

0 0