애프터이펙트 표현식(Expression) 7편 - linear로 값의 범위 바꾸기, 슬라이더 하나로 여러 속성 움직이기

 

 

6편에서 촛불을 만들 때 linear를 잠깐 썼습니다. -1~1 사이의 noise 값을 40~100으로 바꿔 불투명도에 넣었습니다. 7편에서는 이 linear를 제대로 다룹니다. linear는 "이 범위의 값을 저 범위로 옮겨 주는" 기능입니다. 키프레임 없이 페이드인을 만들거나, 슬라이더 하나로 위치·회전·크기를 한꺼번에 움직일 때 씁니다. 표현식에서 가장 많이 쓰는 기능 중 하나입니다.

이걸 알면 달라지는 것

"2초 동안 서서히 나타나게 해 줘"라고 AI에게 부탁하면 time * 50 같은 코드가 오는 경우가 있습니다. 처음 2초는 맞게 움직이지만, 그 뒤로도 값이 계속 커집니다. 불투명도는 100%에서 멈춰 보여도 위치나 회전은 화면 밖으로 날아갑니다. linear는 정한 범위를 넘으면 끝값에서 멈춥니다. 이 차이를 알면 AI가 준 코드를 보고 "이건 3초 뒤에 어디로 가겠구나"를 바로 판단할 수 있습니다.

화면은 영문 인터페이스로 캡처했습니다. 한글 UI에서는 Opacity는 불투명도, Position은 위치, Rotation은 회전, Scale은 비율, Source Text는 소스 텍스트, Slider는 슬라이더로 보입니다. 영문판으로 바꾸는 방법은 한글판 애프터이펙트 영문판으로 바꾸는 방법에 정리해 두었습니다.

1. linear 읽는 법

linear(t, tMin, tMax, value1, value2)

괄호 안에 숫자 5개가 들어갑니다. 읽는 순서는 이렇습니다.

• t: 지금 기준이 되는 값(보통 time이나 슬라이더)
• tMin, tMax: t가 움직이는 범위
• value1, value2: 그 범위를 옮겨 놓을 결과 범위

"t가 tMin일 때 value1, tMax일 때 value2, 그 사이는 고르게 나눈다"라고 읽으면 됩니다.

2. 키프레임 없이 페이드인

레이어의 Opacity(불투명도)에 입력합니다.

linear(time, 0, 2, 0, 100)

 

 

시간이 0초일 때 0%, 2초일 때 100%입니다. 위 화면처럼 1초에는 그 중간인 50%가 됩니다. 3편에서 배운 time을 넣었기 때문에 재생하면 2초 동안 서서히 나타납니다.

2초가 지나면 어떻게 될까요? linear는 범위 밖에서는 끝값을 유지합니다. 3초, 10초가 돼도 100%에서 멈춥니다. 키프레임 두 개를 찍은 것과 같은 결과입니다.

반대로 사라지게 하려면 결과 범위만 뒤집습니다.

linear(time, 0, 2, 100, 0)

3. 위치처럼 값이 여러 개일 때

결과 범위에 배열을 넣으면 위치도 움직일 수 있습니다.

linear(time, 0, 3, [200, 540], [1720, 540])

 

 

3초 동안 화면 왼쪽(200, 540)에서 오른쪽(1720, 540)으로 이동하고, 3초 뒤에는 오른쪽 끝에서 멈춥니다. 위 화면은 2초 지점으로, 전체 거리의 3분의 2쯤인 X 1214.3에 와 있습니다.

value1과 value2는 같은 개수여야 합니다. 위치는 [x, y] 2개, 3D 레이어라면 [x, y, z] 3개입니다.

4. linear와 ease

linear는 처음부터 끝까지 같은 속도로 움직입니다. 그래서 출발과 도착이 딱딱해 보입니다. 같은 자리에 ease를 쓰면 천천히 출발해서 천천히 멈춥니다.

ease(time, 0, 3, [200, 540], [1720, 540])

이름	움직임
linear	처음부터 끝까지 같은 속도
ease	천천히 출발, 천천히 도착
easeIn	천천히 출발, 속도를 유지한 채 도착
easeOut	속도를 낸 채 출발, 천천히 도착

넣는 숫자의 순서와 뜻은 네 가지 모두 똑같습니다. 이름만 바꿔 가며 써 보면 됩니다.

 

 

위 화면은 위에 linear, 아래에 ease를 넣고 0초 24프레임에서 멈춘 모습입니다. 같은 시간인데 linear는 X 605.7, ease는 X 467.1입니다. ease는 아직 천천히 출발하는 중이라 뒤처져 있고, 끝으로 갈수록 따라잡아 3초에 같은 자리에 도착합니다.

5. 활용: 0%에서 100%까지 올라가는 숫자

3편의 Math.round와 합치면 로딩 화면 같은 숫자 카운터가 됩니다. 텍스트 레이어의 Source Text(소스 텍스트)에 입력합니다.

Math.round(linear(time, 0, 3, 0, 100)) + "%"

 

 

3초 동안 0%에서 100%까지 올라가고, 그 뒤로는 100%에서 멈춥니다. 위 화면은 1초 18프레임에서 53%인 순간입니다. ease로 바꾸면 끝에서 천천히 멈춰 더 자연스럽습니다.

6. 레이어가 시작할 때부터 세기

time은 컴포지션의 시간이라서, 레이어를 타임라인 뒤쪽(예: 5초)으로 옮기면 페이드인이 이미 끝난 상태로 나타납니다. 3편에서 배운 inPoint(레이어가 시작하는 시간)를 빼 주면 레이어가 시작한 순간부터 셉니다.

linear(time - inPoint, 0, 1, 0, 100)

 

 

위 화면은 2초에서 시작하는 레이어를 2초 11프레임에서 본 모습입니다. 시작하고 0.37초쯤 지났으니 불투명도가 37%입니다. 레이어를 어디로 옮겨도 시작하고 1초 동안 나타납니다. 자막 레이어 여러 개에 같은 코드를 붙여 넣어 두면, 위치만 옮겨도 각각 알아서 페이드인됩니다.

7. 슬라이더 하나로 여러 속성 움직이기

이번 편의 핵심입니다. linear는 t 자리에 time 말고 슬라이더 값도 넣을 수 있습니다. 2편의 슬라이더와 5편에서 쓴 Null 개체를 다시 씁니다.

1. Layer > New > Null Object로 Null 1을 만듭니다.
2. Null 1에 Effect > Expression Controls > Slider Control을 넣고 이름을 "진행"으로 바꿉니다.
3. 셰이프 레이어 하나의 Position, Rotation, Scale에 아래 코드를 각각 넣습니다.

Position(위치)

var p = thisComp.layer("Null 1").effect("진행")("Slider");
linear(p, 0, 100, [200, 540], [1720, 540])

Rotation(회전)

var p = thisComp.layer("Null 1").effect("진행")("Slider");
linear(p, 0, 100, 0, 360)

Scale(비율)

var p = thisComp.layer("Null 1").effect("진행")("Slider");
var s = linear(p, 0, 100, 50, 150);
[s, s]

 

 

위 화면은 "진행"이 51일 때입니다. 위치 975.2, 비율 101%, 회전 183.6°로, 세 값이 모두 각자 범위의 절반쯤에 와 있습니다. 원 모양이라 회전은 눈에 보이지 않지만 값은 함께 바뀝니다. 사각형이나 아이콘에 넣으면 도는 모습까지 보입니다.

 

 

"진행"을 2에서 82로 끌면 원이 작게 왼쪽에 있다가 커지면서 오른쪽으로 갑니다. 슬라이더에 키프레임 두 개만 찍으면 세 속성이 함께 움직입니다. 속도를 바꾸고 싶을 때 슬라이더 키프레임 두 개만 옮기면 되니, 속성마다 키프레임을 맞춰 옮길 필요가 없습니다.

슬라이더 값이 0~100이 아니어도 됩니다. tMin, tMax만 슬라이더 범위에 맞춰 주면 됩니다. 한글 UI라면 마지막 이름이 "슬라이더"입니다.

8. 자주 하는 실수

증상	확인할 것
값이 전혀 안 바뀐다	첫 번째 자리에 time이나 슬라이더처럼 바뀌는 값을 넣었는지
2초 뒤에 멈춘다	정상입니다. linear는 범위 밖에서 끝값을 유지합니다
움직임이 너무 빠르거나 느리다	tMin, tMax가 초 단위인지(프레임 수가 아님)
레이어를 옮기면 페이드인이 사라진다	time 대신 time - inPoint를 썼는지
위치 코드에서 오류	value1, value2가 둘 다 [x, y] 배열인지
크기가 찌그러진다	값 하나를 뽑아 [s, s]로 넣었는지(4편)
출발과 도착이 딱딱하다	linear 대신 ease를 써 볼 것

AI에게 linear를 시킬 때 확인할 것

AI가 짜 준 코드를 그대로 붙여 넣기 전에 이것만 보면 됩니다.

• time * 50이나 value + time * 100처럼 time에 숫자만 곱한 코드는 멈추지 않습니다. 끝나는 시간이 정해져 있다면 linear(time, 0, 2, 0, 100)처럼 바꾸면 됩니다.
• 시간 범위에 60, 90 같은 큰 숫자가 있으면 프레임 수로 착각했을 수 있습니다. 표현식의 time은 초 단위입니다.
• 자막처럼 여러 레이어에 쓸 코드인데 time만 있으면, 뒤에 놓인 레이어는 이미 끝난 상태로 나옵니다. time - inPoint인지 확인합니다.
• "부드럽게 멈추게" 해 달라고 했는데 linear가 오면 ease로 이름만 바꿔 보세요.

정리

항목	핵심
linear(t, tMin, tMax, v1, v2)	t의 범위를 v1~v2로 옮김
범위 밖	끝값에서 멈춤
배열	[x, y]끼리 넣으면 위치도 가능
ease, easeIn, easeOut	같은 순서, 움직임만 부드럽게
time - inPoint	레이어가 시작할 때부터 세기
슬라이더 + linear	슬라이더 하나로 여러 속성

다음 편

8편에서는 loopOut을 다룹니다. 키프레임 몇 개만 찍어 두고 그 움직임을 끝없이 반복시키는 기능으로, 돌아가는 아이콘이나 깜빡이는 화살표처럼 반복되는 움직임을 만들 때 씁니다.

 

참고: Adobe After Effects 표현식 공식 문서, François Lefebvre 『After Effects: The Power of Expression』(개념 참고), Manuel Steinhauser 『Expressions Cheat Sheet』(예제 참고)