• JS 运动框架完整版


    function move( obj , mJson , time , wangdachui , cv ){

    var startVal = {};
    var endVal = {};
    var startTime = new Date();
    cv = cv || 'linear';

    for (var key in mJson )
    {
    startVal[key] = parseInt( getStyle(obj,key) );
    endVal[key] = parseInt( mJson[key] );
    };
    var timer = setInterval(function(){

    var t = new Date() - startTime;
    var d = time;
    if ( t >= d )
    {
    t = d;
    clearInterval( timer );
    }
    for ( var key in mJson )
    {
    var b = startVal[key];
    var c = endVal[key] - b;
    var s = Tween[cv]( t , b , c , d );
    obj.style[key] = s + 'px';
    }
    if ( t == d )
    {
    wangdachui && wangdachui.call(obj);
    }
    },13);
    function getStyle( obj , attr ){
    return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[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;
    },
    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;
    }
    };

  • 相关阅读:
    高级数据结构(一)----并查集
    分享复杂的线性动态规划问题(一)
    分享利用微信公众号做淘宝客返利机器人系统的3个技巧
    淘宝京东拼多多三合一cms源码怎么搭建优惠券网站
    微信公众号怎么查京东优惠券之3步搭建自己的找券机器人
    【职场提示】什么时间提出涨薪资更合适?
    项目管理之Git
    快速排序,数组去重
    信息安全风险治理——制度与标准篇
    浅谈漏洞管理实践
  • 原文地址:https://www.cnblogs.com/jessi/p/5472849.html
Copyright © 2020-2023  润新知