Кто-нибудь знает алгоритм такого резинового эффекта?

Question

Я делаю анимацию и хочу реализовать что-то вроде this в сети. Я думал, что холст HTML может сделать такую ​​работу. Потому что я могу масштабировать часть изображения. Мне просто нужен алгоритм, чтобы заставить его работать.

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

Это Ubuntu, я знаю, что мы можем посмотреть на исходный код, возможно, чтобы увидеть, как он на самом деле реализует анимацию. Но я не знаю, где его найти. Или я даже не понимаю коды, написанные на Linux, потому что я просто понимаю PHP, JavaScript. По сути, я не разработчик программного обеспечения, мой основной опыт в веб-разработке.

http://www.youtube.com/watch?v=hgQP-aFragQ

Answer 1

Я считаю, что ваша лучшая ставка - взглянуть на Processing.js Джона Резига .

Обработка - это язык анимации для Java; Джон портировал его в браузер, используя canvas.

Answer 2

Вы не найдете веб-решения, которое сделает это за вас. Если вам нужно что-то подобное, это должно быть во флэш-памяти или в другом приложении (упомянутое Ленни на Java), которое запускается в отдельном медиа-боксе, встроенном в веб-страницу.

Люди не хотят больших ярких анимаций, смотреть что-то «скучное» гораздо лучше, если оно становится более удобным.

Answer 3

Сначала - я не знаю фактический алгоритм, который они используют здесь.

Однако, я бы атаковал это, создав сетку точек (скажем, 10х10), каждая точка прикреплена к соседям с помощью демпфирующих пружин. Возможно, стоит также привязать края / угловые точки к экрану с помощью пружин.

Деформируя сетку (растягивая и сжимая пружины), а затем моделируя отклики пружин, вы получите некоторые интересные эффекты, подобные показанным. После этого вы сможете записать шаблоны, чтобы точки могли следовать предварительно вычисленному пути для более быстрой анимации, если ваша анимация предсказуема.

Затем вам нужно разобраться, как разделить изображение и отобразить его на сетке. Разделение может лучше сделать один раз на сервере, но клиент может сделать это, если вы используете canvas.

Возможны svg & vml - они будут работать без плагинов и достаточно схожи для кода, но я не думаю, что вы получите достаточно правильную деформацию изображения. Однако вы можете безнаказанно масштабировать и вращать (и быстро), поэтому, если вы просто привязываете 2 изображения ячейки к сетке, а не ко всем 4, вы получите интересную анимацию - не совсем как видео, но довольно хорошо.

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

Конечно, это физическое моделирование, но вполне возможно.

Ответ вполне может быть медленным. Особенно на IE. Canvas нуждается в подключаемом модуле для IE, поэтому, если вы используете canvas, IE folk его не увидит. SVG работает практически на всем, кроме IE, но у него есть VML, который похож. http://raphaeljs.com/ - это библиотека, которая использует все, что доступно. Это будет вызов для настройки:)

Как бы вы ни делали, в chrome он всегда будет выглядеть лучше, движок javascript V8 превосходит все остальное для такой работы. IE имеет самый медленный движок JavaScript.