easing animation

on pure js

by Maks M.

HTML

<canvas id="canvas" width="400" height="250"></canvas>

CSS

#canvas {
  border: 1px solid #000;
}

JavaScript

var canvas = document.getElementById('canvas');
var g = canvas.getContext('2d');
var w = canvas.width; //размеры канваса
var h = canvas.height;

var origX = 0; //x без преобразования
var x = 0; //функция easeInOutQuad
var x2 = 0; //функция easeOutCubic
var speed = 2; //скорость движения
var size = 50; //размер квадрата

function main() {
  g.clearRect(0, 0, w, h);
  g.fillStyle = "#F9A520";
  g.fillRect(x, 0, size, size); //рисуем 3 квадрата
  g.fillRect(x2, 100, size, size);
  g.fillRect(origX, 200, size, size);

  var maxX = w - size; //учитываем ширину квадрата

  origX += speed; //основная корда без эффектов

  x = easeInOutQuad(origX / maxX) * maxX;

  x2 = easeOutCubic(origX / maxX) * maxX;

  //инверсия после достижения предела
  if (origX > maxX || origX < 0) speed = -speed;
}

function easeInOutQuad(t) { //плавное ускорение и затухание
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

function easeOutCubic(t) { //плавное ускорение (односторонне)
  return Math.pow(t, 5); //t в 5 степени
}

setInterval(main, 1000 / 60);