-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathease.ts
129 lines (99 loc) · 3.35 KB
/
ease.ts
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const { pow } = Math;
const { sqrt } = Math;
const { sin } = Math;
const { cos } = Math;
const { PI } = Math;
const c1 = 1.70158;
const c2 = c1 * 1.525;
const c3 = c1 + 1;
const c4 = (2 * PI) / 3;
const c5 = (2 * PI) / 4.5;
const bounceOut = (x: number) => {
const n1 = 7.5625;
const d1 = 2.75;
if (x < 1 / d1) {
return n1 * x * x;
}
if (x < 2 / d1) {
return n1 * (x -= 1.5 / d1) * x + 0.75;
}
if (x < 2.5 / d1) {
return n1 * (x -= 2.25 / d1) * x + 0.9375;
}
return n1 * (x -= 2.625 / d1) * x + 0.984375;
};
export const easeInQuad = (x: number) => x * x;
export const easeOutQuad = (x: number) => 1 - (1 - x) * (1 - x);
export const easeInOutQuad = (x: number) => (x < 0.5 ? 2 * x * x : 1 - pow(-2 * x + 2, 2) / 2);
export const easeInCubic = (x: number) => x * x * x;
export const easeOutCubic = (x: number) => 1 - pow(1 - x, 3);
export const easeInOutCubic = (x: number) => (x < 0.5 ? 4 * x * x * x : 1 - pow(-2 * x + 2, 3) / 2);
export const easeInQuart = (x: number) => x * x * x * x;
export const easeOutQuart = (x: number) => 1 - pow(1 - x, 4);
export const easeInOutQuart = (
x: number,
) => (x < 0.5 ? 8 * x * x * x * x : 1 - pow(-2 * x + 2, 4) / 2);
export const easeInQuint = (x: number) => x * x * x * x * x;
export const easeOutQuint = (x: number) => 1 - pow(1 - x, 5);
export const easeInOutQuint = (
x: number,
) => (x < 0.5 ? 16 * x * x * x * x * x : 1 - pow(-2 * x + 2, 5) / 2);
export const easeInSine = (x: number) => 1 - cos((x * PI) / 2);
export const easeOutSine = (x: number) => sin((x * PI) / 2);
export const easeInOutSine = (x: number) => -(cos(PI * x) - 1) / 2;
export const easeInExpo = (x: number) => (x === 0 ? 0 : pow(2, 10 * x - 10));
export const easeOutExpo = (x: number) => (x === 1 ? 1 : 1 - pow(2, -10 * x));
export const easeInOutExpo = (x: number) => {
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2;
};
export const easeInCirc = (x: number) => 1 - sqrt(1 - pow(x, 2));
export const easeOutCirc = (x: number) => sqrt(1 - pow(x - 1, 2));
export const easeInOutCirc = (
x: number,
) => (x < 0.5 ? (1 - sqrt(1 - pow(2 * x, 2))) / 2 : (sqrt(1 - pow(-2 * x + 2, 2)) + 1) / 2);
export const easeInBack = (x: number) => c3 * x * x * x - c1 * x * x;
export const easeOutBack = (x: number) => 1 + c3 * pow(x - 1, 3) + c1 * pow(x - 1, 2);
export const easeInOutBack = (
x: number,
) => (x < 0.5
? (pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2)) / 2
: (pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2);
export const easeInElastic = (x: number) => {
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return -pow(2, 10 * x - 10) * sin((x * 10 - 10.75) * c4);
};
export const easeOutElastic = (x: number) => {
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return pow(2, -10 * x) * sin((x * 10 - 0.75) * c4) + 1;
};
export const easeInOutElastic = (x: number) => {
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return x < 0.5
? -(pow(2, 20 * x - 10) * sin((20 * x - 11.125) * c5)) / 2
: (pow(2, -20 * x + 10) * sin((20 * x - 11.125) * c5)) / 2 + 1;
};
export const easeInBounce = (x: number) => 1 - bounceOut(1 - x);
export const easeInOutBounce = (
x: number,
) => (x < 0.5 ? (1 - bounceOut(1 - 2 * x)) / 2 : (1 + bounceOut(2 * x - 1)) / 2);