실습 정보: 핸드오프 및 비핸드오프 애니메이션 재생

아티클
10/11/2017

여러 애니메이션 타임라인에서 동시에 같은 속성에 애니메이션 효과를 적용하면 0초 표시에서 기록된 키 프레임이 있는지 여부에 따라 전환 동작이 달라집니다. 다음 절차를 통해 핸드오프 및 비핸드오프 애니메이션의 작동 방식을 살펴보겠습니다.

핸드오프 애니메이션과 비핸드오프 애니메이션 비교

Microsoft Expression Blend에서 새 프로젝트를 열거나 만듭니다. 자세한 내용은 새 프로젝트 만들기를 참조하십시오.
F6 키를 눌러 애니메이션 작업 영역으로 전환합니다. F6 키를 누르면 애니메이션 작업 영역을 교대로 전환할 수 있습니다. 애니메이션 작업 영역에서 개체 및 타임라인 패널은 아트보드 아래에 있습니다.
개체 및 타임라인 패널에서 스토리보드 닫기 를 선택합니다.

팁:

스토리보드가 열려 있는 동안 속성을 변경하면 스토리보드의 타임라인에 키 프레임이 자동으로 기록됩니다.
도구 패널에서 타원을 선택합니다. 아트보드의 가운데에 원을 그립니다. 속성 패널의 레이아웃 범주에서 Height 및 Width 속성을 사용하여 타원을 완전한 원으로 만들 수 있습니다. 클리핑 동작이 표시되면 Margin 속성을 조정합니다.
개체 및 타임라인 패널에서 새로 만들기를 클릭합니다.

Storyboard 리소스 만들기 대화 상자가 나타납니다.
리소스 이름(키) 필드에 Double이라는 이름을 입력한 다음 확인을 클릭합니다.

Expression Blend에서 플레이헤드가 0초 표시에 설정된 타임라인 기록 모드가 시작됩니다. 기록 모드에 있는 동안 속성을 설정하면 타임라인에 키 프레임이 자동으로 기록됩니다.
0초 표시에서 키 프레임을 설정하는 대신 1초 표시로 플레이헤드를 끕니다.
도구 패널에서 선택을 선택하고 Alt 키를 누른 상태에서 타원의 너비 핸들을 끌어 타원이 원래 너비의 두 배가 되도록 합니다.

ScaleX 속성에 대해 키 프레임이 자동으로 1초 표시로 설정됩니다.

팁:

아트보드에서 Alt 키를 누른 채 개체의 크기를 조정하면 중심점이 그대로 유지됩니다.
개체 및 타임라인 패널에서 ScaleX 노드가 표시될 때까지 타원 아래의 노드를 확장합니다. ScaleX 노드 또는 회색 시간 범위 막대를 마우스 오른쪽 단추로 클릭한 다음 반복 횟수 편집을 클릭합니다.

반복 편집 대화 상자가 나타납니다.
타임라인이 계속 반복되도록 하려면 계속으로 설정을 클릭한 다음 확인을 클릭합니다.
개체 및 타임라인 패널에서 새로 만들기를 클릭합니다.

Storyboard 리소스 만들기 대화 상자가 나타납니다.
리소스이름(키)**** 필드에 Quadruple이라는 이름을 입력한 다음 확인을 클릭합니다.

Expression Blend에서 원래 타원 크기에서 시작하여 두 번째 타임라인의 타임라인 기록 모드가 시작됩니다.
위에서 설명한 것처럼 0초 표시에서 키 프레임을 설정하는 대신 1초 표시로 플레이헤드를 끕니다.
도구 패널에서 선택 도구를 선택하고 Alt 키를 누른 상태에서 타원의 너비 핸들을 끌어 타원이 원래 너비의 네 배가 되도록 합니다.

ScaleX 속성에 대해 키 프레임이 자동으로 1초 표시로 설정됩니다.
ScaleX 노드 또는 회색 시간 범위 막대를 마우스 오른쪽 단추로 클릭하고 반복 횟수 편집을 클릭한 다음 계속으로 설정 단추를 클릭하고 확인을 클릭합니다.
이제 애니메이션에 대한 트리거를 설정할 수 있습니다. 기본적으로 문서의 루트에 새 타임라인을 만들면 Window.Loaded 이벤트에 대한 이벤트 트리거가 트리거 패널에 추가됩니다. Double 타임라인에 대한 트리거는 유지하고 Quadruple 타임라인에 대한 새 트리거를 추가할 수 있습니다.

팁:
스토리보드가 열려 있는 동안 속성을 변경하면 스토리보드의 타임라인에 키 프레임이 자동으로 기록됩니다.

팁:
아트보드에서 Alt 키를 누른 채 개체의 크기를 조정하면 중심점이 그대로 유지됩니다.

트리거 패널에서 Window.Loaded 트리거를 선택합니다. 트리거에 대한 액션이 Window.Loaded가 발생할 때 아래에 표시됩니다. Quadruple.Begin 옆에 있는 빼기 기호를 클릭하여 해당 액션을 삭제합니다.

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

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

Quadruple 애니메이션에 대한 트리거를 추가하려면 트리거 패널에서 이벤트 트리거 추가를 클릭합니다.

새 Window.Loaded 트리거가 만들어집니다.
개체 및 타임라인 패널에서 타원을 선택한 다음 트리거 패널에서 드롭다운 상자를 사용하여 새 트리거를 Window.Loaded가 발생할 때에서 ellipse.MouseEnter가 발생할 때로 변경합니다.
ellipse.MouseEnter가 발생할 때 옆에 있는 새 액션 추가를 클릭한 다음 드롭다운 상자를 사용하여 새 액션을 Quadruple.Begin 으로 변경합니다.

이제 사용자가 타원 위로 포인터를 이동하면 Quadruple 애니메이션에 의해 Double 애니메이션이 중단됩니다.
새 이벤트 트리거를 추가하고 ellipse.MouseLeave가발생할 때****로 변경한 다음 Double.Begin 에 대한 새 액션을 추가합니다.

사용자가 타원 밖으로 포인터를 이동하면 Double 애니메이션에 의해 Quadruple 애니메이션이 중단됩니다.
방금 만든 애니메이션 타임라인 및 이벤트 트리거의 동작을 확인하려면 프로젝트 메뉴에서 프로젝트 테스트를 클릭하여 장면을 테스트합니다.

두 애니메이션에는 0초 표시에서 설정된 키 프레임이 없습니다. 이러한 애니메이션 사이의 전환을 핸드오프 애니메이션이라고 합니다. 다른 애니메이션에 의해 한 애니메이션이 중단될 때 애니메이션의 핸드오프 동작은 중단되는 순간의 너비에서 다음 애니메이션의 첫 번째 키 프레임으로 부드럽게 전환됩니다. Double 애니메이션이 끝날 때 타원 안으로 포인터를 이동하면 Quadruple 애니메이션이 타원의 원래 크기에서 시작되지 않습니다. 즉, Quadruple 애니메이션은 마우스를 이동한 순간의 타원 너비에서 시작됩니다. 타원 밖으로 마우스를 이동하면 Double 애니메이션은 Quadruple 애니메이션이 반대로 재생되는 것처럼 보이는데, 두 애니메이션 사이에서 발생되는 전환 때문입니다.
응용 프로그램을 종료하고 Expression Blend로 돌아갑니다.
개체 및 타임라인 패널에서 타원의 ScaleX 노드를 선택하고 Quadruple 타임라인을 선택한 후 플레이헤드를 0초 표시로 이동한 다음 키 프레임 기록 단추를 클릭합니다.
애니메이션을 다시 테스트합니다. 전환 동작이 변경됩니다. 타원 안으로 마우스를 이동하면 Quadruple 애니메이션이 타원의 원래 너비에서 시작됩니다.

Double 애니메이션의 0초 표시에서 키 프레임을 추가하고 다시 테스트한 다음 Quadruple 애니메이션의 0초 표시에서 키 프레임을 삭제하고 다시 테스트하면 서로 다른 전환 동작을 자세히 검토할 수 있습니다.

다음을 통해 공유

실습 정보: 핸드오프 및 비핸드오프 애니메이션 재생

핸드오프 애니메이션과 비핸드오프 애니메이션 비교

추가 리소스