실습 정보: 오버랩 애니메이션 만들기

  • 아티클

Microsoft Expression Blend의 타임라인은 응용 프로그램에서 동시에 둘 이상의 애니메이션 타임라인을 실행할 수 있도록 구축되었습니다. 다음 절차에서 계속 원을 그리며 이동하다가 사용자가 나비 위로 마우스를 이동하면 날개를 퍼덕이는 나비 애니메이션 만드는 방법을 살펴보겠습니다.

[!참고]

다음 절차에서는 스토리보드를 제어하기 위해 Windows Presentation Foundation (WPF) 프로젝트에 트리거를 사용합니다. 또는 WPF나 Microsoft Silverlight에서 ControlStoryboardAction 동작을 사용하여 스토리보드를 제어할 수 있습니다. 동작에 대한 자세한 내용은 개체에 동작 추가를 참조하십시오.

오버랩 애니메이션 만들기

  1. Microsoft Expression Blend에서 새 프로젝트를 열거나 만듭니다. 자세한 내용은 새 프로젝트 만들기를 참조하십시오.

  2. 애니메이션 작업 영역으로 전환합니다. F6 키를 누르면 애니메이션 작업 영역을 교대로 전환할 수 있습니다. 애니메이션 작업 영역에서 개체 및 타임라인 패널은 아트보드 아래에 있습니다.

  3. 스토리보드가 열려 있는 경우 개체 및 타임라인 패널에서 스토리보드 닫기 Cc294767.4c066464-3a41-452d-b2e9-e95f6c5659ff(KO-KR,Expression.30).png를 클릭합니다.

    [!참고]

    기본값 타임라인이 아닌 다른 타임라인을 선택할 때마다 속성이 변경되어 타임라인에 키 프레임이 자동으로 기록됩니다.

  4. 도구 패널에서 타원Cc294767.d7a04618-e35a-44f9-b78c-1f22e38016c1(KO-KR,Expression.30).png을 선택합니다. 아트보드의 오른쪽에 작은 원 두 개를 그립니다. 속성 패널의 레이아웃 범주에서 Height 및 Width 속성의 값을 똑같이 설정하면 타원을 완전한 원으로 만들 수 있습니다. 클리핑 동작이 표시되면 Margin 속성을 조정합니다.

  5. 도구 패널에서 선택Cc294767.2ff91340-477e-4efa-a0f7-af20851e4daa(KO-KR,Expression.30).png을 선택하고 다음 그림과 같이 원이 가깝게 모이도록 이동합니다.

    아트보드에 그린 두 개의 원

    Cc294767.9d303fc9-9be5-4904-a740-28ed53f85fdc(KO-KR,Expression.30).png

  6. 동시에 두 원을 사용하려면 개체 및 타임라인 패널에서 한 원을 선택하고 Ctrl 키를 누른 상태에서 다른 원도 선택한 다음 선택한 원을 마우스 오른쪽 단추로 클릭하고 그룹으로 묶기를 선택한 다음 Grid를 클릭합니다.

    두 원을 포함하는 새 모눈(Grid) 레이아웃 패널이 개체 및 타임라인 패널에 나타납니다.

  7. 모눈(Grid)을 마우스 오른쪽 단추로 클릭한 다음 이름 바꾸기를 선택하여 Grid 개체의 이름을 바꿉니다. 이름을 Butterfly로 변경합니다.

  8. 원 애니메이션을 만들려면 패스에서 애니메이션 타임라인을 생성하는 이동 패스로 변환 도구를 사용할 수 있습니다. 아트보드 표면 너비의 절반쯤 되는 아트보드 가운데에 세 번째 타원을 그립니다.

  9. 개체 및 타임라인 패널에서 새 타원을 선택하고 개체 메뉴에서 패스를 선택한 다음 이동 패스로 변환을 클릭합니다.

    이동 패스로 변환 대화 상자가 나타납니다.

  10. 아트보드에 있는 개체 목록에서 Butterfly Grid 개체를 선택한 다음 확인을 클릭합니다.

    새 타임라인이 만들어집니다. Expression Blend에서 새 타임라인의 기록 모드가 시작되어 재생Cc294767.64ad8e84-1eec-4154-9d0c-11fef322c0bf(KO-KR,Expression.30).png을 클릭하면 아트보드에서 애니메이션을 볼 수 있습니다. 대상(Butterfly)이 타원에서 생성된 이동 패스를 따라 이동합니다. 타원의 Fill 속성을 브러시로 설정한 경우에는 타원이 Butterfly 개체의 일부를 덮게 됩니다.

  11. 세 번째 타원은 더 이상 필요하지 않으므로 삭제합니다.

  12. 개체 및 타임라인 패널에서 Butterfly, RenderTransform 및 Translation 요소의 노드를 확장하여 이동 패스 시간 범위를 표시합니다. 시간 범위를 나타내는 이동 패스 요소나 회색 막대를 마우스 오른쪽 단추로 클릭한 다음 반복 횟수 편집을 클릭합니다.

    반복 편집 대화 상자가 나타납니다.

  13. 타임라인이 계속 반복되도록 하려면 계속으로 설정Cc294767.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(KO-KR,Expression.30).png을 클릭한 다음 확인을 클릭합니다.

    이제 이 애니메이션을 실행하면 계속 반복됩니다.

  14. 개체 및 타임라인 패널에서 새로 만들기Cc294767.86937695-03dd-44ea-aa30-28d4029b3ad0(KO-KR,Expression.30).png를 클릭합니다.

    Storyboard 리소스 만들기 대화 상자가 나타납니다.

  15. 리소스 이름(키) 필드에 Flap이라는 이름을 입력한 다음 확인을 클릭합니다.

    플레이헤드 Cc294767.5626c9eb-40bb-450a-9ca1-3678e5abe429(KO-KR,Expression.30).png가 0초 표시에 설정된 새 타임라인의 기록 모드가 시작됩니다. 기록 모드에 있는 동안 속성을 설정하면 타임라인에 키 프레임이 자동으로 기록됩니다.

  16. 0초 위치에 키 프레임을 설정하려면 Butterfly Grid 개체를 선택하고 키 프레임 기록Cc294767.e8ec61d4-c8e8-465a-85a7-70bf787a67de(KO-KR,Expression.30).png을 클릭합니다.

    Butterfly Grid 개체에 해당되는 타임라인의 행에 키 프레임 Cc294767.fa3c696d-5463-4000-8a6b-650fe6759bf7(KO-KR,Expression.30).png이 나타납니다.

  17. 1초 표시로 플레이헤드를 끈 다음 다른 키 프레임을 기록합니다.

    이제 애니메이션의 시작 및 끝 위치가 설정되었습니다.

  18. 위의 두 키 프레임 사이에 있는 0.5초 표시로 플레이헤드를 끕니다.

  19. 도구 패널에서 선택 도구를 선택하고 Alt 키를 누른 채 아트보드에서 Butterfly Grid 개체의 높이는 늘이고 너비는 줄여 다음과 같이 나타나도록 합니다.

    Expression Blend가 Flap 애니메이션 타임라인의 기록 모드에 있으므로 Butterfly Grid 개체를 수정하면 Grid 개체의 ScaleX 및 ScaleY 속성에 대한 새로운 키 프레임이 0.5초에서 설정됩니다.

    아트보드에서 Grid 개체 늘이기

    Cc294767.a6857649-160b-446f-b998-a135389a19be(KO-KR,Expression.30).png

  20. 개체 및 타임라인 패널에서 ScaleX 및 ScaleY 노드가 표시될 때까지 Butterfly Grid 개체의 노드를 확장합니다. 차례로 노드를 선택하고 마우스 오른쪽 단추로 클릭한 다음 반복 횟수 편집을 선택하고 반복 편집 대화 상자에서 2를 입력하여 타임라인이 두 번 실행되도록 설정하고 확인을 클릭합니다.

  21. 재생 단추를 클릭하여 아트보드에서 애니메이션을 테스트합니다. 아트보드에서 재생할 때는 반복 값이 적용되지 않습니다. 회색 시간 범위 막대에서 키 프레임을 이동하여 애니메이션의 타이밍을 조정할 수 있습니다.

    [!참고]

    공간이 부족하여 전체 타임라인을 볼 수 없으면 타임라인 확대/축소 텍스트 상자를 사용하여 타임라인을 축소할 수 있습니다. 패널의 너비를 변경하여 개체 및 타임라인 패널이 더 많이 표시되도록 할 수도 있습니다.

  22. 이제 애니메이션에 대한 트리거를 설정할 수 있습니다. 기본적으로 문서의 루트에 새 타임라인을 만들면 응용 프로그램이 시작될 때 발생하는 Window.Loaded 이벤트에 대한 기본 이벤트 트리거가 트리거 패널에 추가됩니다.

    원 타임라인에 대한 트리거는 유지하고 Flap 타임라인에 대한 새 트리거를 추가할 수 있습니다.

  23. 트리거 패널에서 Window.Loaded 트리거를 선택합니다. 트리거에 대한 액션이 When Window.Loaded is raised 아래 표시됩니다. Flap.Begin 옆에 있는 빼기 기호를 클릭하여 해당 액션을 삭제합니다.

    이제 응용 프로그램이 시작될 때 원 애니메이션은 계속 시작되지만 Flap 애니메이션은 시작되지 않습니다.

    [!참고]

    활성 상태인 경우 속성 섹션을 표시하려면 트리거 패널의 크기를 조정해야 할 수 있습니다. 크기를 조정하려면 패널의 테두리 및 패널 안쪽 테두리를 클릭하여 끕니다.

    Window.Loaded 트리거에서 Flap 애니메이션 제거

    Cc294767.7f6ed2c1-373a-4bf1-8008-0380917c618d(KO-KR,Expression.30).png

  24. Flap 애니메이션에 대한 트리거를 추가하려면 트리거 패널에서 이벤트 트리거 추가Cc294767.671c69bb-32e9-4ef9-9837-29403524abd0(KO-KR,Expression.30).png를 클릭합니다.

    새 Window.Loaded 트리거가 만들어집니다.

  25. 개체 및 타임라인 패널에서 Butterfly Grid 개체 요소를 선택한 다음 트리거 패널에서 드롭다운 상자를 사용하여 새 트리거를 When Window.Loaded is raised에서 When Butterfly.MouseEnter is raised로 변경합니다.

  26. When Butterfly.MouseEnter is raised 옆에 있는 새 액션 추가Cc294767.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(KO-KR,Expression.30).png를 클릭한 다음 드롭다운 상자를 사용하여 새 액션을 Flap.Begin으로 변경합니다.

    이제 사용자가 나비 위로 포인터를 이동하면 Flap 애니메이션 타임라인이 시작됩니다.

    Grid 개체의 MouseEnter 이벤트에 대한 새 트리거 만들기

    Cc294767.c0eee764-9e82-492e-92a8-5540d15c3abe(KO-KR,Expression.30).png

  27. 방금 만든 애니메이션 타임라인 및 이벤트 트리거의 동작을 확인하려면 프로젝트 메뉴에서 프로젝트 테스트를 클릭하여 장면을 테스트합니다.

    [!참고]

    원 애니메이션이 너무 빠른 속도로 실행될 경우 타임라인의 실행 시간을 조정할 수 있습니다. 개체 및 타임라인 패널의 드롭다운 상자에서 이동 패스 타임라인을 선택하고 이동 패스 노드가 표시될 때까지 Grid 개체 아래의 노드를 확장한 다음 회색 시간 범위 막대의 오른쪽 끝을 잡고 오른쪽으로 끌어 끝 시간을 늘립니다.

    원 타임라인을 삭제하고 새 타임라인을 만든 다음 8단계(타원 그리기)에서 시작하여 이동 패스를 만들 수도 있습니다. 8단계에서 시작하기 전에 새 타임라인을 만들지 않으면 원 애니메이션이 Flap 애니메이션 타임라인에 추가됩니다.