Skip to content

Orbit Expression

객체가 원형 또는 타원형 궤도를 따라 움직이는 효과입니다.

Preview

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

Code

기본 원형 궤도 (Position에 적용)

javascript
// Orbit Expression
// 원형 궤도로 회전

centerX = 960;    // 중심 X (컴프 중앙)
centerY = 540;    // 중심 Y
radius = 200;     // 반지름
speed = 1;        // 초당 회전 수
startAngle = 0;   // 시작 각도

angle = startAngle + time * speed * 2 * Math.PI;
x = centerX + Math.cos(angle) * radius;
y = centerY + Math.sin(angle) * radius;

[x, y];

타원 궤도

javascript
centerX = 960;
centerY = 540;
radiusX = 300;    // X축 반지름
radiusY = 150;    // Y축 반지름
speed = 0.5;

angle = time * speed * 2 * Math.PI;
x = centerX + Math.cos(angle) * radiusX;
y = centerY + Math.sin(angle) * radiusY;

[x, y];

다른 레이어 중심으로 회전

javascript
// 특정 레이어를 중심으로 궤도
center = thisComp.layer("Center").transform.position;
radius = 150;
speed = 1;

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

[x, y];

Parameters

파라미터설명
centerX, centerY궤도의 중심점
radius원형 궤도의 반지름
radiusX, radiusY타원 궤도의 X, Y 반지름
speed초당 회전 수 (음수면 반대 방향)
startAngle시작 각도 (라디안)

Examples

빠른 궤도

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

높은 speed 값으로 빠르게 회전합니다.

javascript
radius = 100;
speed = 3;  // 초당 3바퀴

angle = time * speed * 2 * Math.PI;
[960 + Math.cos(angle) * radius, 540 + Math.sin(angle) * radius];

역방향 회전

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

음수 speed 값으로 반시계 방향으로 회전합니다.

javascript
radius = 150;
speed = -1;  // 반시계 방향

angle = time * speed * 2 * Math.PI;
[960 + Math.cos(angle) * radius, 540 + Math.sin(angle) * radius];

나선형 궤도 (점점 커지는)

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

시간이 지남에 따라 반지름이 커지며 나선형으로 회전합니다.

javascript
centerX = 960;
centerY = 540;
startRadius = 50;
growthRate = 30;  // 초당 반지름 증가량
speed = 2;

radius = startRadius + time * growthRate;
angle = time * speed * 2 * Math.PI;

[centerX + Math.cos(angle) * radius, centerY + Math.sin(angle) * radius];

여러 객체 분산 배치

※ 시각적 이해를 위한 애니메이션으로, 실제 결과와 다를 수 있습니다.

index를 활용하여 여러 레이어를 원형으로 균등 배치합니다.

javascript
// 복제된 레이어들을 원형으로 배치
center = [960, 540];
radius = 200;
totalLayers = 8;
speed = 0.5;

// index를 사용하여 각 레이어의 시작 위치 결정
startAngle = (index - 1) / totalLayers * 2 * Math.PI;
angle = startAngle + time * speed * 2 * Math.PI;

[center[0] + Math.cos(angle) * radius, center[1] + Math.sin(angle) * radius];

Advanced

3D 궤도 (기울어진)

javascript
// 기울어진 원형 궤도
centerX = 960;
centerY = 540;
radius = 200;
speed = 0.5;
tilt = 0.3;  // 기울기 (0~1)

angle = time * speed * 2 * Math.PI;
x = centerX + Math.cos(angle) * radius;
y = centerY + Math.sin(angle) * radius * tilt;

[x, y];

궤도 + 자전

javascript
// Rotation에 적용 (객체가 궤도를 돌면서 자전)
orbitSpeed = 1;
spinSpeed = 3;

// 궤도 방향을 바라보면서 추가 회전
orbitAngle = time * orbitSpeed * 360;
spinAngle = time * spinSpeed * 360;

orbitAngle + spinAngle;

Tips

부드러운 궤도

키프레임 없이 익스프레션만으로 완벽하게 부드러운 원형 움직임을 만들 수 있습니다.

여러 레이어 배치

index를 활용하면 복제된 레이어들을 원형으로 고르게 분산 배치할 수 있습니다.

라디안 단위

Math.sin, Math.cos는 라디안을 사용합니다. 도(degree)를 사용하려면 degreesToRadians()로 변환하세요.