<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easing 01 Quadratic</title>
</head>
<body onload="load()">
<script>
let Quadratic = function() {
this.box = {
x: 0,
y: 80,
width: 30,
height: 20,
isToLeft: false,
d: 160,
t: 0,
b: 0,
c: 500 - 30,
change: 500 - 30,
type: 0
}
this.box2 = {
x: 0,
y: 80,
width: 30,
height: 20,
isToLeft: false,
d: 160,
t: 0,
b: 0,
c: 500 - 30,
change: 500 - 30,
type: 0
}
this.canvas = null;
this.context = null;
}
Quadratic.prototype.init = function(canvas) {
this.canvas = canvas;
this.context = canvas.getContext("2d");
}
Quadratic.prototype.onFrame = function() {
this.box.t++;
if(this.box2.isToLeft == false)this.box2.t++;
// clear
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.font = "18pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("Quadratic Easing", 20, 20);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("[Ease In]", 20, 48);
this.context.fillText("c * (t /= d) * t + 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 * (t /= d) * (t - 2) + b ", 20, 168);
x = this.getEaseOut(this.box2.t, this.box2.c, this.box2.d, this.box2.b);
if(x >= this.canvas.width - this.box2.width)x = this.canvas.width - this.box2.width;
if(x <= 0)x = 0;
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 * t * t + b ", 20, 268);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("else -c / 2 * ((--t) * (t-2) - 1) + b", 20, 288);
this.box2.x = x;
if (this.box2.x < this.canvas.width - this.box2.width) {
}
else {
this.box2.isToLeft = true;
}
if (this.box2.x <= 0) {
this.box2.isToLeft = true;
}
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.box2.t = 0;
this.box2.c = -this.box2.change;
this.box2.b = this.box2.change;
this.box2.isToLeft = false;
}
if (this.box.x <= 0) {
this.box.t = 0;
this.box.c = this.box.change;
this.box.b = 0;
this.box2.t = 0;
this.box2.c = this.box2.change;
this.box2.b = 0;
this.box2.isToLeft = false;
}
let es = this;
window.setTimeout(function(){es.onFrame();}, 1000/60);
}
Quadratic.prototype.getEaseIn = function(t, c, d, b) {
let ct = t / d;
return c * ct * ct + b;
}
Quadratic.prototype.getEaseOut = function(t, c, d, b) {
let ct = t / d;
return -c * ct * (ct - 2) + b;
}
Quadratic.prototype.getEaseInOut = function(t, c, d, b) {
let result = this.box.x;
let ct = t / d / 2;
if(ct < 1) {
result = c / 2 * ct * ct + b;
} else {
result = -c / 2 * ((--ct) * (ct-2) - 1) + 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 Quadratic();
es.init(canvas);
es.box.c = es.box.change = canvas.width - es.box.width;
es.box2.c = es.box2.change = canvas.width - es.box2.width;
es.onFrame();
}
</script>
</body>
</html>