1 заметка с тегом

диаграмма

Создание столбчатой диаграммы с помощью выражений

Если вам приходилось сталкиваться с созданием столбчатых диаграмм в 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.

Готово!

2017   ae   выражения   диаграмма   оптимизация