Just Do & Write it !

0%

Easing公式，JavaScript实现延迟动画

Posted on Edited on In

好久没更新了，回到老家连抢红包都心塞的网络迫使回归原始生活一段时间，所以连一篇恭贺新禧的文章都懒得发了。

在过去的马年最后几天，博主在无所事事的时候研究了一下各种各样的easing的公式（博主数学学得烂不要问原理，我只是搬运工）。

去看看效果

简单的说说这个公式是怎么运用的，分别用4个参数起含义可以看代码的注释，后b、c、d参数基本是固定的值。博主简单举个栗子：

现在有一个直线动画，由0px（参数b）到800px（参数c）拆分成1000次运算（参数d），当参数t由0逐渐接近参数d的时候，得到的值也会由参数b逐渐接近参数c（也就是说由0px逐渐接近800px）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
 * @param  {Number} t [当前时间点]
 * @param  {Number} b [开始数值，一般都是0]
 * @param  {Number} c [最大的值]
 * @param  {Number} d [时间]
 * @return {Number}   [算出来的值咯]
 */
var EasingMatch = {
        linearIn: function(t, b, c, d) {
            return c * t / d + b;
        },
        quinticIn: function(t, b, c, d) {
            t /= d;
            return c * t * t * t * t * t + b;
        },
        quinticOut: function(t, b, c, d) {
            t /= d;
            t--;
            return c * (t * t * t * t * t + 1) + b;
        },
        quinticIO: function(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * t * t * t * t * t + b;
            t -= 2;
            return c / 2 * (t * t * t * t * t + 2) + b;
        },
        quadraticIn: function(t, b, c, d) {
            t /= d;
            return c * t * t + b;
        },
        quadraticOut: function(t, b, c, d) {
            t /= d;
            return -c * t * (t - 2) + b;
        },
        quadraticIO: function(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * t * t + b;
            t--;
            return -c / 2 * (t * (t - 2) - 1) + b;
        },
        sinusoidalIn: function(t, b, c, d) {
            return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
        },
        sinusoidalOut: function(t, b, c, d) {
            return c * Math.sin(t / d * (Math.PI / 2)) + b;
        },
        sinusoidalIO: function(t, b, c, d) {
            return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b;
        },
        cubicIn: function(t, b, c, d) {
            t /= d;
            return c * t * t * t + b;
        },
        cubicOut: function(t, b, c, d) {
            t /= d;
            t--;
            return c * (t * t * t + 1) + b;
        },
        cubicIO: function(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * t * t * t + b;
            t -= 2;
            return c / 2 * (t * t * t + 2) + b;
        },
        expIn: function(t, b, c, d) {
            return c * Math.pow(2, 10 * (t / d - 1)) + b;
        },
        expOut: function(t, b, c, d) {
            return c * (-Math.pow(2, -10 * t / d) + 1) + b;
        },
        expIO: function(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
            t--;
            return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
        },
        quartiIn: function(t, b, c, d) {
            t /= d;
            return c * t * t * t * t + b;
        },
        quartiOut: function(t, b, c, d) {
            t /= d;
            t--;
            return -c * (t * t * t * t - 1) + b;
        },
        quartiIO: function(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return c / 2 * t * t * t * t + b;
            t -= 2;
            return -c / 2 * (t * t * t * t - 2) + b;
        },
        circularIn: function(t, b, c, d) {
            t /= d;
            return -c * (Math.sqrt(1 - t * t) - 1) + b;
        },
        circularOut: function(t, b, c, d) {
            t /= d;
            t--;
            return c * Math.sqrt(1 - t * t) + b;
        },
        circularIO: function(t, b, c, d) {
            t /= d / 2;
            if (t < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
            t -= 2;
            return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
        }
    };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//简单使用例子
var curTime  = 0,
makeAnimation = function(left) {
    $('#animationBall').css({
        left: (left + 10) + 'px'
    });
    if (left >= maxWidth){
        curTime = 0;
    }
    setTimeout(function(){
        curTime++;
        makeAnimation(EasingMatch.circularIO(curTime, 0, maxWidth, 800));
    }, 0);
};
makeAnimation(EasingMatch.circularIO(curTime, 0, maxWidth, 800));

如果不想使用Js的话，下面送你们一个CSS的……

CSS3 公式