Как анимировать крутящий момент на JS?

Question

[Cheizer]

Дорогие знатоки!!! Подскажите пожалуйста! Есть например два фото, механизма с гусеницей, и есть задача, для сайта их анимировать, что бы крутились колеса, хочу сделать на JS, что бы можно было по клику запускать. Но не знаю с чего начать? Есть несколько мыслей как это сделать:

1. Из фото нереально сделать такую анимацию так?

2. Как вариант записать живое видео работы механизма, и в Adobe Affter Effects сделать свой фон нейтральный, и запускать по клику это видео.

3. Найти 3D дизайнера, который делал это фото макет, и попросить его что бы он в своей 3D программе, анимировал этот механизм вращения и опять же записал видео.

4. Попросить 3D дизайнера что бы скинул мне все детали по слоям, а я уже соберу их в веб, и с помощью JS анимирую, но опять же только шестеренки, круглые предметы и то только в ракурсе ФАС.

Подскажите как можно сделать подобную анимацию, или это не реально в принципе для веб?
Какие есть варианты по вашему мнению?

Вот пример фото и 3D.

Answer 1

[Сергей Соколов]

Имхо только 3D рендер анимации. Могут сделать неотличимо от исходного фото, а не пластмассу как на втором примере. Недешево - моделировать цепи, их физику.

Comments

[Cheizer]

То есть вы имеете ввиду под рендером выходной формат для сайта это будет видео?

[Сергей Соколов]

Роман Кузнецов, да, видео, растр.
Хотя учитывая небольшую длину лупа, можно и покадрово вывести, а уже JS'ом крутить кадры то быстрее, то медленнее.

[Cheizer]

Сергей Соколов, ОООО ТОЧНО! Вот дельный совет, СПАСИБО БОЛЬШОЕ!! За покадрово не подумал, действительно, можно и из фото собрать нескольких png, так в интернет магазине делали фото прокрутку товара на 360 градусов, есть опыт. Да я думаю это как оч хороший вариант! И JS можно порулить.

Answer 2

[Максим Тимофеев]

Учитывая что 3d и фото похожи так же, как банан на полироль. То думаю проще найти готовую анимацию гусениц.
Или как вариант - набросать в svg и анимировать через css.

Comments

[Cheizer]

Спасибо, но у нас тут свое устройство, любая гусеница не годиться. А про SVG как это? Какая разница векторная графика или растровая, то есть вы имеете ввиду по слоям что бы все было отдельно каждая деталь? Или вы про другое?

[Максим Тимофеев]

но у нас тут свое устройство

Вы фото просто так привели, случайное? Тогда зачем вообще его приводили?

Какая разница векторная графика или растровая

Большая. Очень.

что бы все было отдельно каждая деталь?

Зачем? достаточно отдельно иметь движущиеся.

Но советовать не видя предмет разговора - это "пальцем в небо". У Вас там военная тайна?

[Cheizer]

Максим Тимофеев, фото аналогичные, суть не в них, а в сути, суть понятна думаю вам. Устройства могут быть разные на фото. Речь не о них. Про графику я знаю разницу и отличие, но тут опять же вопрос не о свойствах я спрашивал, а касательно моей делемы, растровая графика или векторная, но отдельно движущиеся, поэтому так же по слоям и в растровой графике можно сделать и векторной, я про это. А вы про что?

И еще, так анимировать можно только круглые моменты и только в ФАС ракурсе, то есть вид спереди, а например вид с полубоку как на картинках, так не получиться, я правильно понимаю?

[Максим Тимофеев]

Роман Кузнецов, Вся проблема, что не понятна задача. Для чего это? В каком виде нужно? Тогда и подходы разные будут.

растровая графика или векторная, но отдельно движущиеся

Что? Отдельно от чего? О чем Вы вообще?

поэтому так же по слоям

По каким слоям? Откуда слои с растровой графике, в том же jpg? Или Вы хотите загрузить 100 картинок и их вращать? У меня ощущение, что Вы вообще не представляете о чем говорите.

[Cheizer]

Максим Тимофеев, по слоям, вы фотошопом пользовались когда нибудь в жизни? Если нет тогда нет смысла объяснять что такое по слоям рисунок. Ладно, проехали, я смотрю вы не особо хотите понимать и помогать. Досвидания.

[Максим Тимофеев]

по слоям, вы фотошопом пользовались когда нибудь в жизни?

))) Я да, а Вы пробовали сохранить jpg, а потом опять открыть в photoShop что бы слои остались? Попробуйте, не получится. А знаете почему? Потому что есть большая разница между тем что Вы видите в редакторе и тем в каком виде хранится информация.