Skip to content

Commit f043249

Browse files
caracal7caracal7
committed
0.0.1
1 parent 7989590 commit f043249

File tree

7 files changed

+207
-77
lines changed

7 files changed

+207
-77
lines changed

‎README.md

Lines changed: 83 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,48 @@
11
# fast-ease.js
22

3-
Fast and minimalistic javascript animation library
3+
Fast and minimalistic javascript animation library.
44

55
## Why?
66

77
Most animation libraries are overloaded with different functions and contain a lot of overhead, although in real life you often only need the ability to interpolate between two values, but at very high speed.
8-
This library is intended to be a lower level layer for more complex animation engines.
98

9+
Designed to be a lower level layer for more complex animation engines, this library **do one thing and do it well**.
1010

1111
## API
1212

1313
### Animate single value
1414

1515
```javascript
16-
const animationID = FastEase.animate(updateCallback, easingFunction, animationDuration, initialValue, finalValue, onDoneCallback);
16+
const animationID = FastEase.animate(
17+
updateCallback, // interpolatedValue => {};
18+
easingFunction, // FastEase.inOutElastic;
19+
animationDuration, // 3000
20+
initialValue, // -100
21+
finalValue, // 100
22+
onDoneCallback // animationID => {}
23+
);
1724
```
1825

19-
### Animate single value
26+
### Animate multiple values in a single loop
27+
28+
```javascript
29+
const animationID = FastEase.animateBatch(
30+
updateCallback, // (...interpolated) => {};
31+
easingFunction, // FastEase.inOutElastic;
32+
animationDuration, // 3000
33+
[
34+
[initialValue1, finalValue1], // [-100, 100]
35+
[initialValue2, finalValue2] // [1, 10]
36+
// ...
37+
],
38+
onDoneCallback // animationID => {}
39+
);
40+
```
41+
42+
### Stop single or batch animation
2043

2144
```javascript
22-
const animationID = FastEase.animateBatch(updateCallback, easingFunction, animationDuration, [
23-
[initialValue1, finalValue1],
24-
[initialValue2, finalValue2]
25-
// ...
26-
], onDoneCallback);
45+
FastEase.stop(animationID);
2746
```
2847

2948
## Easing functions
@@ -67,42 +86,76 @@ This library is intended to be a lower level layer for more complex animation en
6786
<html>
6887
<head>
6988
<script src="fast-ease.min.js"></script>
89+
<style>
90+
body {
91+
background: #444;
92+
}
93+
#testSingle, #testBatch, #testStop {
94+
position: absolute;
95+
width: 160px;
96+
height: 30px;
97+
top: 180px;
98+
left: calc(50% - 80px);
99+
100+
font-size: 10px;
101+
color: black;
102+
background: linear-gradient(#00FF8A, #00E050);
103+
padding: 0 7px;
104+
border: 1px solid black;
105+
border-radius: 5px;
106+
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.1);
107+
cursor: pointer;
108+
}
109+
#testBatch {
110+
top: 210px;
111+
background: linear-gradient(#00baff, #0082e0);
112+
}
113+
#testStop {
114+
top: 240px;
115+
background: linear-gradient(#ff8200, #e08d00);
116+
}
117+
</style>
70118
</head>
71119
<body>
72120
<button id="testSingle">Animate single value</button>
73-
<button id="testBatch" style="left:200px">Batch Animate "top" and "left"</button>
121+
<button id="testBatch">Batch animate "top" and "left"</button>
122+
<button id="testStop">Stop all animations</button>
74123

75124
<script>
76125
var ID1;
77126
var ID2;
78127

79-
// SINGLE VALUE
128+
function Stop() {
129+
// Stop all animations
130+
FastEase.stop(ID1);
131+
FastEase.stop(ID2);
132+
}
80133

81-
document.getElementById('testSingle').onclick = event => {
134+
function testSingle(event) {
82135
var rect = event.target.getBoundingClientRect();
83136
// Stop the previous animation on this element, if any
84-
cancelAnimationFrame(ID1);
137+
FastEase.stop(ID1);
85138
// Remember the animation ID and we can stop it at any time with it
86139
ID1 = FastEase.animate(
87140
// Callback. Called when the value changes
88141
top => event.target.style.top = top + 'px',
89142
// Easing function. You can use any of the 'FastEase.easings' or create your own.
90-
FastEase.easings.inOutQuad,
143+
FastEase.easings.inOutElastic,
91144
// Duration in milliseconds
92-
500,
145+
1500,
93146
// Initial value
94147
rect.top,
95148
// Final value
96-
~~(Math.random() * 300) + 1
149+
~~(Math.random() * 300) + 1,
150+
// Callback on animation finished
151+
id => console.log('Animation finished', id)
97152
);
98-
};
153+
}
99154

100-
// BATCH
101-
102-
document.getElementById('testBatch').onclick = event => {
155+
function testBatch(event) {
103156
var rect = event.target.getBoundingClientRect();
104157
// Stop the previous animation on this element, if any
105-
cancelAnimationFrame(ID2);
158+
FastEase.stop(ID1);
106159
// Remember the animation ID and we can stop it at any time with it
107160
ID2 = FastEase.animateBatch(
108161
// Callback for first and second parameter in single batch. Called when the value changes
@@ -111,17 +164,23 @@ This library is intended to be a lower level layer for more complex animation en
111164
event.target.style.left = left + 'px';
112165
},
113166
// Easing function. You can use any of the 'FastEase.easings' or create your own.
114-
FastEase.easings.inOutQuad,
167+
FastEase.easings.outBounce,
115168
// Duration in milliseconds
116-
500,
169+
1500,
117170
// Parameters batch
118171
[
119172
[rect.top, ~~(Math.random() * 300) + 1], // first parameter (initial and final value)
120173
[rect.left, ~~(Math.random() * 300) + 1] // second parameter (initial and final value)
121174
// ... next parameters
122-
]
175+
],
176+
// Callback on animation finished
177+
id => console.log('Animation finished', id)
123178
);
124179
};
180+
181+
document.getElementById('testStop').onclick = Stop;
182+
document.getElementById('testSingle').onclick = testSingle;
183+
document.getElementById('testBatch').onclick = testBatch;
125184
</script>
126185
</body>
127186
</html>

‎dist/fast-ease.esm.js

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,49 @@
11
// src/index.js
2-
function animate(callback, ease, duration = 1e3, from = 0, to = 300) {
2+
var running = {};
3+
var finish = {};
4+
var id = 0;
5+
var animate = (callback, ease, duration = 1e3, from, to, done) => {
6+
id++;
37
var start = performance.now();
48
var end = start + duration;
5-
var id;
9+
done && (finish[id] = done);
610
function frame(now) {
711
var delta = now - start;
812
if (delta >= duration)
9-
return cancelAnimationFrame(id);
13+
return cancelAnimationFrame(running[id]) || delete running[id] && delete finish[id] && done && done(id);
1014
callback(from + (to - from) * ease(delta / duration));
11-
id = requestAnimationFrame(frame);
15+
running[id] = requestAnimationFrame(frame);
1216
}
13-
return id = requestAnimationFrame(frame);
14-
}
15-
function animateBatch(callback, ease, duration = 1e3, batch) {
17+
running[id] = requestAnimationFrame(frame);
18+
return id;
19+
};
20+
var animateBatch = (callback, ease, duration = 1e3, batch, done) => {
21+
id++;
1622
var start = performance.now();
1723
var end = start + duration;
18-
var id;
1924
var interpolated = new Array(batch[0].length);
25+
done && (finish[id] = done);
2026
function frame(now) {
2127
var delta = now - start;
2228
if (delta >= duration)
23-
return cancelAnimationFrame(id);
29+
return cancelAnimationFrame(running[id]) || delete running[id] && delete finish[id] && done && done(id);
2430
var easing = ease(delta / duration);
2531
batch.forEach((value, index) => interpolated[index] = value[0] + (value[1] - value[0]) * easing);
2632
callback(...interpolated);
27-
id = requestAnimationFrame(frame);
33+
running[id] = requestAnimationFrame(frame);
34+
}
35+
running[id] = requestAnimationFrame(frame);
36+
return id;
37+
};
38+
var stop = (id2) => {
39+
cancelAnimationFrame(running[id2]);
40+
delete running[id2];
41+
if (finish[id2]) {
42+
var done = finish[id2];
43+
delete finish[id2];
44+
done(id2);
2845
}
29-
return id = requestAnimationFrame(frame);
30-
}
46+
};
3147
var easings = {};
3248
easings.linear = function(n) {
3349
return n;
@@ -193,11 +209,13 @@ easings.inOutElastic = function(n) {
193209
var src_default = {
194210
animate,
195211
animateBatch,
212+
stop,
196213
easings
197214
};
198215
export {
199216
animate,
200217
animateBatch,
201218
src_default as default,
202-
easings
219+
easings,
220+
stop
203221
};

‎index.html

Lines changed: 43 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -13,18 +13,15 @@
1313
<!-- Magic -->
1414
<script src="www/ui.js"></script>
1515

16-
<script src="dist/fast-ease.js"></script>
16+
<script type="module" src="src/iife.js"></script>
1717
<style>
1818
body {
1919
background: #444;
2020
}
21-
#testSingle, #testBatch {
21+
#testSingle, #testBatch, #testStop {
2222
position: absolute;
2323
width: 160px;
2424
height: 30px;
25-
top: 210px;
26-
left: calc(50% - 80px);
27-
2825
font-size: 10px;
2926
color: black;
3027
background: linear-gradient(#00FF8A, #00E050);
@@ -33,9 +30,13 @@
3330
border-radius: 5px;
3431
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.1);
3532
cursor: pointer;
33+
z-index: 100;
3634
}
3735
#testBatch {
38-
top: 240px;
36+
background: linear-gradient(#00baff, #0082e0);
37+
}
38+
#testStop {
39+
background: linear-gradient(#ff8200, #e08d00);
3940
}
4041
</style>
4142
</head>
@@ -83,11 +84,14 @@
8384
</section>
8485
</flex-cards>
8586

86-
<button id="testSingle">Animate single value</button>
87-
<button id="testBatch">Batch Animate "top" and "left"</button>
87+
8888

8989

9090
<main>
91+
<button id="testSingle" style="top:20px;left:100px;">Animate single value</button>
92+
<button id="testBatch" style="top:20px;left:300px;">Batch animate "top" and "left"</button>
93+
<button id="testStop" style="top:20px;left:500px;">Stop all animations</button>
94+
<br>
9195
<markdown-to-html url="README.md"></markdown-to-html>
9296
</main>
9397

@@ -101,29 +105,38 @@
101105
var ID1;
102106
var ID2;
103107

104-
document.getElementById('testSingle').onclick = event => {
105-
var rect = event.target.getBoundingClientRect();
108+
function Stop() {
109+
// Stop all animations
110+
FastEase.stop(ID1);
111+
FastEase.stop(ID2);
112+
}
113+
114+
function testSingle(event) {
115+
116+
console.log(event.target.style.top.slice(0, -2).split('.')[0])
117+
106118
// Stop the previous animation on this element, if any
107-
cancelAnimationFrame(ID1);
119+
FastEase.stop(ID1);
108120
// Remember the animation ID and we can stop it at any time with it
109121
ID1 = FastEase.animate(
110122
// Callback. Called when the value changes
111123
top => event.target.style.top = top + 'px',
112124
// Easing function. You can use any of the 'FastEase.easings' or create your own.
113-
FastEase.easings.outBounce,
125+
FastEase.easings.inOutElastic,
114126
// Duration in milliseconds
115-
500,
127+
1500,
116128
// Initial value
117-
rect.top,
129+
Number(event.target.style.top.slice(0, -2)),
118130
// Final value
119-
~~(Math.random() * 300) + 1
131+
~~(Math.random() * 600) - 300,
132+
// Callback on animation finished
133+
id => console.log('Animation finished', id)
120134
);
121-
};
135+
}
122136

123-
document.getElementById('testBatch').onclick = event => {
124-
var rect = event.target.getBoundingClientRect();
137+
function testBatch(event) {
125138
// Stop the previous animation on this element, if any
126-
cancelAnimationFrame(ID2);
139+
FastEase.stop(ID1);
127140
// Remember the animation ID and we can stop it at any time with it
128141
ID2 = FastEase.animateBatch(
129142
// Callback for first and second parameter in single batch. Called when the value changes
@@ -134,15 +147,22 @@
134147
// Easing function. You can use any of the 'FastEase.easings' or create your own.
135148
FastEase.easings.outBounce,
136149
// Duration in milliseconds
137-
500,
150+
1500,
138151
// Parameters batch
139152
[
140-
[rect.top, ~~(Math.random() * 300) + 1], // first parameter (initial and final value)
141-
[rect.left, ~~(Math.random() * 300) + 1] // second parameter (initial and final value)
153+
[Number(event.target.style.top.slice(0, -2)), ~~(Math.random() * 600) - 300], // first parameter (initial and final value)
154+
[Number(event.target.style.left.slice(0, -2)), ~~(Math.random() * 600) - 300] // second parameter (initial and final value)
142155
// ... next parameters
143-
]
156+
],
157+
// Callback on animation finished
158+
id => console.log('Animation finished', id)
144159
);
145160
};
161+
162+
document.getElementById('testStop').onclick = Stop;
163+
document.getElementById('testSingle').onclick = testSingle;
164+
document.getElementById('testBatch').onclick = testBatch;
165+
146166
</script>
147167
</body>
148168
</html>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "fast-ease",
3-
"version": "0.0.0",
3+
"version": "0.0.1",
44
"description": "Fast and minimalistic javascript animation library",
55
"main": "dist/fast-ease.cjs.js",
66
"browser": "dist/fast-ease.esm.js",

0 commit comments

Comments
 (0)