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

  • 아티클

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

상태에 애니메이션 추가

  1. 애니메이션 작업 영역으로 변경합니다. 이렇게 하면 개체 및 타임라인 패널이 아트보드 아래로 이동하여 타임라인을 표시할 공간이 늘어 납니다.

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

  3. 개체 및 타임라인 패널에서 타임라인 표시 Dd185497.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(KO-KR,Expression.30).png를 클릭합니다.

    Dd185497.9985179e-40a4-488b-97e1-94625d2480f4(KO-KR,Expression.30).png

    [!참고]

    상태에서 Base를 선택한 경우에는 상태 기록 모드가 아니기 때문에 타임라인 표시 Dd185497.d5d49398-e7e2-48f6-82e0-7ab34fda33ea(KO-KR,Expression.30).png가 나타나지 않습니다.

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

    Dd185497.54c77792-cbb0-4f6c-a7c4-88d5e8228c42(KO-KR,Expression.30).png

  5. 애니메이션을 더 추가하려면 타임라인에서 플레이헤드 Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(KO-KR,Expression.30).png를 다른 시간으로 이동한 다음 아트보드에서 개체를 변경합니다.

    예를 들어 게임 카드를 회전하려면 플레이헤드 Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(KO-KR,Expression.30).png를 1초 표시로 이동하고 개체 및 타임라인 패널에서 LayoutRoot 개체를 선택한 다음 속성 패널의 변형에서 회전 탭을 선택하고 각도 속성을 360으로 설정합니다.

    Dd185497.e67a5de7-5ff8-4eb5-ac18-e42c820451fb(KO-KR,Expression.30).png

  6. 재생Dd185497.64ad8e84-1eec-4154-9d0c-11fef322c0bf(KO-KR,Expression.30).png을 클릭하여 애니메이션을 미리 봅니다.

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

    Dd185497.alert_tip(KO-KR,Expression.30).gif팁:

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

다음 단계

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

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

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