Анимация «Ваше сообщение отправлено». Анимация информирующая пользователя заполнившего форму обратной связи на сайте и нажавшего кнопку «Отправить». Появляется на отдельной страничке с текстом об отправке и кнопкой перехода на главную. Информирует тем самым, что данные с формы успешно отправлены. Сделана мной для этого сайта.
SVG анимация для сайта магазина мебели и бытовой техники. Тоже копия видеоанимации, предоставленной заказчиком. Не люблю копировать, но проект оказался интересным. На самом деле тут 3 микроанимации, идущих последовательно друг за другом, подобно сериалу.
Еще одна анимация из большой серии работ для медицинских центров. Тоже простая персонажная анимация. Анимация диалога врача и пациентки.
P.S.: еще была, по теме медицины, анимация для кардиоцентра. Нужно было анимировать сердце, сердцебиение точнее, и график кардиограммы на дисплее. Сложность была без медицинских знаний точный ритм анимировать, т.к. заказчик к этому моменту очень критичен был. Долго гуглил тему… а потом сгенерировал svg код анимации серцебиения иконки нейросетью! Локально установленной на моем компе, модели не то «Llama 3» (8В), не то «Gemma 2» (9В) - кто-то из них справился.
Очень интересный, но незавершенный проект. Заказчик набросил хотелки. Я не стал брать предоплату, т.к. не был уверен что справлюсь, такая задача ставилась мне впервой. А он вскоре исчез, перестал выходить на связь, даже не взглянув на этот черновик - такое бывает.
Но тем не менее - опыт для меня оказался весьма плодотворный. Умотал на этот эксперимент несколько часов. В чем суть? Была дана 3D модель в формате obj. Во вьюпорте «Блендера» я выставил импортированную модель в нужных ракурс. Потом настроил Freestyle представление и рендер модели. И экспортировал в svg через расширение «Freestyle SVG Export», установленный в «Blender» дополнительно от базовых плагинов. Экспорт чисто Strokes, без заливки цвета. Ну а уже потом по накатанной - svg анимация.
Типовая flat анимация в моем исполнении. Сделал подобных проектов великое множество. Сразу пакетами на сайты/лэндинги делал в едином стиле. Очень модный и востребованный стиль был, но как то все пошло на спад. Видимо мода прошла. Вот только набил руку, от подготовки материала, иллюстраций до непосредственно анимации и приемов. И вот.
Вот в этой иллюстрации интересен способ «желе» анимации. Это серый бэк сзади и волосы у девушки справа. Этот термин (желе), услышанный мной как то раз мне больше всего нравится. Или еще термин Blob (клякса, капля) анимация - также применяется в буржунетах, или «облачка» как выражается мой постоянный заказчик. Раньше я это делал, по "честному", морфингом из минимум 3-х геометрий на Slim синтаксисе. Но потом обленился, или оптимизировал процесс, и стал делать чисто на css3 методом skew с небольшим масштабированием. Главное анкорную точку с центра переместить на окраину. Отличить результат css3 от Slim может только наметанный взгляд профи.
Анимация изометрической иллюстрации для странички разработки приложений под Android. Это именно hover’ная анимация. На MouseOver она собирается, а на MouseOut откатывается в первоначальное положение. Также сделал заказчику Lottie версии анимаций из этой серии. Там управлять стадиями анимации гораздо сподручнее, нежели в случае с SVG.