<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easing 03 Quartic</title>
</head>
<body onload="load()">
<script>
let Quartic = function() {
this.box = {
x: 0,
y: 80,
width: 30,
height: 20,
isToLeft: false,
d: 160,
t: 0,
t2: 0,
b: 0,
c: 400 - 30,
change: 400 - 30,
type: 0
}
this.canvas = null;
this.context = null;
}
Quartic.prototype.init = function(canvas) {
this.canvas = canvas;
this.context = canvas.getContext("2d");
}
Quartic.prototype.onFrame = function() {
this.box.t++;
if(!this.box.isToLeft)this.box.t2++;
// clear
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.font = "18pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("Quartic Easing", 20, 20);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("[Ease In]", 20, 48);
this.context.fillText("c * Math.pow(t / d, 4) + b", 20, 68);
let x = this.getEaseIn(this.box.t, this.box.c, this.box.d, this.box.b);
if(x >= this.canvas.width - this.box.width)x = this.canvas.width - this.box.width;
if(x <= 0)x = 0;
// draw
this.context.beginPath();
this.context.fillStyle = "blue";
this.context.fillRect(x, this.box.y, this.box.width, this.box.height);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("[Ease Out]", 20, 148);
this.context.fillText("-c * (Math.pow(t / d - 1, 4) - 1) + b ", 20, 168);
x = this.getEaseOut(this.box.t2, this.box.c, this.box.d, this.box.b);
if(x >= this.canvas.width - this.box.width) {
x = this.canvas.width - this.box.width;
this.box.isToLeft = true;
}
if(x <= 0) {
x = 0;
this.box.isToLeft = true;
}
this.context.beginPath();
this.context.fillStyle = "green";
this.context.fillRect(x, this.box.y + 100, this.box.width, this.box.height);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("[Ease InOut]", 20, 248);
this.context.fillText(" if(t /= d / 2 < 1) c / 2 * Math.pow(ct, 4) + b ", 20, 268);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("else -c / 2 * (Math.pow(t - 2, 4) - 2) + b", 20, 288);
x = this.getEaseInOut(this.box.t, this.box.c, this.box.d, this.box.b);
this.context.beginPath();
this.context.fillStyle = "yellow";
this.context.fillRect(x, this.box.y + 230, this.box.width, this.box.height);
this.context.font = "12pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("c - change, t - time, d - duration, b - begin", 20, 380);
this.box.x = x;
if (this.box.x < this.canvas.width - this.box.width) {
} else {
this.box.t = 0;
this.box.c = -this.box.change;
this.box.b = this.box.change;
this.box.isToLeft = false;
this.box.t2 = 0;
}
if (this.box.x <= 0) {
this.box.t = 0;
this.box.c = this.box.change;
this.box.b = 0;
this.box.isToLeft = false;
this.box.t2 = 0;
}
let es = this;
window.setTimeout(function(){es.onFrame();}, 1000/60);
}
Quartic.prototype.getEaseIn = function(t, c, d, b) {
return c * Math.pow(t / d, 4) + b;
}
Quartic.prototype.getEaseOut = function(t, c, d, b) {
return -c * (Math.pow(t / d - 1, 4) - 1) + b;
}
Quartic.prototype.getEaseInOut = function(t, c, d, b) {
let result = 0;
let ct = t / d / 2;
if(ct < 1) {
result = c / 2 * Math.pow(ct, 4) + b;
} else {
result = -c / 2 * (Math.pow(ct - 2, 4) - 2) + b;
}
return result;
}
function load(){
let canvas = document.createElement('canvas')
canvas.width = 500
canvas.height = 400
canvas.style.border = 'solid 1px black'
document.body.appendChild(canvas)
let es = new Quartic();
es.init(canvas);
es.box.c = es.box.change = canvas.width - es.box.width;
es.onFrame();
}
</script>
</body>
</html>