<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Easing 07 circular</title>
</head>
<body onload="load()">
<script>
let Circular = 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;
}
Circular.prototype.init = function(canvas) {
this.canvas = canvas;
this.context = canvas.getContext("2d");
}
Circular.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("Circular Easing", 20, 20);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("[Ease In]", 20, 48);
this.context.fillText("c * (1 - Math.sqrt(1 - (t /= d) * t)) + b", 20, 68);
let x = this.getEaseIn(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;
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.sqrt(1 - (t /= d - 1) * t) + 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 * (1 - Math.sqrt(1 - t * t)) + b ", 20, 268);
this.context.font = "14pt Calibri";
this.context.fillStyle = "black";
this.context.fillText("else c / 2 * (Math.sqrt(1 - (t-=2 ) * t) + 1) + 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);
}
Circular.prototype.getEaseIn = function(t, c, d, b) {
let ct = t / d;
return c * (1 - Math.sqrt(1 - ct * ct)) + b;
}
Circular.prototype.getEaseOut = function(t, c, d, b) {
let ct = t / d - 1;
return c * Math.sqrt(1 - ct * ct) + b;
}
Circular.prototype.getEaseInOut = function(t, c, d, b) {
let result = 0;
let ct = t / d / 2;
if(ct < 1) {
result = c / 2 * (1 - Math.sqrt(1 - ct * ct)) + b;
} else {
ct -= 2;
result = c / 2 * (Math.sqrt(1 - ct * ct) + 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 Circular();
es.init(canvas);
es.box.c = es.box.change = canvas.width - es.box.width;
es.onFrame();
}
</script>
</body>
</html>