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

[Sergey-Pimenov]

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

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

[KeySVG]

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

[animhotep]

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

[Ronnie_Gardocki]

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

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

[mSnus]

Вот после таких статей программисты начинают, наконец, понимать, зачем нужен был Flash.

[KinsleR]

да, только собирался написать насколько же проще такие вещи было сделать там :)

[Sergey-Pimenov]

Так есть же Adobe Animate, разве там нельзя сделать тоже, что может Flash?

[KinsleR]

Сложный морфинг плохо ковертиться в html, и все в html выходит очень тяжелым, а так по сути это все тот же флеш.

[VioletGiraffe]

Ненавижу этот ваш флэш, от которого весь браузер тупит и выжирает память.