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變形圖像效果

回答

相關問題