Как сделать такую canvas анимацию?

Question

[Артём Коновалов]

Всем привет
Вот на этом сайте https://pepsico-lays-yellow-trend.snpdev.ru/
На первом экране при наведении на иконки вызывается анимация.
Подскажите пожалуйста как это реализуется?

Comments

[Андрей]

Не понимаю чего ты ждешь здесь увидеть. Что кто-то на jsfiddle тебе запилит, а ты скопируешь? :)
Проведи исследовательскую работу у них на сайте, изучи глубже canvas и сделай сам.

Answer 1

[Alex XYZ]

Немного Chrome Dev Tools:


И вот библиотека найдена: www.createjs.com/easeljs

Comments

[Артём Коновалов]

Ох, мастерски! Спасибо огромное!) Если бы вы ещё немного написали логику поиска или хороший материал по Dev Tools, чтобы в будущем самому это проворачивать был бы признателен!)

[Alex XYZ]

Артём Коновалов: Пожалуйста. Вот с логикой некоторый напряг. Вот как мог восстановил ход мыслей:


Категорически рекомендую к просмотру канал твиттера: https://twitter.com/chromedevtools

[Артём Коновалов]

Благодарю за развернутый ответ!))

[Alex XYZ]

Артём Коновалов: Забыл дать всё-таки более точный ответ - а как же всё-таки сделать такую анимацию? К сожалению это не бесплатно. Для создания именно таких анимаций используется Adobe Animate (www.createjs.com/tools), смотрите: https://helpx.adobe.com/animate/using/creating-pub...

P.S.
Adobe Animate сделали как приемника Flash, но для HTML5: https://geektimes.ru/post/280020/

Answer 2

[trushka]

Но вообще-то эту анимацию, как в примере, можно сделать на чистом css, с помощью animate на ховере, анимируя только transform и opacity - в фотоапаратике анимируем opacity для лампочки и вспышки (можно сделать с помощью ::before и ::after), в паодарочке - transform (устанавливаем transform-origin по центру нижнекго края каптинки и приплющиваем по вертикали, слегка вращая вокруг вертикальной оси). Ну, сердечько посложнее, но тоже довольно просто - 2 полужопия слегка поворачиваются по очереди вдоль вертикальной оси и одновременно с ними (опять же, через псевдоэлементы можно) поворачиваем полукружочки, стоящие перпендикулярно экрану посередине сердечка - это создаст эффект выгибания границы между половинками при пульсировании

Comments

[Артём Коновалов]

спасибо за ответ!
Да, наверное, можно, но у той же коробочки крышка отдельно от основания двигается, а у фотоаппарата 3 точки анимированния - тут уже бефор и афтор не обойтись