Тригонометрия для ботаников (от vistly)

Тригонометрия для ботаников

Спасибо автору урока за предоставленную для ARTTalk'a информацию из личного ЖЖ.

Задача: повторить меню макоси в After Effect'е, применительно к обувной косметике

а именно: сделать "волну" вырастающих тюбиков, с возможностью контролировать все параметры "волны"

засада: тюбики не должны друг на друга залезать

решение: напишем экспрешшен в афтереффекте, и всего делов

мувик

1. морщим лоб, уясняя задачу: нужно чтобы при приближении некоего контрольного объекта наши баночки плавно вырастали, а при удалении - плавно принимали исходный размер. плюс надо чтобы баночки раздвигались при вырастании, чтобы не перекрывать соседей.

2. рисуем на бумажке, или еще где, графики изменения размера и позиции баночек в зависимости от приближения контрольного объекта.

на графиках:

ось Х - расстояние между баночкой и контрольным объектом

ось У - изменения позиции (зелененькое) и размера (красненькое)

а - расстояние на котором баночка начинает "чуять" контрольный объект по поводу сдвига

b - изначальный размер банки

с - максимальное изменение размера банки (высота волны)

d - максимальный сдвиг баночки

e - расстояние на котором баночка начинает "чуять" контрольный объект по поводу роста

3. вспоминаем тригонометрию из школы, получается что в серединке у графиков куски синусоиды и косинусоиды:

если расстояние до контрольного объекта меньше а - банка сдвигается по формуле Y(X)=-d

если расстояние до контрольного объекта больше а - банка сдвигается по формуле Y(X)=d

если расстояние до контрольного объекта укладывается в интервал от -а до а - банка сдвигается по формуле Y(X)=sin((x*pi)/(a*2))*d

если расстояние до контрольного объекта меньше e - банка растет по формуле Y(X)=((cos((x*pi)/e)+1)/2)*c+b

если расстояние до контрольного объекта меньше e - банка растет по формуле Y(X)=b

4. осталось это перевести на язык экспрешшенов афтереффекта

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

у всех банок смещаем анкор-пойнт к основанию, чтобы они росли только вверх

выстраиваем банки в линию

на дамми-слой накладываем четыре эффекта Expression controls - Slider Control

переименуем их попонятнее. они будут отвечать за переменные a,c,d и e. переменная b будет равна 1.

на position каждой банки применяем expression:

pos = thisComp.layer("Null 1").effect("Shift")("Slider");

if (thisComp.layer("Null 1").transform.position[0] - transform.position[0] < 0) {pos = -thisComp.layer("Null 1").effect("Shift")("Slider");}

if (Math.abs(thisComp.layer("Null 1").transform.position[0] - transform.position[0]) <thisComp> thisComp.layer("Null 1").effect("Affect scale")("Slider")) {scl = 1;}

transform.scale*scl

в которых нетрудно узнать наши формулки

потянем за контрольный объект и насладимся результатом!

осталась ерунда, фон, тени и глосси-отражения.

Автор: vitsly

Источник: Урок в ЖЖ