javascript - jquery morphing image effect - Stack Overflow

admin管理员组

文章数量:1387347

I'm pretty sure this is impossible, but. . .

I am trying to get a morphing effect (like on this page in the flash image rotator -> ) in jquery. Or at least an effect that is very similar. I saw that jquery UI had some morphing effects, but I haven't been able to find it. This is important to our client, so any effect that is as close as possible would be awesome.

I'm pretty sure this is impossible, but. . .

I am trying to get a morphing effect (like on this page in the flash image rotator -> http://www.sikids.) in jquery. Or at least an effect that is very similar. I saw that jquery UI had some morphing effects, but I haven't been able to find it. This is important to our client, so any effect that is as close as possible would be awesome.

• javascript
• jquery
• effect
• morphing

Share Improve this question Follow asked Nov 21, 2011 at 22:14 bmarti44bmarti44 1,24722 gold badges1414 silver badges2222 bronze badges 2

• Here's a demo of shape tweening in Raphael.js: zreference./shape-tween-with-raphael And here's another Raphael shape tweening demo: raphaeljs./animation.html – Anderson Green Commented Feb 25, 2013 at 23:57
• I wonder if it would be possible to pile libmorph to JavaScript using Emscripten. :/ – Anderson Green Commented Feb 26, 2013 at 0:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Another option that might be equally as slow, but would not require any canvases would be to write the pixelation algorithm using 1x1 pixel images.

The first step would be to reduce the image to a palette of 32 colors.

Then you would map the image to the palette at the start pixelation level. For example, if the image was 100px by 200px and the first level pixelation is a grid 50 by 100, replace the image with, 50x100 = 5000, <IMG> each with a background image from the color palette.

This would need to be done server side and passed as a javascript array that would then be converted to <IMG>:

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

Would bee:

<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>

Then in javascript enlarge some of the <IMG>, and reduce the grid by removing some of the <IMG>, until some stopping magnification is reached.

Then replace that with the new image on high magnification and reverse the algorithm for the new image.

It's not impossible... but it might be slow.

You'll have to use canvas to grab the image data and transform it. Check out this SO answer and this plugin, which might help make things easier. I haven't used that plugin so in IE, you might have to include an additional canvas plugin.

A JavaScript library called MorpherJS has been developed for this purpose - it's entirely client-side JavaScript. Some demos of MorpherJS can be found here. It uses the HTML canvas element to display morphing image animations.

本文标签： javascriptjquery morphing image effectStack Overflow