Изменчивые формы и вау-эффекты: о магии простыми словами

Спасибо, что пишете. Очень хотелось бы узнать не только о техниках и средствах анимации, но о том как она должна выглядеть, сколько длится, какие должны быть временные кривые и т.д. Т.е. свод правил, гласных и не гласных, очевидных и не очевидных. И нужно знать это не только в контексте вау-анимации для лендигов, а ещё и про интерфейсную анимацию.

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

Классно! Я вот пробовал делать поп-апы с бэкграундом из анимированных svg. Идея с шейповой анимацией выезжающей формы очень хороша, буду пробовать!

спасибо, и круто что не перевод

Это просто, если формы простые. Проблемы начинаются там, когда дизайнер (или ваш воспаленный мозг) создает крутую и сложную фигуру, состояющую из разных частей (один svg с множеством которые внутри имеют свои деревья из элементов), и её каким-то образом нужно анимировать (аля перемещение, морфинг и так далее разных кусков). И проблемой тут становится не сам код анимации, а маппинг этих частей и во что они должны превратиться.

У меня имеется много демок с ручным морфингом, это крайне занимательный опыт, но кастомный морфинг двух не сильно отличающихся по размерам вещей может разительно отличаться по сложности и времени запиливания. Раньше люди часто писали, типа вот ты тут такую классную анимацию сделал, помоги нам анимировать это, «вроде похоже». Я смотрю и мне 5 секунд хватает чтобы понять что там работы на несколько дней страданий чтобы все по итогам идеально работало во всех мозможных ситуациях. В общем все эти жутко кастомные вещи тяжело масштабируются, на то они и кастомные. Безболезненное запиливание 10 морфинг анимаций не означает что вы легко справитесь с относительно похожей одиннадцатой.