Keyframe 편집기

5 min read

Keyframes을 사용하여 복잡하고 정확한 애니메이션을 만듭니다.

사이트맵 사이트맵

Keyframes
를 보여주는 타임 라인 패널 사이트맵

키프레임이란?

Keyframe은 특정 시점에서 특정 속성 값을 정의합니다. PinePaper는 키프레임 사이에 자동으로 시작(interpolates)을 통해 원활한 전환을 만듭니다.

타임라인 열기

타임 라인 패널은 화면의 하단에 있습니다. 숨겨진 경우:

  1. 메뉴에서 보기
  2. 선택 시간 표시

Keyframes 만들기

방법 1: 재산 패널

  1. 제품 선택
  2. Playhead를 원하는 시간에 설정
  3. 속성 변경 (위치, 규모, 불투명, 색상)
  4. Keyframe은 자동으로 생성됩니다

방법 2: 타임 라인 패널

  1. 제품 선택
  2. 원하는 시간에 타임라인을 클릭
  3. ClickAdd Keyframe 또는 K를 누르십시오

Keyframeable 속성

회사 정보 이름 *
제품정보 X의 Y 협조
제품정보 크기 (균일 또는 X/Y)
회전 속도 정도에 있는 각
오파시티 투명도 (0-1)
채우는 색깔 품목 색깔
이름* 텍스트 크기 (텍스트 항목 만)

Keyframes 편집

이동 Keyframes

Keyframe을 왼쪽 또는 오른쪽으로 드래그하여 타임라인을 변경합니다.

편집 값

  1. Keyframe을 클릭해서 선택하기
  2. 속성 패널의 값을 수정
  3. 변경은 그 keyframe에 적용

키프레임 삭제

  1. 키프레임 선택
  2. Delete 또는 마우스 오른쪽 버튼 -> 화살표 키 프레임

Easing 기능

Keyframes 사이 애니메이션의 가속:

지원하다 이름 *
제품정보 일정한 속도
Ease 에 느린 시작, 빠른 끝
Ease 아웃 빠른 시작, 느린 끝
Ease 인 아웃 느린 시작과 끝
이름* Bouncy 끝

Playback 통제

제품정보 바로가기 - 연혁
놀이/쉼 크기: Space 토글 재생
시작하기 홈 시작하기
바로가기 모델 번호: End 맨 위로
분할 클립 사이트맵 Playhead의 밑에 keyframe 클립을 분할하십시오

트림과 분할

각 키프레임 애니메이션 아이템은 타임 라인에 드래그 가능 클립 블록으로 나타납니다 (키프레임 다이아몬드 뒤에 인디고 바). 클립 블록을 사용하면 :

  • 신체를 드래그 - 캔버스 시간에 전체 애니메이션을 이동 (timeOffset).
  • 왼쪽 가장자리를 드래그 - 재생 하위 범위를 시작합니다. 바의 오른쪽 가장자리는 Premiere / Canva 컨벤션과 일치하여 앵커됩니다.
  • 오른쪽 가장자리를 드래그 - 마지막 키프레임의 시간에 클램프 된 재생 하위 범위의 끝을 트리밍.
  • 압력 S 클립 내부의 플레이헤드와 함께 플레이헤드를 분할합니다. 새로운 조각은 그것의 자신의 레지스트리 입장이 됩니다; 나누는 것은 N+1 독립적인 조각을 일으킵니다.

자료실

이 항목에 클립 블록 UI지도:

제품정보 이름 *
사이트맵 클립이 시작되는 캔버스 시간
사이트맵 첫번째 keyframe 자료 시간 클립 놀이 (과태 0)
사이트맵 마지막 keyframe-data 시간 클립 놀이 (과태 마지막 keyframe 시간)

클립의 캔버스 창 밖에 아이템은 visible=false를 통해 숨겨져 있습니다 - 불투명은 혼자 남아 있으므로 불투명-animating keyframes는 창 내부에서 여전히 작동합니다.

// Programmatic equivalent of right-edge trim.
const item = app.create('text', {
  content: 'Reveal', x: 400, y: 300,
  animationType: 'keyframe',
  timeOffset: 2,        // clip starts at canvas time 2s
  clipInPoint: 1,       // skip the first 1s of keyframe data
  clipOutPoint: 4,      // stop at 4s of keyframe data → 3s clip window
  keyframes: [
    { time: 0, properties: { opacity: 0 } },
    { time: 1, properties: { opacity: 1 } },
    { time: 4, properties: { opacity: 0.3 } },
  ],
});

어떤 분할 당신에게 제공

분할은 깊은 복사입니다. Paper.js 항목은 Item.clone() (사전 변형 + 스타일); 키프레임 어레이 (keyframes, contentKeyframes, propertyEasings)를 통해 복제됩니다. JSON 둥근 줄무늬이므로 각 조각은 데이터를 소유합니다. Chaining splits scales 선형으로: N splits ⇒ N+1 독립적 인 조각, 각각의 자신의 레지스트리 항목. 실제적인 결과:

  • PER-piece easing - 한 조각에 단일 키 프레임의 easing 변경; 다른 사람은 터치되지 않습니다.
  • PER-piece 색상 또는 값 간섭 - 키프레임 fillColor, strokeColor 또는 한 조각에 어떤 애니메이션 속성을 편집하여 창에 다른 변환을 적용하십시오. 기존의 색상과 그라디언트 interpolators 핸들 HSL / RGB lerp unchanged.
  • PER-piece 공간 경로 - spatialHandles는 개별 키프레임 내부에 살고 있으므로 한 조각의 애니메이션의 경로를 다른 사람에게 영향을 미치지 않습니다.

조각은 캔버스 창이 오버랩하지 않도록 시각적으로 오버랩하지 않습니다. 새로운 캔버스 시간 위치에 어떤 조각을 드래그, 다시 트림, 또는 더 분할.

예: 애니메이션에서 Fade

  1. 본문 바로가기
  2. 시간 0s: 0에 Opacity를 놓으십시오
  3. 시간 1s: Opacity를 1에 놓으십시오
  4. Ease Out로 설정
  5. 보도자료

예: 색상 전환

  1. 제품 선택
  2. 시간 0s: #FF0000 (빨강)에 채우는 색깔을 놓으십시오
  3. 시간 2s: #0000FF (파란색)에 채우는 색깔을 놓으십시오
  4. 스펙트럼을 통해 부드러운 전환

예: 카메라 팬 효과

대형 이미지를 통해 영화 팬 애니메이션을 만들 수 있습니다.

어떻게 작동하나요

캔버스보다 더 큰 이미지를 가질 때 :

  • canvas bounds 카메라 뷰포트로 행동
  • 이미지 왼쪽 = 카메라 팬 right
  • image up = 카메라 팬 다운

팬 애니메이션 만들기

  1. 캔버스 크기 원하는 출력 (예 : 1920 × 1080 HD 비디오)
  2. 대형 이미지 (캔버스보다 큰)
  3. 이미지를 선택 시작보기가 표시됩니다
  4. 키프레임 이미지 위치를 이동

Row-by-Row 스캐닝 패턴

뱀 패턴의 이미지를 스캔하려면 :

(주) 이미지 X 이미지 Y 카메라 효과
0개 0 0 왼쪽 코너
2개 -1920 0 행 1의 맞은편에 팬
2.5s -1920 -200 맨 위로
4.5s 0 -200 팬은 연속 2을 왼쪽
5개 0 -400 맨 위로
7개 -1920 -400 행 3에 맞은 팬

대안: 카메라가 따릅니다

객체를 따르는 동적 카메라 운동 :

  1. 작은 마커 또는 경로 만들기
  2. 마커에 camera_follows 관계 추가
  3. Marker 위치
  4. Viewport는 자동적으로 따릅니다

사이트맵

사진기 팬 끝:

  • UseEase In-Out 매끄러운 영화 운동
  • 직업적인 결과를 위해 일관된 팬 속도를 지키십시오
  • 제일 질을 위한 MP4 또는 WebM로 수출

사이트맵

제품 정보

사이트맵

Keyframe 팁:

  • 매끄럽게 애니메이션을 위한 몇몇 keyframes를 사용하십시오
  • Ease In-Out는 자연 보기 운동을 창조합니다
  • 자주 타이밍 확인하기

사이트맵

사이트맵

정보: 매우 복잡한 키프레임 애니메이션 (많은 키프레임)은 수출 성능에 영향을 미칠 수 있습니다.

사이트맵