Как встроить на сайт сложную 3d анимацию?

Question

[SASHIKUBIVATOR]

Есть папка с картинками устройства вокруг, нужно чтобы из этого по итогу получилась красивая анимация, которая при прокрутке будет крутить устройство. Мне нужно использовать какой-нибудь js репозиторий может быть, или же попробовать собрать в какой-нибудь программе для анимирования сначала из этих png картинок целую анимацию, а потом уже пихать ее на сайт?
Извиняюсь за, может быть, глупый вопрос, но с такими сложными анимациями никогда не работал.

Comments

[Василий Банников]

Это не сложная, и не 3д анимация.
Тебе просто нужно при движении, например, слайдера менять одну картинку на другую.

Answer 1

[Виталий Першин]

Объединяете все картинки в спрайт и затем меняете background-position с учетом размера одного кадра, либо можно просто менять сами картинки, но это более ресурсоемкий процесс, к тому же не все картинки могут успеть прогрузиться. Готового примера под рукой нет, но смысл примерно такой же как тут https://codepen.io/get-web/pen/pqrvLY просто смена кадров с определенной скорость, в вашем случае вы будете привязываться либо к позиции курсора, если движение будет мышью, либо к кнопкам через setTimeout

update: Готовые библиотеки можно поискать по запросу "360 view js". Например вот: https://scaleflex.github.io/js-cloudimage-360-view/

Comments

[profesor08]

Если хочется чтоб картинки менялись за курсором, то можно накидать в контейнер с картинкой 10-20 вертикальных блоков равной ширины, и по наведению менять позицию картинки у блока с картиной.

<div class="rotate-sprite">
  <div class="rotate-toggle-1"></div>
  <div class="rotate-toggle-2"></div>
  <div class="rotate-toggle-3"></div>
  <div class="rotate-toggle-4"></div>
  <div class="rotate-image"></div>
</div>

.rotate-toggle-1:hover ~ .rotate-image {
  background-position: 200px 0;
}

[Виталий Першин]

profesor08, Полагаю что он все таки хочет эффект вращения 3д объекта, а не просто переключение

[Виталий Першин]

profesor08, Ваше решение на js намного интереснее. Я делал так же только по нажатию на кнопки вперед назад, тогда через setTimeout получалось плавно как видео

[profesor08]

Виталий Першин, если все правильно подобрать и расставить, то будет такой-же эффект. Но несколько строк кода просто проще.

Answer 2

[its2easyy]

делал свой плагин для таких анимаций https://github.com/its2easy/animate-images.
Чтобы привязать переключение к скролу можно использовать GSAP ScrollTrigger

Comments

[profesor08]

Ага, еще и пол магабайта гсапа, который платный, подтянуть. Выше решение на стилях.

[its2easyy]

profesor08,

пол магабайта гсапа

- 80кб,

который платный

- бесплатный,
и

решение на стилях

которое не подойдёт для реального заказа, хотя бы потому что спрайт даже из 60 кадров нормального размера будет тормозить при переключении

[profesor08]

its2easyy, бесплатный для некоммерческого использования. А если зарабатываешь денежки, то прайс от $100 до $200 в год.

- 80кб, ну может быть ситуация стала лучше, но это не 17кб как у animejs, но и не то, и не то, тут не надо. Максимум что тут надо, это четверть килобайта js кода для реализации интерактива.

которое не подойдёт для реального заказа, хотя бы потому что спрайт даже из 60 кадров нормального размера будет тормозить при переключении

А это откровенные глупости. В любом случае надо будет загрузить все данные. Но гораздо проще и быстрее загрузить 1 файл, нежели 60 файлов. А перерисовкой блока с картинкой будет заниматься графический процессор, и при этом не будет перерисовки всего лэяута, что непременно случится, если будешь менять картинки или подставлять src, а подставляя src, у тебя каждый раз будет инициализироваться http запрос, хорошо если в кеш.

[its2easyy]

profesor08, https://greensock.com/standard-license/
чтобы бесплатная лицензия стала платной автору нужно создать продукт и продавать его по лицензии разным юзерам, создание просто сайта даже за деньги под платную лицензию не попадает.

А это откровенные глупости.

я реализовывал оба варианта и проверял их. Изменение background-position в большом спрайте лагает намного сильнее, чем перерисовка отдельных картинок на canvas.

и при этом не будет перерисовки всего лэяута, что непременно случится, если будешь менять картинки или подставлять src, а подставляя src, у тебя каждый раз будет инициализироваться http запрос

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

80кб, ну может быть ситуация стала лучше, но это не 17кб как у animejs,

- автор пишет что до этого не работал с анимациями, в таком случае лучше взять плагин в котором точно можно реализовать всё что будет нужно, а потом при желании заменить на легкое решение, уже понимая что нужно, а что нет. Тем более что нужна привязка состояния анимации к скролу (если я правильно понял по вопросу), что делает scrolltrigger, и чего нет в animejs. Без привязки к скролу можно убрать gsap и останется 16кб

[profesor08]

its2easyy, на канвасе можно рисовать спрайт, а точнее только его часть. Объем кода ~ пол килобайта. И для этого не надо грузить 60 картинок, не надо дожидаться когда они загрузятся, не надо грузить лишние библиотеки ради одного мелкого кейса. А так как автор не имел дела с анимацией, неплохо бы ему разобраться в этом вопросе и иметь представление что на самом деле надо делать, а не вникать в код посторонних либ, которые ни каким образом не прояснят вопрос.

Answer 3

[profesor08]

Пример с анимацией по наведению курсора. Минусом будет тут то, что картинки надо объединить в одну длинную картинку, где все кадры следуют друг за другом по порядку. Онлайн сервисы по объединению картинок в спрайт есть.

Answer 4

[Vyach Gor]

О неужели пригодились мои закладки ) Cам не юзал, но встречал две подобных библиотеки link1 and link2 выбирайте какая больше подходит