如何创建“图像建设”效果

我正在寻找一种方便的方法来在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

如何创建“图像建设”效果

回答

相关问题