3d анимация при наведении, как реализовать?

Question

[Dazmond]

Как реализовать такую анимацию - открывается кейс в 3д с небольшим поворотом, сделано в after effect. Кейс анимированн без фона. Есть отдельно 3д модель кейса.
При загрузке страницы кейс статичен, но когда наводишь мышкой - начинается анимация. Нужно реализовать так чтобы при наведении кейс открывался, и если по середине анимации убираешь мышь он именно с того момента прокручивал анимацию назад. Если анимация дошла до конца, он фиксировался на конечной точке пока не убрал курсор - тогда уже анимация полностью проигрывается назад.
Какими инструментами это можно реализовать?

Comments

[Кирилл Никитин]

Только JS. Сначала подготавливаете свою анимацию и разбиваете на кадры. Если кейс открывается 3 секунды, то это 70-80 картинок. Общий принцип такой — запихиваем их всех в массив например и при наведении начинаем перебирать заменяя их в атрибуте src.

[Dazmond]

Кирилл Никитин, а нельзя ли как то работать с gif анимацией например? Просто 70-80 картинок подгружать, для главного экрана это достаточно не быстро по скорости.

[Максим]

Dazmond, ну вообще быстро работает...

Answer 1

[its2easyy]

Делал плагин для такого https://github.com/its2easy/animate-images. Если слишком тяжелые картинки будут, есть возможность через режим fastPreview запускать с небольшим набором, а потом догружать остальные.
Для варианта при наведении будет что то вроде

canvas.addEventListener("mouseenter", () => {
  pluginInstance.setReverse(false).play();
});
canvas.addEventListener("mouseleave", () => {
  pluginInstance.setReverse(true).play();
});

Тут https://codepen.io/its2easy/pen/VwvVRed во втором примере можно посмотреть как будет работать (Демо для другого плагина со спрайтом вместо canvas, но работать будет также)