jquery变形图像效果

我很确定这是不可能的，但是。。。jquery变形图像效果

我想在jquery中获得变形效果（如Flash页面中的旋转图像 - >http://www.sikids.com）。或者至少有一个非常相似的效果。我看到jQuery UI有一些变形效果，但我一直无法找到它。这对我们的客户来说很重要，所以尽可能接近的效果会很棒。

来源

2011-11-21 bmarti44

下面是Raphael.js中的形状补间演示：http：//zreference.com/shape-tween-with-raphael/以下是另一个Raphael形状补间演示：http://raphaeljs.com/animation.html –

我想知道是否可以使用Emscripten将libmorph编译为JavaScript。：/ –

这不是不可能的...但它可能是缓慢的。

你将不得不使用画布来获取图像数据，并将其转换。看看这SO answer和this plugin，这可能会使事情变得更容易。我没有在IE中使用过这个插件，你可能需要额外包含一个canvas plugin。

来源

2011-11-21 22:39:12 Mottie

虽然布雷特的回答给出了很多关于如何做到这一点的见解，但我会去回答你的回答，因为我认为使用插件会更容易。 – bmarti44

另一种选择可能是同样的慢，但不会要求任何画布将使用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>来减少网格，直到达到一些停止放大倍数。

然后更换与高倍率的新图像和反向新的图像的算法。

来源

2011-11-21 23:47:33

我选择fudgey作为回答问题的人，但您的解释非常好+1 – bmarti44

称为MorpherJS的JavaScript库已经被开发用于此目的 - 它完全是客户端JavaScript。 MorpherJS的一些演示可以找到here。它使用HTML canvas元素来显示变形图像动画。

来源

2013-02-26 00:10:46

jquery变形图像效果

回答

相关问题