Как создать эффект «построения изображения»

Question

Я ищу удобный способ создать такой эффект в веб-приложении: у меня есть какая-то картинка с не очень высоким разрешением, и я хочу, чтобы она отображалась в виде облака частиц в некоторой случайной части экран, а затем перейти к своей позиции.

Это нормально, что я потеряю разрешение (не думаю, что частицы размером 1x1px хороши;)).

Я хочу использовать silverlight / canvas или processing-js / canvas.

Есть идеи? Thx.

Answer 1

Когда ваше приложение Silverlight загружает картинку, вы можете разделить ее на плитки. Вы используете один объект для каждой плитки и сохраняете нормальное положение для этой плитки (то есть там, где она изначально находится на рисунке). Затем вы присваиваете каждой плитке случайную позицию и используете цикл для перемещения плитки по линии из случайной позиции в ее нормальную позицию. Это выглядит как облако, которое превращается в правильную картинку.

Затем вы можете поиграть с размером и количеством плиток, а также с тем, как они перемещаются в правильное положение (вы можете сделать так, чтобы они замедлялись или следовали по кривой вместо прямой линии).