튜토리얼: 물리학 기반 애니메이션

5 min read

Bounc, elastic 및 중력 효과를 사용하여 멋진 애니메이션을 만듭니다.

시간: 15분 어려움: 지원하다

당신이 만든 것

물리학 기반의 텍스트 애니메이션, 궤도 요소, 부드러운 카메라 움직임과 함께 극적인 제목이 표시됩니다.

사이트맵 사이트맵 사이트맵 사이트맵 귀하의 브라우저는 비디오를 지원하지 않습니다. 비디오다운로드. 사이트맵

Physics 기반 타이틀 애니메이션 반송 및 탄성 효과
사이트맵

특징 적용

  • Bounce easing - 현실적 물리학과 공 드롭 효과
  • Elastic easing — 봄과 같은 놀라운 애니메이션
  • Keyframe sequencing - 정확한 적시 멀티 엘리먼트 choreography
  • Orbital relationships - 센터 포인트 주변의 요소 궤도
  • 카메라 애니메이션 - 부드러운 줌과 팬 효과

1 단계 : 캔버스를 설정

  1. PinePaper 편집기 열기
  2. **YouTube Thumbnail (1280×720)**에 캔버스 크기를 설정
  3. 배경 색상을 #0a0a0a로 설정 (블랙)

단계 2: 메인 제목 생성

  1. 텍스트 도구에 대한 T를 눌러
  2. 센터 캔버스를 클릭, 유형: PHYSICS
  3. 재산 패널에서:
    • 글꼴 크기: 120
    • 폰트 가족: 인터 (또는 bold sans-serif)
    • 색깔: #ffffff
  4. 캔버스의 중심

Step 3: Gravity Drop 애니메이션 추가

우리는 바운드 효과로 위의 제목 드롭을 만들 것입니다.

  1. 제목 텍스트 선택
  2. 오픈 타임라인 패널 (bottom)
  3. Keyframes 추가:
(주) 위치 Y 오파시티 지원하다
0.0s -100 (오프 스크린) 0 —
0.3s 360 (센터) 1 ღ♥ღ

관련 코드:

const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

단계 4: 탄력 있는 효력을 가진 subtitle를 추가하십시오

  1. 자막 텍스트 만들기: IN MOTION
  2. 글꼴 크기: 48, 색깔: #60a5fa (파란색)
  3. 주요 제목 아래 위치

탄력 있는 애니메이션 추가:

(주) 제품정보 오파시티 지원하다
0.4s 0 0 —
0.8s 1 1 큰 가슴

관련 코드:

const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

단계 5: Orbiting 입자를 추가

궤도 요소와 시각적인 관심을 창조하십시오.

  1. 작은 원형 만들기: 반경 8, 컬러 #fbbf24 (amber)
  2. 센터 근처
  3. orbits 관계 추가:
const particle1 = app.create('circle', {
  x: 640, y: 360,
  radius: 8,
  color: '#fbbf24'
});

// Make it orbit around the title center
app.addRelation(particle1.data.id, title.data.id, 'orbits', {
  radius: 150,
  speed: 0.5,
  direction: 'clockwise'
});
  1. 중복하고 다른 레이디와 속도를 가진 2개의 더 입자를 창조하십시오:
    • 입자 2: 반경 120의 속도 0.7의 색깔 #f472b6 (분홍색)
    • 입자 3: 반경 180의 속도 0.3의 색깔 #34d399 (녹색)

단계 6: 사진기 Zoom를 추가하십시오

카메라 애니메이션으로 영화 느낌을 만듭니다.

// Zoom in slightly during the reveal
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

7 단계 : 미리보기 및 수출

  1. Space를 눌러 미리 보기
  2. 필요에 따라 타이밍 조정
  3. WebM (추천) 또는 MP4로 내보내기
    • 기간: 3 초
    • 프레임 속도: 60 fps (다른 물리학)
    • 루프: 예 (사회 미디어)

비밀번호

여기에 참조를위한 전체 애니메이션 코드 :

// Setup
app.setCanvasSize('youtube-thumbnail');
app.setBackgroundColor('#0a0a0a');

// Main title with gravity drop
const title = app.create('text', {
  content: 'PHYSICS',
  x: 640, y: -100,
  fontSize: 120,
  color: '#ffffff',
  fontFamily: 'Inter'
});

app.addAnimation(title.data.id, [
  { time: 0, properties: { y: -100, opacity: 0 } },
  { time: 0.3, properties: { y: 360, opacity: 1 }, easing: 'bounce' }
]);

// Subtitle with elastic spring
const subtitle = app.create('text', {
  content: 'IN MOTION',
  x: 640, y: 450,
  fontSize: 48,
  color: '#60a5fa'
});

app.addAnimation(subtitle.data.id, [
  { time: 0.4, properties: { scale: 0, opacity: 0 } },
  { time: 0.8, properties: { scale: 1, opacity: 1 }, easing: 'elastic' }
]);

// Orbiting particles
const colors = ['#fbbf24', '#f472b6', '#34d399'];
const orbits = [
  { radius: 150, speed: 0.5 },
  { radius: 120, speed: 0.7 },
  { radius: 180, speed: 0.3 }
];

orbits.forEach((orbit, i) => {
  const particle = app.create('circle', {
    x: 640, y: 360,
    radius: 8,
    color: colors[i]
  });

  app.addRelation(particle.data.id, title.data.id, 'orbits', {
    radius: orbit.radius,
    speed: orbit.speed,
    phase: i * (Math.PI * 2 / 3) // Spread evenly
  });
});

// Camera animation
app.addRelation('camera', null, 'camera_animates', {
  duration: 2,
  keyframes: [
    { time: 0, zoom: 0.9, center: [640, 360] },
    { time: 0.5, zoom: 1.1, center: [640, 360], easing: 'easeOut' },
    { time: 2, zoom: 1, center: [640, 360], easing: 'easeInOut' }
  ]
});

// Play with 3-second loop
app.playKeyframeTimeline(3, true);

관련 기사

Staggered 편지 Reveal

비틀어진 애니메이션을 가진 편지 교원질을 사용하십시오:

const collage = app.letterCollage.create('PHYSICS', {
  style: 'tile',
  palette: 'neon',
  fontSize: 80
});

app.letterCollage.applyStaggeredAnimation(collage.collageId, {
  effect: 'popIn',
  staggerDelay: 0.08,
  duration: 0.4,
  easing: 'elastic'
});

Path 애니메이션

성분은 Bezier 곡선을 따릅니다:

const star = app.create('star', {
  x: 100, y: 360,
  radius: 20,
  color: '#fbbf24'
});

// Animate along a curved path
app.animate(star, {
  animationType: 'path',
  pathPoints: [
    [100, 360],   // Start
    [400, 200],   // Control point 1
    [800, 500],   // Control point 2
    [1180, 360]   // End
  ],
  pathSmooth: true,
  animationSpeed: 0.3
});

Pro 팁

타이밍은 모든 - 약간 다른 시간에 시작 요소 (0.1-0.2s apart) 더 자연스러운 느낌.

Combine easings — bounce for landing, elastic for scaling, easeOut for fades.

60fps for physics - 더 높은 프레임 속도가 바운드 / 탄성 효과가 더 매끄럽습니다.

다음 단계