이징 정보

이징을 사용하면 애니메이션 전환 속도를 빠르거나 느리게 변경할 수 있습니다. Google Web Designer는 CSS3 사양에 정의된 5개의 표준 이징 기능뿐만 아니라, 고급 모드에서 단계적인 전환 및 맞춤 이징 옵션도 제공합니다.

빠른 모드에서 이징 사용

빠른 모드에서는 썸네일 이미지 사이의 모든 애니메이션 요소에 동일한 이징이 적용됩니다.

빠른 모드에서 이징을 변경하는 방법:

1. 썸네일 이미지 사이의 키프레임 옵션 버튼 을 클릭합니다.
2. 전환 편집기가 열립니다.
   

3. 전환 편집기에서 화살표를 클릭하여 기본 이징 사전 설정을 차례대로 살펴봅니다. 또한 초 단위의 시간을 입력하거나 시간 입력란을 클릭하고 좌우로 드래그하여 이징 시간을 변경할 수도 있습니다.

기본 이징 사전 설정

이징 사전 설정	설명
선형	애니메이션이 일정한 속도로 진행됩니다.
이즈	애니메이션이 중간 속도로 시작된 다음 끝으로 갈수록 느려집니다.
이즈 아웃	애니메이션이 빠르게 시작된 다음 끝으로 갈수록 느려집니다.
이즈 인	애니메이션이 느리게 시작된 다음 빠르게 종료됩니다.
이즈 인 아웃	애니메이션이 느리게 시작되고 종료되지만, 중간에 빠르게 진행됩니다.
단계-종료	애니메이션이 이즈 시간 내내 시작 상태를 유지하다가 바로 종료 상태로 바뀝니다.
단계-시작	애니메이션이 즉시 종료 상태로 바뀝니다.

고급 모드에서 이징 사용

고급 모드에서는 추가 이징 옵션을 사용할 수 있습니다.

• 동시에 여러 범위에서 이징을 변경할 수 있습니다.
• 맞춤 이징을 지정할 수 있습니다.
• 맞춤 이징을 새로운 사전 설정으로 저장하여 다른 범위에서 쉽게 재사용할 수 있습니다.

고급 모드에서 이징을 변경하는 방법:

1. 이징을 수정하려는 애니메이션이 포함된 범위를 오른쪽 버튼으로 클릭합니다. 동시에 여러 이징을 수정하려면, Shift 키를 누른 상태로 클릭하여 연속된 범위를 선택하거나, Control 키(Windows) 또는 Command 키(Mac)를 누른 상태에서 클릭한 다음 선택한 범위 중 하나를 마우스 오른쪽 버튼으로 클릭하여 떨어져 있는 범위를 선택합니다. 애니메이션이 포함된 범위만 이징이 수정됩니다.

2. 팝업 메뉴에서 이징 사전 설정 중 하나를 선택합니다. 또는 이징 옵션...을 선택하여 이징 곡선을 시각적으로 조정하거나 맞춤 이징을 지정합니다.

맞춤 이징을 생성하는 방법:

1. 범위를 오른쪽 버튼으로 클릭하고 이징 옵션...을 선택하여 이징 대화상자를 엽니다.
2. 다음 방법 중 하나를 사용하여 이징을 변경합니다.
   • 제어 핸들을 드래그하여 이징 곡선의 모양을 조정합니다. 제어 핸들의 각도가 곡선의 정도를, 핸들의 길이가 가속 또는 감속의 강도를 결정합니다.
   • 큐빅 베지어 입력란에 원하는 베지어 곡선의 cubic-bezier() 함수 표기법을 입력합니다. 잘못된 값을 입력하면 입력란에 빨간 밑줄이 표시됩니다.
3. 원하는 경우 새로운 사전 설정으로 저장을 클릭하여 이 맞춤 이징을 사전 설정으로 저장할 수 있습니다.
4. 선택한 범위에 이 맞춤 이징을 사용하려면 적용을 클릭합니다.
   

맞춤 이징 사전 설정

• 빠르게 액세스할 수 있습니다. 범위를 오른쪽 버튼으로 클릭하면 팝업 메뉴에 이징 사전 설정이 옵션으로 표시됩니다.
• 쉽게 식별할 수 있습니다. 사전 설정 이름이 고급 모드 타임라인에 표시됩니다.