고급 모드에서 애니메이션 만들기

고급 모드 타임라인

고급 모드에서는 애니메이션의 시작과 끝을 나타내는 키프레임을 타임라인에 추가하는 방식으로 각 요소에 애니메이션을 적용할 수 있습니다. 요소를 특정 키프레임에서 수정하면 Google Web Designer에서 키프레임 사이에 애니메이션을 생성합니다.

범위라고 하는 키프레임 사이의 공간에 따라 각 애니메이션의 재생 시간이 결정됩니다. 예를 들어 애니메이션을 더 빠르게 만들려면 키프레임을 서로 더 가까이 배치해야 합니다. 이징을 사용하면 전환 속도를 빠르거나 느리게 변경할 수 있습니다.

고급 모드에서 요소에 애니메이션을 적용하는 방법:

1. 타임라인을 마우스 오른쪽 버튼으로 클릭한 후 키프레임 삽입을 선택하여 키프레임을 추가합니다.
2. 애니메이션이 끝나는 지점에서 원하는 대로 요소의 속성을 변경합니다. 예를 들어 요소의 위치, 색상, 불투명도 또는 세 가지 속성을 모두 변경할 수 있습니다.

키프레임을 여럿 추가하면 요소 하나에 여러 애니메이션 범위를 연결할 수 있습니다. 다음에 애니메이션을 적용할 때까지 일정 시간 동안 요소를 변경되지 않은 상태로 유지하려면 어떤 속성도 변경하지 않은 상태로 키프레임을 추가합니다.

예

이미지가 페이드 인되었다가 일시중지된 후 왼쪽으로 슬라이드되는 위 애니메이션에서는 4개의 키프레임이 사용됩니다.

1. 첫 번째 키프레임에 따라 애니메이션의 시작 지점에 있는 요소의 상태가 설정됩니다. 이 경우 이미지의 불투명도가 0으로 설정되어 있어 이미지가 표시되지 않습니다.
2. 두 번째 키프레임에서는 요소의 불투명도가 1(100%)로 설정되어 있습니다. 앞선 1초 동안 이미지가 페이드 인됩니다.
3. 세 번째 키프레임에서는 요소에 이전 키프레임과 비교하여 변경된 속성이 없습니다. 이 0.5초 동안에는 어떤 애니메이션도 적용되어 있지 않으므로 이미지가 그대로 유지됩니다.
4. 마지막 키프레임에서는 이미지의 오른쪽 절반이 스테이지에 표시되도록 요소의 위치가 변경됩니다. 1초 동안 이미지가 왼쪽으로 슬라이드되어 해당 위치로 변경됩니다.

키프레임에 지정된 속성을 보려면 해당 키프레임을 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 애니메이션 속성을 선택합니다.

키프레임을 추가하는 방법

키프레임을 추가하는 방법으로는 여러 가지가 있습니다. 타임라인에서 애니메이션을 적용할 요소의 레이어를 선택하고 키프레임을 배치하고자 하는 위치로 플레이헤드를 이동합니다. Ctrl/⌘ 키를 누르고 선택하면 여러 레이어를 선택할 수 있습니다. 그런 다음, 다음 중 한 가지 방법을 사용하세요.

• 타임라인을 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 키프레임 삽입을 선택합니다.
• F6 키를 누릅니다.
• 수정 메뉴에서 타임라인 > 키프레임 추가를 선택합니다.

키프레임에 플레이헤드가 없는 경우 애니메이션 요소의 속성을 변경하면, Google Web Designer에서 자동으로 플레이헤드 위치에 키프레임을 추가합니다.

타임라인 작업 영역 길이

타임라인의 끝을 지나 키프레임을 추가하려면 타임라인 작업 영역의 길이를 연장하면 됩니다. 예를 들어 기본 길이는 12초지만 15초 지점에 키프레임을 추가할 수 있습니다. 타임라인 작업 영역의 길이를 변경하려면 다음 단계를 따르세요.

1. 타임라인 상단에서 길이 표시기를 클릭합니다.

   

2. 타임라인 길이의 새 값(초)을 입력합니다. 최소 값은 12초입니다.
3. Enter 키를 누릅니다.

타임라인 작업 영역은 애니메이션에 맞게 충분히 길어야 합니다. 타임라인 길이에서 사용되지 않은 부분은 애니메이션 재생 시간에 영향을 주지 않습니다.

동영상 광고 타임라인은 최대 5분입니다.

타임라인 배율

타임라인의 오른쪽 상단 근처에 있는 확대/축소 슬라이더를 드래그하여 타임라인의 배율을 조정합니다. 여러 키프레임을 서로 가깝게 배치한 경우 확대 기능이 유용할 수 있습니다. 확대/축소 기능을 사용하는 경우 타임라인의 뷰만 변경되며 애니메이션의 타이밍에는 어떠한 영향도 주지 않습니다.