상태 변경 후 재생될 애니메이션 추가

특정 상태의 컨트롤 전환 후 재생될 애니메이션을 해당 상태에 추가할 수 있습니다. 예를 들어 단추 위로 마우스 포인터를 가져갈 때 해당 단추의 색이 바뀌는 경우, 이는 MouseOver 상태로 전환한 결과입니다. 단추 회전과 같은 애니메이션을 MouseOver 상태에 추가하면 단추 색이 바뀐 후 해당 애니메이션이 실행됩니다.

상태에 애니메이션 추가

1. F6 키를 눌러 애니메이션 작업 영역으로 변경합니다. 그러면 인터랙션 패널이 아트보드 아래로 이동하여 타임라인을 표시할 공간을 늘립니다.

2. 상태에서 애니메이션을 추가할 상태를 선택합니다.

3. 개체 및 타임라인에서 타임라인 표시  단추를 클릭합니다.

   

   [!참고]

   상태에서 Base를 선택한 경우에는 상태 기록 모드가 아니기 때문에 타임라인 표시  단추가 나타나지 않습니다.

4. Base가 선택된 상태에서, 이 상태의 컨트롤 모양을 기본 모양과 다르게 만든 경우에는 키 프레임이 이미 0초 표시에 설정되어 있습니다.

   

5. 애니메이션을 더 추가하려면 타임라인에서 플레이헤드 를 다른 시간으로 이동한 다음 아트보드에서 개체를 변경합니다.

   예를 들어 게임 카드(PlayingCard)를 회전하려면 플레이헤드 를 1초 표시로 이동하고 개체 및 타임라인에서 LayoutRoot 개체를 선택한 다음 속성 패널의 변형에서 회전 탭을 선택하고 Angle 속성을 360으로 설정합니다.

   

6. 재생 단추를 클릭하여 애니메이션을 미리 봅니다.

7. F5 키를 눌러 특정 상태의 애니메이션을 테스트합니다.

   팁:
   상태가 다시 변경될 때 컨트롤이 다시 0도로 회전하게 하지 않으려면 다른 모든 상태로 전환될 때 이 상태의 전환 시간을 0초로 설정할 수 있습니다. 해당 절차는 시스템 컨트롤의 상태 변경 간 전환 시간 수정을 참조하십시오.

다음 단계

• 특정 상태의 애니메이션을 여러 번 반복 또는 계속 반복으로 설정하거나 마지막 키 프레임에 도달할 때 반전하도록 할 수 있습니다. 자세한 내용은 해당 주기가 끝나면 스토리보드가 반복 또는 반전하도록 수정을 참조하십시오.

• 키 프레임 간에 애니메이션이 발생하는 속도를 조정하여 더욱 자연스러운 애니메이션을 만들 수 있습니다. 자세한 내용은 키 프레임 간 애니메이션 보간 변경을 참조하십시오.

• 시스템 컨트롤 템플릿을 수정하는 동안 F5 키를 눌러 응용 프로그램에서 해당 변경 내용을 볼 수 있습니다. 사용자 정의 컨트롤을 사용하는 경우 사용자 정의 컨트롤이 마우스 클릭에 응답하도록 만들어 수정된 애니메이션의 작동 중인 모습을 볼 수 있습니다. 자세한 내용은 사용자 상호 작용에 대한 응답으로 상태 변경을 참조하십시오.