Плавная анимация объекта

easing анимация javascript gamedev
Для создания красивой анимации объекта, например, перемещения его между двумя точками, можно использовать функции так называемого easing.

То есть, мы не просто инкрементируем координаты объекта, или его определенные свойства, вроде процента прозрачности/толщины линий/etc, а используем дополнительную функцию, которая расчитывает ускорение/затухание нашей анимации.

Дефолтный пример такой функции:
  1. function linear(t) {
  2.   return t;
  3. }
Где t - значение до 0 до 1, которое будет возвращаться измененным, с учетом нужного нам вида анимации.

Допустим, пусть у нас есть x = 0, которое движется со скоростью speed = 2 в положение endX = 10.
Для подсчета координаты с анимацией (coolX) достаточно данного кода:
  1. x = x + speed; //координата без преобразования
  2.  
  3. coolX = someFunc(x / endX) * endX; //с изингом
Оригинальная x необходима для вычисления новой.

Полный код:
  1. <canvas id="canvas" width="400" height="250"></canvas>
  1. #canvas {
  2.   border: 1px solid #000;
  3. }
  1. var canvas = document.getElementById('canvas');
  2. var g = canvas.getContext('2d');
  3. var w = canvas.width; //размеры канваса
  4. var h = canvas.height;
  5.  
  6. var origX = 0; //x без преобразования
  7. var x = 0; //функция easeInOutQuad
  8. var x2 = 0; //функция easeOutCubic
  9. var speed = 2; //скорость движения
  10. var size = 50; //размер квадрата
  11.  
  12. function main() {
  13.   g.clearRect(0, 0, w, h);
  14.   g.fillStyle = "#F9A520";
  15.   g.fillRect(x, 0, size, size); //рисуем 3 квадрата
  16.   g.fillRect(x2, 100, size, size);
  17.   g.fillRect(origX, 200, size, size);
  18.  
  19.   var maxX = w - size; //учитываем ширину квадрата
  20.  
  21.   origX += speed; //основная корда без эффектов
  22.  
  23.   x = easeInOutQuad(origX / maxX) * maxX;
  24.  
  25.   x2 = easeOutCubic(origX / maxX) * maxX;
  26.  
  27.   //инверсия после достижения предела
  28.   if (origX > maxX || origX < 0) speed = -speed;
  29. }
  30.  
  31. function easeInOutQuad(t) { //плавное ускорение и затухание
  32.   return t<0.5 ? 2*t*t : -1+(4-2*t)*t;
  33. }
  34.  
  35. function easeOutCubic(t) { //плавное ускорение (односторонне)
  36.     return Math.pow(t, 5); //t в 5 степени
  37. }
  38.  
  39. setInterval(main, 1000/60);
Потестить онлайн:
https://jsfiddle.net/RblSb/4g7nco1o/

Больше функций можно найти здесь:
https://gist.github.com/gre/1650294

А также здесь, после небольшой обработки:
https://github.com/danro/jquery-easing/blob/master/jquery.easing.js
Назад

Реклама

Мы в соцсетях

tw tg yt gt