Анимация лого WINTER BASH
1,00
р.
Заканчивается сезон WINTER BASH 2020 Хотелось бы, как-то отметить это событие.
На изображении цифрами отмечены, желаемые объекты для анимации
Сценарий анимации:
Генератор шляп. Должен неравномерно перемещаться вверх-вниз Знак вопроса должен плавать в пространстве с одновременным изменением в размерах. Что символизирует сбор информации о раскрытии условий получения "секретных шляп" Воздушный шарик должен равномерно покачиваться. Шляпа должна перемещаться вдоль траектории слова WINTER Покачивание луны. Должно начаться после выполнения пункта 4 сценария Большая синяя шляпа совершает поступательные движения в поисках новых шляп. Через некоторое время после начала выполнения п.6, сверху должны начать падать шляпы. Анимация звёзд, должна начаться после нахождения всех шляп.
Как реализовать данный сценарий анимации?
Ответ
LIVE DEMO
Код получился довольно большой, чтобы разместить его в снипете при ограничении 30.000 символов, пришлось его довольно сильно оптимизировать и избавиться от некоторых украшательств. Комментарии остались по основным моментам работы программы, надеюсь что они помогут. Видимо придется делать дополнительный ответ, чтобы раскрыть некоторые интересные подробности реализации пунктов сценария.
Запуск анимации начнется после нажатия на кнопку Start
Использован музыкальный трек: Candy Dulfer / Dave Stewart - Lily Was Here
.container { width:100vw height:100vh } .s0{ fill:none stroke:#000 } #hat { stroke:#000 fill:#30BAE4 } #Stroke_bottom { fill:#8DEBB5 stroke:#971B59 stroke-width:4 stroke-dashoffset:350 stroke-dasharray:350 fill-opacity:0 filter:url(#dropShadow) }
#q { fill:#8DEBB5 stroke:#971B59 stroke-width:4 stroke-dashoffset:1366 stroke-dasharray:1366 fill-opacity:0 filter:url(#dropShadow) } #cloud { fill:#FFFCFF stroke:#971B59 stroke-width:6 stroke-dashoffset:1649 stroke-dasharray:1649 filter:url(#dropShadow) }
<!-- Анемация затемнения фона --> <!-- Звезды --> <!-- Нижний фон --> <!-- Анимация мерцания звезд через маску --> <!-- Луна --> <!-- Анимация луны an_hat.end--> <!-- Крайняя справа шляпа --> <!-- Анимация крайней справа шляпы --> <!-- воздушный шарик --> <!-- Хвостик шарика --> <!-- Веревка шарика --> <!-- Анимация воздушного шарика --> <!-- Знак вопроса --> <!-- Хвостик знака вопроса --> <!-- Нижний шарик вопроса -->
<!-- --------------------------------------------------------------------- --> <!-- Анимация шляпы вдоль пути winter --> <!-- Шляпа на синих прямоугольниках --> <!-- Анимация шляпы на синих прямоугольниках --> <!-- ------------------------------------------------------------------------- --> <!-- Анимация левой ноги --> <!-- Анимация правой ноги -->
<!-- Анимация горизонтального движения шляпы --> <!-- глаза + рот большой шляпы eyes + mouth of a big hat --> <!-- Анимация глаз + рта вверх-вниз --> <!-- Шляпы --> Start
var zodiac = new Audio() zodiac.src = src="https:/vg-art.ru/files/Kendi Dalfer–Meeting.mp3"
function play() { zodiac.play() }
На изображении цифрами отмечены, желаемые объекты для анимации
Сценарий анимации:
Генератор шляп. Должен неравномерно перемещаться вверх-вниз Знак вопроса должен плавать в пространстве с одновременным изменением в размерах. Что символизирует сбор информации о раскрытии условий получения "секретных шляп" Воздушный шарик должен равномерно покачиваться. Шляпа должна перемещаться вдоль траектории слова WINTER Покачивание луны. Должно начаться после выполнения пункта 4 сценария Большая синяя шляпа совершает поступательные движения в поисках новых шляп. Через некоторое время после начала выполнения п.6, сверху должны начать падать шляпы. Анимация звёзд, должна начаться после нахождения всех шляп.
Как реализовать данный сценарий анимации?
Ответ
LIVE DEMO
Код получился довольно большой, чтобы разместить его в снипете при ограничении 30.000 символов, пришлось его довольно сильно оптимизировать и избавиться от некоторых украшательств. Комментарии остались по основным моментам работы программы, надеюсь что они помогут. Видимо придется делать дополнительный ответ, чтобы раскрыть некоторые интересные подробности реализации пунктов сценария.
Запуск анимации начнется после нажатия на кнопку Start
Использован музыкальный трек: Candy Dulfer / Dave Stewart - Lily Was Here
.container { width:100vw height:100vh } .s0{ fill:none stroke:#000 } #hat { stroke:#000 fill:#30BAE4 } #Stroke_bottom { fill:#8DEBB5 stroke:#971B59 stroke-width:4 stroke-dashoffset:350 stroke-dasharray:350 fill-opacity:0 filter:url(#dropShadow) }
#q { fill:#8DEBB5 stroke:#971B59 stroke-width:4 stroke-dashoffset:1366 stroke-dasharray:1366 fill-opacity:0 filter:url(#dropShadow) } #cloud { fill:#FFFCFF stroke:#971B59 stroke-width:6 stroke-dashoffset:1649 stroke-dasharray:1649 filter:url(#dropShadow) }
<!-- Анемация затемнения фона --> <!-- Звезды --> <!-- Нижний фон --> <!-- Анимация мерцания звезд через маску --> <!-- Луна --> <!-- Анимация луны an_hat.end--> <!-- Крайняя справа шляпа --> <!-- Анимация крайней справа шляпы --> <!-- воздушный шарик --> <!-- Хвостик шарика --> <!-- Веревка шарика --> <!-- Анимация воздушного шарика --> <!-- Знак вопроса --> <!-- Хвостик знака вопроса --> <!-- Нижний шарик вопроса -->
<!-- --------------------------------------------------------------------- --> <!-- Анимация шляпы вдоль пути winter --> <!-- Шляпа на синих прямоугольниках --> <!-- Анимация шляпы на синих прямоугольниках --> <!-- ------------------------------------------------------------------------- --> <!-- Анимация левой ноги --> <!-- Анимация правой ноги -->
<!-- Анимация горизонтального движения шляпы --> <!-- глаза + рот большой шляпы eyes + mouth of a big hat --> <!-- Анимация глаз + рта вверх-вниз --> <!-- Шляпы --> Start
var zodiac = new Audio() zodiac.src = src="https:/vg-art.ru/files/Kendi Dalfer–Meeting.mp3"
function play() { zodiac.play() }
