After Effects: 모듈로 연산자(%)

After Effects 표현식의 모듈로 연산자(%)에 대한 심층 설명

나머지 연산자라고도 알려진 모듈로 연산자(%)는 표현식 구성에 매우 유용한 도구이지만 초보자에게는 이해하기 쉽지 않을 수 있습니다. 이 문서에서는 해당 기능과 용도에 대해 설명합니다.

%는 방정식의 나머지를 계산하는 데 사용됩니다. 예:

<code>10 % 3</code>

이 표현식은 10을 3으로 나눈 몫이 3이고 나머지가 1이므로 1을 반환합니다.

이는 시간 변수 작업 시 루프를 만드는 데 유용합니다.

루프 표현

After Effects 표현식을 처음 접하는 대부분의 디자이너는 loopOut() 표현식에 익숙합니다. 이를 통해 "cycle"(처음부터 끝까지 순환), "pingpong"(처음부터 끝까지 그리고 다시 시작으로 순환), "offset"(키프레임을 반복하지만 매번 오프셋을 사용하여 값을 사용하여 애니메이션을 생성) 또는 "계속"(마지막 키프레임의 속도를 사용하여 모션을 계속)하여 키프레임 속성을 순환합니다. 이는 매우 포괄적이며 키프레임 애니메이션에 필요한 모든 것을 다룹니다.

그러나

표현식을 반복하려는 경우 loopOut은 실행 가능한 솔루션이 아닙니다. 키프레임을 사용하지 않으려는 데에는 여러 가지 이유가 있을 수 있지만 가장 큰 이유는 값을 동적으로 지속적으로 업데이트해야 하는 경우입니다. 키프레임 세트를 업데이트하는 것보다 슬라이더에 연결된 표현식을 업데이트하는 것이 훨씬 쉽습니다.

모션이 연속적인 경우 선형 또는 용이성으로 충분합니다. 그러나 반복이 필요한 복잡한 애니메이션의 경우 시간 모듈로 연산자를 사용하여 루프를 구현할 수 있습니다.

작동 방식을 보려면 다음 표현식을 복사하여 텍스트 레이어의 소스 텍스트 속성에 붙여넣으세요.

<code>Math.floor(time % 5)</code>

매초마다 0에서 4까지의 레이어 수가 표시되며 5초마다 0으로 되돌아갑니다. 시간이 지남에 따라 나머지 표현식이 1초마다 바뀌기 때문입니다.

Math.floor 함수는 인수를 정수로 반올림합니다.

이를 통해 특정 매개변수 사이의 숫자에 애니메이션을 적용해야 할 때 어떻게 사용하는지 쉽게 알 수 있습니다.

예: 디지털 시계

%를 이용해 디지털 시계를 만들어 볼까요?

초는 0에서 60 사이로 계산되어야 하며, 분은 60 간격마다 증가해야 합니다. 이것을 텍스트 레이어의 소스 텍스트 속성에 다시 붙여넣겠습니다.

<code>10 % 3</code>

표현식을 분석하면 sec 변수는 0부터 60까지 계산되고 Minute 변수는 60의 배수마다 증가합니다(다시 Math.floor를 사용하여 숫자를 반올림합니다). 다음 if 문은 sec 변수가 10보다 작으면 앞에 0을 추가하여 초 변수가 항상 두 자리 숫자인지 확인합니다(원하는 경우 분 동안에도 이 작업을 반복할 수 있습니다). 그런 다음 시간 구분 기호를 사용하여 함께 결합하세요.

카운터가 시간과 독립적으로 작동해야 하는 경우 시간을 슬라이더로 바꾸고 해당 값을 설정하면 동일한 효과를 얻을 수 있습니다.

모듈로 연산자와 After Effects 텍스트 표현 선택기를 사용하여 시간 구분 기호를 깜박이게 할 수도 있습니다.

텍스트 레이어로 이동하여 텍스트 레이어에 불투명도 애니메이션 옵션을 추가합니다(이 작업을 수행하는 방법을 잘 모르는 경우 이 기사에서 이에 대한 모든 내용을 확인할 수 있습니다). 그런 다음 표현식 선택기를 추가하고 범위 선택기를 제거하십시오.

애니메이터의 불투명도를 0으로 설정하고 양 속성에 다음 표현식을 추가합니다.

//디지털 시계 구분 기호가 깜박입니다. //표현식 선택기에 추가

분 = Math.floor(시간 / 60);

분 = 10 && textIndex == 3 ? Math.floor(time2 % 1.5) 100 : 0;

분 변수의 자릿수가 고정되어 있지 않다는 점을 토대로 조건문을 작성했습니다. 먼저 소스 텍스트 속성에서 분 변수를 복사합니다. 그런 다음 이를 사용하여 시간 구분 기호의 textIndex 값을 계산합니다. 분 표시에 숫자가 하나만 있으면 2가 됩니다. 분 표시가 10을 초과하면 3이 됩니다. 조건문은 아래와 같이 if 문으로 작성하여 수행되는 작업을 더 자세히 설명할 수도 있습니다.

if (분 = 10 && textIndex == 3) Math.floor(time2 % 1.5) 100 그 외 0

분이 10보다 작고 textIndex가 2이면 Math.floor(time2 % 1.5) 100은 텍스트 레이어의 두 번째 문자에 영향을 미칩니다. 모듈로 연산자 덕분에 문자가 깜박입니다(켜기/끄기 비율 2:1). Math.floor 함수는 숫자를 반올림하고 전체 표현식에 최종적으로 100을 곱하여 표현식 선택기의 범위인 0과 100 사이를 전환합니다.

그러나 분이 10 이상이고 textIndex가 3인 경우 효과는 텍스트 레이어의 세 번째 문자에 적용됩니다. 분 표시의 추가 숫자에 대한 설명입니다. 분 표시가 99보다 길어야 하는 경우 시간 구분 기호가 네 번째 위치에 있을 때 표시에 영향을 미치도록 다른 매개변수를 추가해야 합니다.

그러나 분 표시가 일정한 자릿수로 설정되어 있으면 이 설명이 훨씬 간단해집니다.

dividerIndex = 3; textIndex == DividerIndex ? Math.floor(time2 % 1.5) 100 : 0

그렇게 하면 디지털 시계를 얻을 수 있습니다!

모듈로 연산자가 루프 생성에 어떻게 도움이 되는지 보여준 후, 이제 이를 다른 속성에 어떻게 적용할 수 있는지 고려할 수 있습니다.

예: 아날로그 시계

이제 아날로그 시계를 만들어 보겠습니다. 포인터가 틱할 때 일반적으로 지속적인 움직임이 아니라 갑자기 멈추고 시작되는 움직임입니다. 이는 모듈로 연산자가 해결하는 데 도움이 될 수 있는 루프 유형입니다.

시계바늘 레이어의 회전 속성에 붙여넣을 수 있는 다음 표현식을 살펴보겠습니다.

//초침이 회전합니다 프레임 = thisComp.frameDuration;

loopTime = 1; dur = 프레임 * 6; 힘 = 6;

카운터 = Math.floor(time/loopTime); t = 시간 % loopTime;

ease(t, 0, dur, 강도 카운터, 강도 (카운터 1))

먼저 몇 가지 변수를 설정합니다. 프레임은 컴포지션의 프레임 지속 시간으로, 여러 프레임 속도에서 작동할 수 있습니다.

loopTime을 반복하려는 시간으로 설정하세요. 루프가 1초 동안 지속되기를 원하므로 1로 설정했습니다. dur은 루프 내의 애니메이션 지속 시간이므로 프레임 * 6으로 설정하여 6프레임 동안 지속되도록 했습니다. 강도는 애니메이션 값의 변화입니다. 시계 바늘에 애니메이션을 적용하고 있으므로 시계 바늘이 60틱에 한 회전을 완료하도록 6으로 설정했습니다.

다음으로 내 가치를 상쇄하는 데 도움이 되는 카운터 변수를 만듭니다. Math.floor(time/loopTime) 을 사용하여 Math.floor를 사용하여 숫자를 반올림하고 루프와 일치하도록 카운터 속도를 설정하여 만들었습니다. 마지막으로 t는 표현 중심 애니메이션의 시간을 측정하는 데 사용할 수 있는 변수입니다. 이것이 시간 % loopTime이므로 시간이 loopTime에 저장된 숫자에 도달하면 시간이 반복됩니다.

이후에는 애니메이션을 만들 수 있습니다. 이 예에서는 용이성 표현을 사용합니다. 첫 번째 매개변수를 t로 설정하여 회전 값을 루프 시간 변수에 다시 매핑합니다. 다음 두 매개변수는 애니메이션의 시작점과 끝점인 0과 dur입니다. 마지막 두 매개변수는 강도 카운터와 강도 (카운터 1)이며 회전 속성 값입니다. 강도에 카운터를 곱하여 강도 *(카운터 1)로 끝나는 각 루프의 값을 오프셋하여 다음 루프를 준비할 수 있습니다.

이 경우 키프레임 대신 표현식을 통해 모션을 구동하는 것의 장점은 시간 변경을 위한 시계 템플릿을 구축해야 하는 경우입니다. 표현식의 정적 값을 슬라이더에 연결할 수 있으므로 지속적으로 업데이트하기가 더 쉽습니다.

더 고급 표현을 사용하거나 자신만의 기능을 구축하여 더욱 맞춤화된 애니메이션을 만들 수 있습니다.

//초침이 회전합니다 프레임 = thisComp.frameDuration;

loopTime = 1; dur = 프레임 * 6; 변경 = 6;

카운터 = Math.floor(time/loopTime); t = 시간 % loopTime;

easyInOutBack 함수(t, b, c, d, s) { if (s == 정의되지 않음) s = 1.70158; if ((t/=d/2) < 1) return c/2(tt(((s=(1.525))) 1)t - s)) b; return c/2((t-=2)t(((s=(1.525)) 1)t s) 2) b; }

easeInOutBack(t, 0,change, dur, 1.70158)

마지막으로 변수를 생성하여 시작 값을 설정하고 if 문을 사용하여 분침(및 시침) 애니메이션의 첫 번째 반복을 건너뛸 수 있습니다.

//분침 회전 프레임 = thisComp.frameDuration;

loopTime = 60; dur = 프레임 * 6; 강도 = 6; startValue = 180;

카운터 = Math.floor(time/loopTime); t = 시간 % loopTime;

easyInOutBack 함수(t, b, c, d, s) { if (s == 정의되지 않음) s = 1.70158; if ((t/=d/2) < 1) return c/2(tt(((s=(1.525))) 1)t - s)) b; return c/2((t-=2)t(((s=(1.525)) 1)t s) 2) b; }

if (카운터 > 0) { easyInOutBack(t, startValue 강도 * 카운터, 강도, dur, 1.70158) } 또 다른 { 시작값 }

여기서 슬라이더를 startValue 변수에 연결하기만 하면 됩니다. 이렇게 하면 슬라이더의 값을 간단히 변경하여 업데이트할 수 있는 아날로그 시계를 갖게 됩니다.

결론

모듈로 연산자는 다른 방법이 프로젝트 요구에 적합하지 않은 경우 동적 표현을 돕기 위해 루프를 만드는 데 유용합니다.

자신의 프로젝트에서 테스트해 보세요!

의견이 있으신가요? 불분명한 점이 있나요? 아래에 의견을 남겨주세요.

위 내용은 After Effects: 모듈로 연산자(%)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!