JQuery морфинг эффект изображения - PullRequest
Новая
       41

JQuery морфинг эффект изображения

3 голосов
/ 22 ноября 2011

Я почти уверен, что это невозможно, но.,.

Я пытаюсь получить эффект морфинга (как на этой странице во вращателе флеш-изображения -> http://www.sikids.com) в jquery. Или, по крайней мере, эффект, который очень похож. Я видел этот jqueryУ меня были некоторые морфирующие эффекты, но я не смог их найти. Это важно для нашего клиента, поэтому любой эффект, который был бы как можно ближе, был бы потрясающим.

Ответы [ 3 ]

4 голосов
/ 22 ноября 2011

Другим вариантом, который может быть столь же медленным, но не требующим каких-либо холстов, было бы написание алгоритма пикселизации с использованием пиксельных изображений 1x1.

Первым шагом будет уменьшение изображения до палитры 32цвета.

Тогда вы бы отобразили изображение на палитру на начальном уровне пикселизации.Например, если изображение было 100 на 200 пикселей, а пикселизация первого уровня - это сетка 50 на 100, замените изображение на, 50x100 = 5000, <IMG>, каждое на фоновое изображение из цветовой палитры.

Это должно быть выполнено на стороне сервера и передано как массив javascript, который затем будет преобразован в <IMG>: 

image1 = [3, 4, 1, 2, ...];

станет: 

<div id="image1Pixelation">
  <img src="image1_3.png" width="2px" height="2px"/>
  <img src="image1_4.png" width="2px" height="2px"/>
  <img src="image1_1.png" width="2px" height="2px"/>
  <img src="image1_2.png" width="2px" height="2px"/>
  ...
</div>

Затем в javascript увеличьте часть <IMG> и уменьшите сетку, удалив часть <IMG>, пока не будет достигнуто некоторое стоп-увеличение.

Затем замените его новым изображением с большим увеличением и перевернитеалгоритм для нового изображения.

0 голосов
/ 26 февраля 2013

Библиотека JavaScript с именем MorpherJS была разработана для этой цели - это полностью клиентский JavaScript.Некоторые демоверсии MorpherJS можно найти здесь .Для отображения морфируемой анимации изображения используется элемент холста HTML.

0 голосов
/ 22 ноября 2011

Это не невозможно ... но это может быть медленно.

Вам придется использовать canvas, чтобы получить данные изображения и преобразовать их.Проверьте этот SO ответ и этот плагин , который может помочь сделать все проще.Я не использовал этот плагин, поэтому в IE может потребоваться включить дополнительный холст для плагина .

...