Если вам приходилось сталкиваться с созданием столбчатых диаграмм в After Effects, вы наверняка знаете, сколько боли доставляет вручную редактировать высоту всех этих столбцов, вбивать цифры в текстовые слои а затем вручную их двигать. Разумеется, можно купить шаблон на Videohive и не париться, но это не путь самурая. Поэтому сегодня мы разберёмся, как упростить себе задачу и автоматизировать процесс, не углубляясь при этом в совсем экстремальные варианты, типа синхронизации с внешними файлами. Помогут в этом нам, разумеется, выражения (expressions).
Для начала надо понять, какой уровень автоматизации процесса нас устроит. Допустим, мы согласны вручную копировать и выравнивать столбцы (на самом деле не совсем вручную, а используя инструмент Align) и вручную вбивать цифры, но только один раз.
Итак, создадим пустой шейповый слой и добавим в него Rectangle. Переименуем слой для удобства.
Теперь добавим элемент управления этим и всеми связанными с ним слоями. Применим эффект Slider Control, который также переименуем.
Теперь нам надо сделать так, чтобы шейп вёл себя как столбик. Размер Rectangle регулируется параметром Size. Size требует двух значений, записанных в формате [x, y]. Нас в данном случае интересует только высота столбика, поэтому первое значение мы пока зададим цифрой, а второе привяжем к ранее созданному слайдеру. Кликаем левой кнопкой мыши по часикам напротив параметра Size, зажав Alt, и начинаем писать выражение:
[5,
После чего кликаем по спиральке и тянем мышью на строку Slider
В результате чего код выглядит так
[5, effect("Value")("Slider")]
Но теперь, если мы начнём изменять значение эффекта Slider, то увидим, что столбец ведёт себя неправильно, увеличиваясь вверх и вниз. Нужно скорректировать положение шейпа. Для этого прописываем выше описанным способом следующий код в параметр Position:
[0,-effect("Value")("Slider")/2]
Разберём, что тут написано.
[0,
Положение столбца по горизонтали. Мы не будем менять положения слоя внутри шейпа, поэтому оставляем 0.
-effect("Value")("Slider")/2]
Положение столбца по вертикали. В After Effects ноль по вертикали это верхняя грань композиции. При смещении слоя вниз значение Y увеличивается. Нам же нужно обратное — чтобы при увеличении значения столбика, столбик смещался вверх, поэтому просто добавляем минус к значению столбика, а потом делим это значение на два, так как центр шейпа должен подниматься на высоту половины значения.
Теперь столбик ведёт себя правильно, но пользоваться им всё ещё неудобно — высота столбика задаётся в пикселях, а значения у нас могут быть совершенно разные. Напрямую использовать это значение для высоты столбца нельзя. Нужен коэффициент, с помощью которого можно увеличивать высоту столбцов, если значение столбца слишком маленькое и наоборот. Создадим Null Object, применим к нему Slider Control и переименуем его.
Допишем в выражение параметра Size знак *, чтобы получилось
[5,effect("Value")("Slider")*
И потянем спиралькой на только что созданный слайдер на нуле
[5,effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider")]
То же самое проделаем с параметром Position
[0,-effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider")/2]
Теперь остаётся добавить слою Fill, скорректировать его цвет и столбик готов. Слой можно копировать сколько угодно раз, и регулировать его значение через соответствующий слайдер.
Теперь добавим число, которое будет висеть над столбиком и показывать значение слоя, которое мы вбили руками.
Создадим текстовый слой и напишем в него несколько рандомных цифр, чтобы настроить шрифт, кегль, цвет и выравнивание по центру.
Привяжем текстовый слой к первому столбику
Раскроем параметр Position и введём то, ради чего я и написал весь этот пост.
L = thisLayer.parent;
y = L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider");
[0, y]
Первой строкой мы задали переменной L значение родительского слоя.
Второй строкой мы вытащили значение эффекта Value из переменной L, то есть из родителя данного слоя, умножили это значение на коэффициент и присвоили всё это переменной y.
Третьей строкой мы задали двойное значение параметру Position — 0 по горизонтали и y по вертикали.
С помощью такого кода можно вытаскивать какую угодно информацию из родительского слоя и использовать её для любых параметров привязанного слоя. Я узнал о такой возможности буквально пару дней назад, но уже успел несколько раз использовать этот приём в работе. В общем, супер полезная вещь.
Однако вернёмся к нашей диаграмме.
Цифра съехала вниз, потому что After Effects отсчитывает пиксели слева направо и сверху вниз. Поправим код, добавив во второй строке минус.
L = thisLayer.parent;
y = -L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider");
[0, y]
Стало лучше, но нужно немного воздуха. Ещё немного поправим вторую строку кода
L = thisLayer.parent;
y = -L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider")-10;
[0, y]
Теперь нам надо сделать так, чтобы текстовый слой отображал значение, вбитое нами в столбик. Скопируем только что написанный код из параметра Position и вставляем его в параметр Source Text, немного поправив
L = thisLayer.parent;
y = L.effect("Value")("Slider")*thisComp.layer("Null 1").effect("K")("Slider");
y
Работает! Теперь копируем текстовый слой необходимое количество раз и привязываем к каждому столбцу по очереди (Или удаляем все столбцы, начиная со второго, и копируем первый вместе с привязанной к нему цифрой).
Теперь заанимируем появление первого столбика, изменяя значение с нуля до 105. И видим посреди анимации следующее
Необходимо округлить значение, чтобы не видеть все эти страшные цифры после запятой. Для этого необходимо поправить код параметра Source Text, добавив в него метод Math.floor, округляющий значение вниз.
L = thisLayer.parent;
y =Math.floor(L.effect("Value")("Slider"))*thisComp.layer("Null 1").effect("K")("Slider");
y
Помимо Math.floor бывают ещё и Math.round и Math.ceil, различающиеся тем, в какую сторону они округляют.
Теперь нужно скопировать исправленный код на остальные текстовые слои. Для этого кликаем правой кнопкой мыши по Source Text и нажимаем на Copy Expression Only
А затем выделяем все остальные текстовые слои и нажимаем Ctrl+V.
Готово!