MOVARO

Appearance

ALPHA

Auto Fade Expression ​

레이어의 시작과 끝에서 자동으로 페이드 인/아웃 되는 효과입니다.

Preview ​

레이어의 inPoint와 outPoint를 기준으로 자동 페이드됩니다. Opacity에 적용합니다.

Fade In
Fade Out
In + Out

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

Code ​

자동 페이드 인/아웃 (Opacity에 적용) ​

javascript
// Auto Fade Expression
// 레이어 시작과 끝에서 자동 페이드

fadeIn = 0.5;   // 페이드 인 시간(초)
fadeOut = 0.5;  // 페이드 아웃 시간(초)

// 레이어 시작/끝 시간
inPoint = thisLayer.inPoint;
outPoint = thisLayer.outPoint;

// 페이드 계산
if (time < inPoint + fadeIn) {
  // 페이드 인
  linear(time, inPoint, inPoint + fadeIn, 0, 100);
} else if (time > outPoint - fadeOut) {
  // 페이드 아웃
  linear(time, outPoint - fadeOut, outPoint, 100, 0);
} else {
  // 완전 불투명
  100;
}

페이드 인만 ​

javascript
fadeIn = 1;  // 1초 동안 페이드 인

inPoint = thisLayer.inPoint;

if (time < inPoint + fadeIn) {
  linear(time, inPoint, inPoint + fadeIn, 0, 100);
} else {
  100;
}

페이드 아웃만 ​

javascript
fadeOut = 1;  // 1초 동안 페이드 아웃

outPoint = thisLayer.outPoint;

if (time > outPoint - fadeOut) {
  linear(time, outPoint - fadeOut, outPoint, 100, 0);
} else {
  100;
}

Parameters ​

파라미터설명
fadeIn페이드 인에 걸리는 시간 (초)
fadeOut페이드 아웃에 걸리는 시간 (초)
inPoint레이어 시작 시간
outPoint레이어 끝 시간

Examples ​

빠른 페이드 (0.2초) ​

javascript
fadeIn = 0.2;
fadeOut = 0.2;

inPoint = thisLayer.inPoint;
outPoint = thisLayer.outPoint;

if (time < inPoint + fadeIn) {
  linear(time, inPoint, inPoint + fadeIn, 0, 100);
} else if (time > outPoint - fadeOut) {
  linear(time, outPoint - fadeOut, outPoint, 100, 0);
} else {
  100;
}

느린 페이드 (2초) ​

javascript
fadeIn = 2;
fadeOut = 2;

inPoint = thisLayer.inPoint;
outPoint = thisLayer.outPoint;

if (time < inPoint + fadeIn) {
  linear(time, inPoint, inPoint + fadeIn, 0, 100);
} else if (time > outPoint - fadeOut) {
  linear(time, outPoint - fadeOut, outPoint, 100, 0);
} else {
  100;
}

이징 적용 페이드 ​

javascript
fadeIn = 0.5;
fadeOut = 0.5;

inPoint = thisLayer.inPoint;
outPoint = thisLayer.outPoint;

if (time < inPoint + fadeIn) {
  // Ease Out (시작이 빠르고 끝이 느림)
  t = (time - inPoint) / fadeIn;
  (1 - Math.pow(1 - t, 3)) * 100;
} else if (time > outPoint - fadeOut) {
  // Ease In (시작이 느리고 끝이 빠름)
  t = (outPoint - time) / fadeOut;
  (1 - Math.pow(1 - t, 3)) * 100;
} else {
  100;
}

Advanced ​

스케일과 함께 페이드 ​

javascript
// Scale에 적용 - 작아지면서 페이드 아웃
fadeIn = 0.5;
fadeOut = 0.5;
minScale = 80;
maxScale = 100;

inPoint = thisLayer.inPoint;
outPoint = thisLayer.outPoint;

if (time < inPoint + fadeIn) {
  s = linear(time, inPoint, inPoint + fadeIn, minScale, maxScale);
} else if (time > outPoint - fadeOut) {
  s = linear(time, outPoint - fadeOut, outPoint, maxScale, minScale);
} else {
  s = maxScale;
}

[s, s];

블러와 함께 페이드 ​

javascript
// Gaussian Blur Amount에 적용
fadeIn = 0.5;
fadeOut = 0.5;
maxBlur = 20;

inPoint = thisLayer.inPoint;
outPoint = thisLayer.outPoint;

if (time < inPoint + fadeIn) {
  linear(time, inPoint, inPoint + fadeIn, maxBlur, 0);
} else if (time > outPoint - fadeOut) {
  linear(time, outPoint - fadeOut, outPoint, 0, maxBlur);
} else {
  0;
}

마커 기반 페이드 ​

javascript
// 마커에서 페이드 트리거
fadeTime = 0.5;

if (marker.numKeys > 0) {
  nearestMarker = marker.nearestKey(time);
  if (nearestMarker.time <= time) {
    t = time - nearestMarker.time;
    if (t < fadeTime) {
      linear(t, 0, fadeTime, 0, 100);
    } else {
      100;
    }
  } else {
    0;
  }
} else {
  100;
}

Tips ​

레이어 길이 자동 적용

thisLayer.inPoint와 thisLayer.outPoint를 사용하면 레이어 길이가 변해도 자동으로 페이드가 적용됩니다.

여러 레이어에 적용

이 익스프레션을 복사해서 여러 레이어에 붙여넣으면 각 레이어가 자신의 시작/끝 시간에 맞게 페이드됩니다.

페이드 시간 주의

페이드 시간이 레이어 길이의 절반을 넘으면 페이드 인/아웃이 겹칠 수 있습니다.