• Tween公式


    Tween公式 4个参数

    t:current time(当前时间)

    b:beginning value(初始值)

    c: change in value(变化量)

    d:duration(持续时间) return (目标点)

      1 var Tween = {
      2     linear: function (t, b, c, d){  //匀速
      3         return c*t/d + b;
      4     },
      5     easeIn: function(t, b, c, d){  //加速曲线
      6         return c*(t/=d)*t + b;
      7     },
      8     easeOut: function(t, b, c, d){  //减速曲线
      9         return -c *(t/=d)*(t-2) + b;
     10     },
     11     easeBoth: function(t, b, c, d){  //加速减速曲线
     12         if ((t/=d/2) < 1) {
     13             return c/2*t*t + b;
     14         }
     15         return -c/2 * ((--t)*(t-2) - 1) + b;
     16     },
     17     easeInStrong: function(t, b, c, d){  //加加速曲线
     18         return c*(t/=d)*t*t*t + b;
     19     },
     20     easeOutStrong: function(t, b, c, d){  //减减速曲线
     21         return -c * ((t=t/d-1)*t*t*t - 1) + b;
     22     },
     23     easeBothStrong: function(t, b, c, d){  //加加速减减速曲线
     24         if ((t/=d/2) < 1) {
     25             return c/2*t*t*t*t + b;
     26         }
     27         return -c/2 * ((t-=2)*t*t*t - 2) + b;
     28     },
     29     elasticIn: function(t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
     30         if (t === 0) { 
     31             return b; 
     32         }
     33         if ( (t /= d) == 1 ) {
     34             return b+c; 
     35         }
     36         if (!p) {
     37             p=d*0.3; 
     38         }
     39         if (!a || a < Math.abs(c)) {
     40             a = c; 
     41             var s = p/4;
     42         } else {
     43             var s = p/(2*Math.PI) * Math.asin (c/a);
     44         }
     45         return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
     46     },
     47     elasticOut: function(t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
     48         if (t === 0) {
     49             return b;
     50         }
     51         if ( (t /= d) == 1 ) {
     52             return b+c;
     53         }
     54         if (!p) {
     55             p=d*0.3;
     56         }
     57         if (!a || a < Math.abs(c)) {
     58             a = c;
     59             var s = p / 4;
     60         } else {
     61             var s = p/(2*Math.PI) * Math.asin (c/a);
     62         }
     63         return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
     64     },    
     65     elasticBoth: function(t, b, c, d, a, p){
     66         if (t === 0) {
     67             return b;
     68         }
     69         if ( (t /= d/2) == 2 ) {
     70             return b+c;
     71         }
     72         if (!p) {
     73             p = d*(0.3*1.5);
     74         }
     75         if ( !a || a < Math.abs(c) ) {
     76             a = c; 
     77             var s = p/4;
     78         }
     79         else {
     80             var s = p/(2*Math.PI) * Math.asin (c/a);
     81         }
     82         if (t < 1) {
     83             return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
     84                     Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
     85         }
     86         return a*Math.pow(2,-10*(t-=1)) * 
     87                 Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
     88     },
     89     backIn: function(t, b, c, d, s){     //回退加速(回退渐入)
     90         if (typeof s == 'undefined') {
     91            s = 1.70158;
     92         }
     93         return c*(t/=d)*t*((s+1)*t - s) + b;
     94     },
     95     backOut: function(t, b, c, d, s){
     96         if (typeof s == 'undefined') {
     97             s = 3.70158;  //回缩的距离
     98         }
     99         return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    100     }, 
    101     backBoth: function(t, b, c, d, s){
    102         if (typeof s == 'undefined') {
    103             s = 1.70158; 
    104         }
    105         if ((t /= d/2 ) < 1) {
    106             return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    107         }
    108         return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    109     },
    110     bounceIn: function(t, b, c, d){    //弹球减振(弹球渐出)
    111         return c - Tween['bounceOut'](d-t, 0, c, d) + b;
    112     },       
    113     bounceOut: function(t, b, c, d){
    114         if ((t/=d) < (1/2.75)) {
    115             return c*(7.5625*t*t) + b;
    116         } else if (t < (2/2.75)) {
    117             return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
    118         } else if (t < (2.5/2.75)) {
    119             return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
    120         }
    121         return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
    122     },      
    123     bounceBoth: function(t, b, c, d){
    124         if (t < d/2) {
    125             return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
    126         }
    127         return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
    128     }
    129 }
  • 相关阅读:
    js静态成员和实例成员
    js构造函数
    js创建对象
    js演示面向对象
    JavaScript特点
    像素鸟游戏
    图片瀑布流
    微信聊天模拟
    飞机游戏动画特效
    SpringBoot 核心理论
  • 原文地址:https://www.cnblogs.com/webskill/p/4164686.html
Copyright © 2020-2023  润新知