Морфинг изображений в браузере

Морфинг (англ. morphing, трансформация) — технология в компьютерной анимации, визуальный эффект, создающий впечатление плавной трансформации одного объекта в другой.
Morphjs(beta) — js библиотека для морфинга изображений.

---

Что внутри

vi.Tween

Класс для изменения одного или несколько числовых свойств любого объекта с течением времени (обновления происходят на каждом кадре).

Статичные публичные методы:

• to — добавляет объект в список обновляемых объектов.
  Пример:
  

  vi.Tween.to(obj/*объект для твиннинга*/, 
  			.5/*время в секундах за которое произойдёт изменение параметров*/, 
  			{ alpha: 1 }/*изменяемые параметры*/);
  

  
  В объекте изменяемых параметров возможны специальные свойства, добавляющие дополнительный функционал:
  
  • delay — пауза перед началом трансформации.
    
  • onStart — функция выполняемая перед началом трансформации.
    
  • onStartParams — параметры передаваемые в onStart.
    
  • onComplete — функция выполняемая по завершении трансформации.
    
  • onCompleteParams — параметры передаваемые в onComplete.
    
  • onUpdate — функция выполняемая при каждом обновлении трансформации.
    
  • onUpdateParams — параметры передаваемые в onUpdate.
    
  • ease — уравнение движения (http://robertpenner.com/easing/).
    
  • killTween — останавливает трансформацию объекта без последующей возможности возобновить.
    
  • pauseTween — ставит трансформацию объекта на паузу.
    
  • resumeTween — снимает трансформацию объекта с паузы.
    
  
  Возможно последовательное выполнение трансформаций (только метод to)
  Пример:
  

  vi.Tween.to(obj, .5, { alpha: 1, onUpdate:function(){} })
  		.to(obj, .4, { alpha: 0 })
  		.to(obj, 1, { x: 10, y:20, delay:.5, onStart:function(){} })
  		.to(obj2, .2, { z: 30 });
  

  
  Твинер на объект добавляется даже если он уже находится в стадии трансформации.
  ИМХО. мне показалось это удобнее чем если бы новый твинер затирал старый.
  
  

  vi.Update

  
  Класс для хранения функции, вызываемых на каждом кадре, в одном месте.
  

  Статичные публичные методы:

  
  
  • addUpdateFunc — добавляет функцию для выполнения её в каждом кадре.
    
  • delUpdateFunc — удаляет функцию из списка выполняемых на каждом кадре.
    
  • setFps — ставит fps для кадра. По умолчанию — 60.
    
  • getFps — возвращает fps.
    
  • getCurrentTime — возвращает время с предыдущего кадра.
    
  
  
  

  vi.ImgCache

  
  Класс для кеширования Image oбъектов.
  

  Статичные публичные методы:

  
  
  • load — прогружат и кеширует изображения.
    
  • getImg — возвращает объект Image по url.
    
  • getPattern — возвращает CanvasPattern.
    
  • addImgFromBase64 — добавляет в кеш изображение из строки (Base64).
    
  
  пример:
  

  vi.ImgCache.load("imgs/01.jpg"/*string url изображения или массив с url [url,url...url]*/, onComplete/*вызывается по завершению загрузки*/)
  function onComplete(){var img = vi.ImgCache.getImg("imgs/01.jpg");}
  

  
  
  

  vi.Graphics

  
  Конструктор для отрисовки в Canvas.
  

  Методы:

  
  
  • beginImageFill — назначает CanvasPattern в качестве текстуры.
    
  • drawTriangles — рисует множество треугольников с CanvasPattern текстурой.
    
  • drawTexturedTriangle — рисует текстурированный треугольник. В качестве текстуры могут быть Image или CanvasPattern. Второй вариант быстрее.
    
  
  
  

  vi.Delaunay

  
  Класс для триангуляции множества точек методом Делоне.
  

  Статичные публичные методы:

  
  
  • triangulate — возвращает массив треугольников.
    
  
  
  

  vi.Morphing

  
  Конструктор для запуска морфинга изображений. Принимает в качестве аргументов Canvas объект и параметры анимации морфинга.
  Параметры анимации лучше создать с помощью утилиты (utility.html).
  

  Пример работы утилиты:

  
  
  
  

  Методы:

  
  
  • pause — ставит на паузу.
    
  • resume — снимает с паузы.
    
  • play — запускает морфинг (при создании экземпляра Morphing). Возобновляет после stop.
    
  • stop — останавливает морфинг. Если pause как бы замораживает анимацию то stop переводит анимацию в следующее стабильное состояние и останавливает.
    
  • remove — замораживает изображение и удаляет анимацию.
    
  
  

  ---

  
  

  Как работает

  
  Пример (более подробный — example.html):
  

  /*index.html <canvas id="canvas" width="300" height="300"></canvas>*/
  var canvas  = document.getElementById("canvas"), // получаю canvas
      params = { // параметры анимации
          "w":300, // ширина изображения
  		"h":300, // высота изображения
  		"flexible":true, // будет ли растягиваться изображение по размеру Canvas или будет по центру сохраняя w, h
  		"loop":true, // зацикленность анимации
  		"yoyo":true, // если true то при достижении конца анимация запускается к началу 
  		"images":["img/01.jpg", "img/02.jpg"], // изображения
  		"vertices":[ // массивы точек
  			[ [ 0, 0 ],[ 150, 0 ],[ 300, 0 ],[ 0, 150 ],[ 300, 150 ],[ 0, 300 ],[ 150, 300 ],[ 300, 300 ],[ 117, 118 ],[ 191, 117 ],[ 154, 167 ],[ 154, 231 ],[ 109, 228 ],[ 201, 230 ],[ 155, 77 ],[ 156, 274 ] ],
  			[ [ 0, 0 ],[ 150, 0 ],[ 300, 0 ],[ 0, 150 ],[ 300, 150 ],[ 0, 300 ],[ 150, 300 ],[ 300, 300 ],[ 105, 122 ],[ 201, 118 ],[ 149, 186 ],[ 154, 231 ],[ 109, 228 ],[ 197, 223 ],[ 149, 96 ],[ 150, 283 ] ]
  		],
  		"states":[ //состояния [images[num], vertices[num]]
  			[ 0, 0 ],
  			[ 1, 1 ]
  		],
  		"animation":[[ 0, 0, 1 ],[ 0, 1, 2 ],[ 1, 1, 1 ]]   //анимация[ start state[num], end state[num], duration ]
      };
  
  var m = new vi.Morphing(canvas, params);// Создаю экземпляр vi.Morphing, который будет отрисовываться в canvas 
  vi.Update.setFps(30);// fps вместо 60 ставлю 30
  
  //чтобы удалить анимацию 
  m.remove();
  m = null;
  

  
  
  ссылка на github:
  https://github.com/vissargo/Morphjs