如何創建「圖像建設」效果

我正在尋找一種方便的方法來在Web應用程序中創建這樣的效果：我有一些圖片，它的分辨率不是很高，我希望它看起來像雲在屏幕的一些隨機部分，然後移動到它的位置。如何創建「圖像建設」效果

沒關係，我會失去一些決議（我不認爲1x1px粒子是好的;））。

我想使用silverlight/canvas或processing-js/canvas。

任何想法？ Thx。

2010-03-01 ALOR

當你的silverlight應用程序加載圖片時，你可以做的是將它分成多個圖塊。您爲每個圖塊使用一個對象，並存儲此圖塊的正常位置（即它最初在圖片中的位置）。然後你給每個瓦片一個隨機的位置，並使用一個循環來將瓦片從隨機位置移動到正常位置。這看起來像一個雲，解決了正確的畫面。

然後，您可以玩弄瓷磚的大小和數量，以及它們如何移動到正確的位置（您可以讓它們放慢速度，或者按照曲線而不是直線）。

來源

2010-03-01 23:56:38 redtuna

Thx，我和數學很好。但有實現的問題：直接使用畫布和瓷磚太慢... – ALOR 2010-03-02 00:41:46

啊。有沒有辦法做到這一點，而不使用畫布？也許只是銀光本身？因爲它似乎足夠快：我在看http://w4.clouping.com/Qios.Silvergrid.Website/#/QHomePage$342，它很好，很流暢。 – redtuna 2010-03-02 00:50:21

這個實現基於Deepzoom，估計來自圖像加載...並且速度也很慢 - 這裏的元素更加複雜，但是隻有幾個圖塊，而重新創建一些您需要的圖片（至少）300 * 200 = 60000pix - 所以你可以使用SolidColorBrush。如果瓷磚更大，則使用更復雜的畫筆。 – ALOR 2010-03-03 09:38:27

如何創建「圖像建設」效果

回答

相關問題