107 lines
1.5 KiB
Markdown
107 lines
1.5 KiB
Markdown
|
|||
|
|
# ease
|
||
|
|
|
||
|
|
Easing functions (for canvas etc)
|
||
|
|
|
||
|
|
- linear
|
||
|
|
- inQuad
|
||
|
|
- outQuad
|
||
|
|
- inOutQuad
|
||
|
|
- inCube
|
||
|
|
- outCube
|
||
|
|
- inOutCube
|
||
|
|
- inQuart
|
||
|
|
- outQuart
|
||
|
|
- inOutQuart
|
||
|
|
- inQuint
|
||
|
|
- outQuint
|
||
|
|
- inOutQuint
|
||
|
|
- inSine
|
||
|
|
- outSine
|
||
|
|
- inOutSine
|
||
|
|
- inExpo
|
||
|
|
- outExpo
|
||
|
|
- inOutExpo
|
||
|
|
- inCirc
|
||
|
|
- outCirc
|
||
|
|
- inOutCirc
|
||
|
|
- inBack
|
||
|
|
- outBack
|
||
|
|
- inOutBack
|
||
|
|
- inBounce
|
||
|
|
- outBounce
|
||
|
|
- inOutBounce
|
||
|
|
|
||
|
|
## Aliases
|
||
|
|
|
||
|
|
- in-quad
|
||
|
|
- out-quad
|
||
|
|
- in-out-quad
|
||
|
|
- in-cube
|
||
|
|
- out-cube
|
||
|
|
- in-out-cube
|
||
|
|
- in-quart
|
||
|
|
- out-quart
|
||
|
|
- in-out-quart
|
||
|
|
- in-quint
|
||
|
|
- out-quint
|
||
|
|
- in-out-quint
|
||
|
|
- in-sine
|
||
|
|
- out-sine
|
||
|
|
- in-out-sine
|
||
|
|
- in-expo
|
||
|
|
- out-expo
|
||
|
|
- in-out-expo
|
||
|
|
- in-circ
|
||
|
|
- out-circ
|
||
|
|
- in-out-circ
|
||
|
|
- in-back
|
||
|
|
- out-back
|
||
|
|
- in-out-back
|
||
|
|
- in-bounce
|
||
|
|
- out-bounce
|
||
|
|
- in-out-bounce
|
||
|
|
|
||
|
|
## Example
|
||
|
|
|
||
|
|
```js
|
||
|
|
var ease = require('ease');
|
||
|
|
var requestAnimationFrame = require('raf');
|
||
|
|
var canvas = document.querySelector('canvas');
|
||
|
|
var ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
var stop = false;
|
||
|
|
function animate() {
|
||
|
|
if (stop) return;
|
||
|
|
requestAnimationFrame(animate);
|
||
|
|
draw();
|
||
|
|
}
|
||
|
|
|
||
|
|
var startx = 20;
|
||
|
|
var x = startx;
|
||
|
|
var destx = 300;
|
||
|
|
var y = 400 / 2;
|
||
|
|
var duration = 1000;
|
||
|
|
var start = Date.now();
|
||
|
|
var end = start + duration;
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
var now = Date.now();
|
||
|
|
if (now - start >= duration) stop = true;
|
||
|
|
var p = (now - start) / duration;
|
||
|
|
val = ease.inOutBounce(p);
|
||
|
|
x = startx + (destx - startx) * val;
|
||
|
|
canvas.width = canvas.width;
|
||
|
|
ctx.fillStyle = 'red';
|
||
|
|
ctx.arc(x, y, 10, 0, Math.PI * 2, false);
|
||
|
|
ctx.fill();
|
||
|
|
}
|
||
|
|
|
||
|
|
animate();
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
# License
|
||
|
|
|
||
|
|
MIT
|