Как изменять плавность масштабирования, не искажая пропорции персонажа
Чтобы изменить плавность масштабирования, не искажая персонажа, поддерживайте одинаковое пропорциональное изменение по всем осям масштаба на протяжении всей анимации. Сохраните нужные начальный и конечный размеры, а затем настройте интерполяцию между ними. Проверьте промежуточные кадры: совпадение значений в конечных точках само по себе не гарантирует, что пропорции персонажа сохраняются.
Это руководство предназначено для авторов, которые дорабатывают анимацию увеличения, уменьшения или остановки виртуального персонажа во внешнем редакторе анимации. Практический пример использует Adobe After Effects; приведённую числовую проверку можно применять и в других инструментах.
Почему изменение плавности масштабирования может исказить персонажа?
Масштаб определяет размер по каждой оси. Если для горизонтального и вертикального масштабирования используется один и тот же множитель, пропорции персонажа сохраняются. Если множители различаются, форма меняется. В технической документации MDN это различие описано как равномерное и неравномерное масштабирование. MDN: функция CSS scale()
Плавность определяет, как анимируемое значение меняется между ключевыми кадрами. Допустим, обе оси начинаются со значения 80% и заканчиваются значением 100%. Если горизонтальный масштаб достигает 96%, пока вертикальный составляет лишь 88%, персонаж временно становится шире относительно своей высоты. Конечные значения могут выглядеть правильно, хотя переход заметно растягивает изображение.
Если изначально персонаж не искажён, равные значения масштаба X и Y на всём протяжении перехода сохраняют его пропорции. В общем случае сохраняйте утверждённое исходное соотношение: если подготовленный ресурс намеренно начинается с разных значений масштаба, умножайте оба на один и тот же меняющийся коэффициент. Не заменяйте автоматически исходные значения одинаковыми числами.
Что проверить перед изменением кривой?
Сохраните рабочую копию и найдите трансформацию, которая управляет персонажем целиком. Для этого примера начните с одного слоя 2D-персонажа, внешний вид которого уже настроен для исходного размера. Если изображение состоит из отдельных частей, сначала задайте общую трансформацию для изменения размера всего персонажа. Иначе изменение только тела может поменять его размер относительно лица или аксессуаров.
В After Effects выберите слой персонажа и нажмите S, чтобы открыть параметр «Масштаб». При вводе пропорциональных изменений размера включите Сохранить пропорции — значок рядом со значениями масштаба. В документации Adobe этот параметр описан как средство для связанных изменений масштаба. Adobe: настройка свойств слоя в After Effects
Перед изменениями запишите утверждённые начальные и конечные значения, а также время ключевых кадров. Проверьте и существующие промежуточные ключи. Используйте параметр связывания как вспомогательное средство редактирования и проверяйте фактические значения на протяжении всей анимации: не считайте, что его включение исправило прежние изменения.
До настройки времени выберите точку, вокруг которой будет происходить увеличение. В After Effects масштабирование выполняется относительно опорной точки слоя. Центральная точка подходит для увеличения от середины; нижняя центральная точка — для персонажа, который должен визуально оставаться на земле при увеличении. Adobe: опорные точки слоя
Какой график использовать для настройки плавности?
Используйте график значений, чтобы проверять размер, и график скорости, чтобы задавать темп изменения размера. Adobe определяет график значений как отображение значений свойства во времени, а график скорости — как отображение скорости их изменения. Выберите нужный график в параметрах редактора графиков, а не полагайтесь на вид по умолчанию. Adobe: основы анимации в After Effects
На графике значений проверяйте все нужные компоненты масштаба вместе. При одинаковых исходных значениях их кривые должны совпадать на всём протяжении анимации с равномерным масштабированием. Расхождение между ними подсказывает, какой кадр нужно проверить. Если исходные значения различаются и это утверждено, сравнивайте пропорциональные изменения, а не ожидайте совпадения кривых.
Используйте график скорости, чтобы изменить ускорение или замедление, сохранив заданные размеры на ключевых кадрах. После каждого существенного изменения возвращайтесь к графику значений. Так вы отдельно проверите, подходит ли темп анимации и сохраняется ли соотношение размеров.
Как изменить плавность масштабирования в After Effects?
Для примера возьмём управляемый сценарий: правильно пропорционированный 2D-персонаж увеличивается с 80%, 80% до 100%, 100% за 12 кадров. Это примерные параметры, а не обязательная длительность или диапазон размеров.
- Выберите слой персонажа, откройте параметр «Масштаб» и включите «Сохранить пропорции».
- Задайте для первого ключевого кадра масштаба значения 80%, 80%, а для второго, расположенного на 12 кадров позже, — 100%, 100%.
- Выберите оба ключевых кадра масштаба и примените Анимация > Помощник ключевых кадров > Плавное замедление.
- Откройте редактор графиков и выберите Редактировать график скорости.
- Выберите ключи масштаба вместе. Настройте нужные компоненты согласованно, слегка изменяя маркеры.
- Переключитесь на Редактировать график значений и проверьте значения по осям между ключами.
«Плавное замедление» задаёт начальный переход с нулевой скоростью в выбранных ключевых кадрах. Для более точной настройки используйте Анимация > Скорость ключевого кадра, чтобы изменить входящую или исходящую скорость и влияние. Adobe объясняет, что горизонтальное перемещение маркеров скорости меняет их влияние на соседние ключи. Adobe: настройка и управление изменениями скорости в After Effects
В этом примере попробуйте быстро увеличить персонажа, а затем дольше замедлять движение. Настройте входящее влияние на конечном ключе, просмотрите анимацию и сравните её с исходной. На этом этапе оставьте конечные размеры и длительность в 12 кадров без изменений, чтобы оценить только изменение плавности.
Если после настройки персонаж растягивается, отмените это изменение и проверьте, какие компоненты были выбраны. Прежде чем продолжить, ещё раз проверьте промежуточные и конечные значения. В руководстве Adobe по редактору графиков показано, как выбирать ключи, отображать их маркеры, настраивать график скорости и просматривать результат. Adobe: создание динамичного движения между ключевыми кадрами с помощью редактора графиков
Как проверить пропорции по числовым значениям?
Если кривые трудно сравнить, проверьте пропорциональность изменений. Для выбранного кадра разделите текущий масштаб каждой оси на её утверждённое исходное значение. При равномерном изменении размера результаты должны совпадать. Это следует из применения одного множителя к обоим измерениям.
| Состояние | Масштаб X | Масштаб Y | X ÷ исходный X | Y ÷ исходный Y | Интерпретация |
|---|---|---|---|---|---|
| Утверждённое исходное состояние | 80% | 80% | 1.00 | 1.00 | Исходная форма |
| Правильный промежуточный кадр | 92% | 92% | 1.15 | 1.15 | Пропорции сохранены |
| Искажённый промежуточный кадр | 96% | 88% | 1.20 | 1.10 | По горизонтали рост больше |
| Утверждённый конечный кадр | 100% | 100% | 1.25 | 1.25 | Исходные пропорции восстановлены |
В искажённом примере отношение ширины к высоте умножено на 96 ÷ 88 ≈ 1.091. Значит, относительно исходного состояния персонаж примерно на 9.1% шире по отношению к своей высоте. Это пример арифметики, а не измерения конкретной анимации.
При намеренно неравномерном исходном масштабе 120%, 100% равномерное увеличение в 1.10 раза даст 132%, 110%. Обе оси увеличились на 10%, поэтому утверждённый внешний вид сохранён. Изменение конечных значений на 132%, 132% изменило бы исходные пропорции.
Что делать, если персонаж по-прежнему выглядит неправильно?
Прежде чем снова менять плавность, определите, что именно заметно изменилось. Приостановите анимацию на нужном кадре и выясните, изменилась ли форма, положение или детализация изображения.
| Симптом | Что проверить дальше |
|---|---|
| Ширина и высота по-разному меняются во время перехода | Сравните значения по осям, промежуточные ключи и маркеры кривых в этот момент. |
| При увеличении персонаж целиком смещается | Проверьте опорную точку и анимацию положения. |
| Меняется относительный размер только одной части персонажа | Проверьте трансформацию этой части и общую трансформацию персонажа. |
| Перед замедлением персонаж становится больше, чем нужно | Проверьте график значений: не выходит ли масштаб за целевой размер. |
| Силуэт сохраняет пропорции, но края становятся пиксельными | Проверьте разрешение исходного изображения и степень увеличения. |
Временное превышение размера может сохранить пропорции, если обе оси превышают заданные значения одинаково. Отдельно решите, нужно ли такое увеличение в анимации. Если по заданию движение должно просто завершаться увеличением, удерживайте значения масштаба в выбранном диапазоне от начального до конечного размера.
Увеличение растрового изображения тоже может изменить его внешний вид, не затронув пропорции. Adobe отмечает, что при значительном увеличении растровых слоёв пиксели могут стать заметными, а при уменьшении изображение может смягчиться. Изменение плавности не исправит недостаток детализации исходного изображения. Adobe: масштабирование или отражение слоя
Как проверить готовую анимацию масштабирования?
Проверьте начальный кадр, несколько промежуточных кадров, кадр с максимальным размером и конечный кадр. Чаще проверяйте участки, где масштаб меняется быстрее всего или форма кажется нестабильной. Проверка отдельных кадров помогает найти проблемы, а просмотр целых кривых — заметить расхождения между ними.
Затем просмотрите анимацию с предполагаемой частотой воспроизведения. В руководстве Adobe по редактору графиков рекомендуется проверить панель «Информация» и убедиться, что предпросмотр идёт в реальном времени: неполный предпросмотр затрудняет оценку темпа. Adobe: просмотр и настройка анимации в редакторе графиков
Завершайте работу, когда персонаж достигает нужных размеров, сохраняет утверждённые пропорции на протяжении перехода и ускоряется и замедляется так, как задумано. Используйте единый множитель масштаба как основной принцип, проверяйте темп с помощью графиков и убедитесь, что промежуточная форма правильная, прежде чем принять изменения.