본문 바로가기
카테고리 없음

🧠 After Effects와 삼각함수 표현식 완벽 정리

by DS80 2025. 5. 7.
반응형

AE의 표현식은 자바스크립트를 기반으로 하며, Math.sin(), Math.cos(), Math.tan() 같은 삼각함수를 사용하여 주기적, 곡선적, 회전 애니메이션을 구현할 수 있습니다.


✅ [수학적 정의]

삼각함수는 다음과 같이 정의됩니다 (직각삼각형 기준):

함수정의의미

sin 반대변 / 빗변 y축 진동
cos 인접변 / 빗변 x축 진동
tan 반대변 / 인접변 기울기

단위원을 기준으로 해석 시:

  • sin: y 좌표 제어
  • cos: x 좌표 제어
  • tan: y / x, 경사 표현

✅ AE 예제들 모음

🔸 원형 궤도 회전

x = center[0] + Math.cos(time * speed) * radius;
y = center[1] + Math.sin(time * speed) * radius;
[x, y];

🔸 진동 효과 (위아래)

amplitude = 20;
frequency = 3;
value + [0, Math.sin(time * frequency) * amplitude];

🔸 깜빡임 애니메이션

opacityValue = Math.sin(time * 4) > 0 ? 100 : 0;

🔸 파형 형태 움직임

value + [Math.sin(time) * 50, Math.cos(time) * 30];

🔸 경사 애니메이션 (tan 사용)

slope = Math.tan(time);
[x, value[1] + slope * 20];

📚 결론

삼각함수는 단순 반복이 아니라, 곡선의 형태로 시간에 따라 위치를 변화시키는 함수입니다. AE에서는 이를 활용하여 자연스럽고 복잡한 모션을 쉽게 구현할 수 있습니다.


✅ 워드프레스용 콘텐츠 (SEO 최적화, 전문가 tone)

[After Effects Expression] 삼각함수(sin, cos, tan) 기반 모션그래픽 완전 정복

After Effects 표현식은 수학적인 개념을 기반으로 애니메이션을 정밀하게 제어할 수 있게 해줍니다. 그중에서도 Math.sin(), Math.cos(), Math.tan()은 시간(time)을 입력값으로 사용해 반복적이고 자연스러운 모션을 구현하는 데 가장 핵심적인 도구입니다.


✅ 수학 개념 정리: 삼각함수 기본

함수 정의 (직각삼각형 기준) 용도 범위 주기
sin 반대변 / 빗변 위아래 진동 -1 ~ 1
cos 인접변 / 빗변 좌우 진동 -1 ~ 1
tan 반대변 / 인접변 기울기 표현 -∞ ~ ∞ π

단위원 상의 점을 기준으로, cos(θ)는 x축 좌표, sin(θ)는 y축 좌표를 의미하며, tan(θ)는 이 두 좌표의 비율로 정의됩니다.


✅ AE 실전 예제: 삼각함수 표현식 모음

  • 원형 회전:
x = center[0] + Math.cos(time * speed) * radius;
y = center[1] + Math.sin(time * speed) * radius;
[x, y];
  • Opacity 깜빡임:
Math.sin(time * 3) > 0 ? 100 : 0;
  • 위아래 진동:
value + [0, Math.sin(time * 2) * 40];
  • 좌우 흔들림:
value + [Math.cos(time * 1.5) * 30, 0];
  • 기울기 이동 (tan 사용):
slope = Math.tan(time * 0.3);
[x, value[1] + slope * 15];

🎓 1. 삼각함수란 뭔가요?

수학에서 삼각함수는 각도에 따라 변하는 비율을 나타내는 함수야. 특히 직각삼각형이나 단위원(반지름 1인 원) 위에서 자주 쓰여.

함수뜻직각삼각형에서의 정의단위원에서의 의미모션에서 주로 쓰는 방향
sin(θ) 사인 반대편 / 빗변 y좌표 위아래 움직임
cos(θ) 코사인 인접변 / 빗변 x좌표 좌우 움직임
tan(θ) 탄젠트 반대편 / 인접변 y / x (기울기) 기울기 또는 경사
 

✅ 2. 그럼 Math.sin, Math.cos, Math.tan은 뭐야?

Math는 자바스크립트에서 수학 함수들이 들어있는 객체야. AE 표현식은 JS 기반이니까 이걸 그대로 써.

표현식의미
Math.sin(x) x값(라디안 단위)의 사인값 반환 (위아래 진동)
Math.cos(x) x값의 코사인값 반환 (좌우 진동)
Math.tan(x) x값의 탄젠트값 반환 (기울기 증가)
 


🧩 결론

After Effects에서 sin, cos, tan은 단순 수학 공식이 아니라 시간과 공간을 시각적으로 연결하는 도구입니다. 이들을 자유자재로 활용할 수 있다면, 더 역동적이고 정교한 모션그래픽을 구현할 수 있습니다.

반응형