개체에 애니메이션 적용

아티클
10/11/2017

애니메이션은 이전 이미지와 아주 약간씩 다르게 변화해 가는 일련의 이미지를 빠른 속도로 순환 반복해서 만드는 효과라고 할 수 있습니다. 사람의 두뇌는 이러한 일련의 이미지를 마치 움직이는 하나의 장면처럼 인식하게 됩니다. 영화에서는 카메라로 많은 사진이나 프레임을 초 단위로 녹화하여 애니메이션 효과를 만듭니다. 프로젝터로 프레임을 재생하면 관객은 움직이는 그림을 보게 되는 것입니다. 컴퓨터 애니메이션의 경우 사이 사이의 변경 내용을 보간하고 애니메이션 효과를 적용하기 때문에 녹화된 프레임과 시점이 다르다는 점만 제외하면 영화의 기법과 유사합니다.

Expression Blend에서 애니메이션의 작동 방식

Microsoft Expression Blend에서 애니메이션은 부드러운 시각적 전환의 시작점과 끝점을 정의하는 키 프레임을 기반으로 합니다. Expression Blend에서 애니메이션을 만들려면 스토리보드를 만들고 스토리보드에서 타임라인에 키 프레임을 설정하여 속성 변경을 표시합니다. 예를 들어 0초 표시에서 키 프레임을 설정하여 아트보드의 왼쪽에 있는 사각형의 위치를 기록한 다음 1초 표시에서 키 프레임을 설정하여 아트보드의 오른쪽에 있는 동일한 사각형의 위치를 기록합니다. 그 결과로 제작된 애니메이션은 1초 동안 사각형의 X 및 Y 속성에서 발생하는 변형을 기반으로 합니다. 애니메이션 스토리보드를 실행하면 Expression Blend에서는 지정된 시간에 따라 변경되는 속성을 보간하여 응용 프로그램에 결과를 표시합니다. 이런 방식으로 가시적이지 않은 속성을 포함하여 아트보드의 개체에 속하는 모든 속성에 애니메이션 효과를 적용할 수 있습니다.

스토리보드에서 MoveRight라는 타임라인에 설정된 키 프레임, rectangle 개체의 X 및 Y 좌표 이동 속성의 변경 내용 표시

Cc295346.982f031a-74a3-414a-abc2-a0f41a741075(KO-KR,Expression.30).png

일부 컴퓨터 애니메이션 프로그램의 경우 프레임별 애니메이션을 만들 수 있습니다. 즉, 모든 프레임에 서로 다른 이미지나 개체를 포함할 수 있습니다. 이 경우 결과 애니메이션의 크기가 너무 커지고 런타임에 리소스를 지나치게 소모하게 됩니다. 이런 점을 고려하여, Expression Blend 애니메이션은 속성 변경을 기록하는 키 프레임을 기반으로 하여 런타임에 속성 변경 간 전환에 애니메이션 효과를 적용합니다. 또한 Expression Blend에서는 애니메이션 타임라인 중에 나타나거나 사라질 수 있는 모든 개체가 전체 타임라인에 표시되지만 키 프레임으로 표시 유형 속성을 변경하여 개체를 숨길 수도 있습니다.

[!참고]

Expression Blend에서는 스토리보드에서 새 개체를 자동으로 만들 수 없지만 코드 숨김 파일에서 프로그래밍 방식으로 새 개체 및 새 애니메이션 스토리보드를 생성할 수 있습니다. 자세한 내용은 MSDN에서 Windows Presentation Foundation 섹션의 애니메이션 및 타이밍 항목을 참조하십시오.

스토리보드

스토리보드는 애니메이션 타임라인이 들어 있는 컨테이입니다.Expression Blend에는 프로젝트의 스토리보드를 선택하고 검색할 수 있도록 하는 스토리보드 선택기 컨트롤이 포함되었습니다.

자세한 내용은 스토리보드 열기 또는 닫기를 참조하십시오.

선택해서 열 수 있는 스토리보드 목록을 표시하는 스토리보드 선택기

Cc295346.d13d140b-75cf-48f7-a3fa-bdfbd3e62db5(KO-KR,Expression.30).png

스토리보드가 선택되면 팝업 메뉴를 사용하여 현재 선택된 스토리보드에 대해 복제, 반전, 삭제, 이름 바꾸기 또는 닫기 작업을 수행하거나 새 스토리보드를 만들 수도 있습니다.

자세한 내용은 스토리보드 복제 또는 반전 및 스토리보드 이름 바꾸기를 참조하십시오.

스토리보드 팝업 메뉴

Cc295346.74b1f5aa-10f5-40fc-b786-c9de76cb87ca(KO-KR,Expression.30).png

마지막 타임라인의 끝에 도달하면 자동으로 반전하거나 반복되도록 스토리보드에 속성을 설정할 수 있습니다.

자세한 내용은 해당 주기가 끝나면 스토리보드가 반복 또는 반전하도록 수정을 참조하십시오.

스토리보드는 응용 프로그램의 다음 위치나 범위에서 만들 수 있습니다.

문서의 본문 - 애니메이션을 나타내기 위해 응용 프로그램을 사용하는 경우 또는 다른 위치에서 애니메이션을 재사용할 필요가 없는 경우에는 문서의 본문에 애니메이션 타임라인을 만들 수 있습니다.

간단한 애니메이션 만들기에서 예를 참조하십시오.
장면 또는 사용자 정의 컨트롤 - 단일 문서 또는 다른 응용 프로그램에서 여러 번 애니메이션을 다시 사용해야 하는 경우에는 사용자 정의 컨트롤에 애니메이션 타임라인을 만들 수 있습니다. 이 방법은 다른 문서나 프로젝트로 애니메이션을 구성하려는 경우에도 유용합니다. 사용자 정의 컨트롤은 Button과 같은 여타의 컨트롤과 마찬가지로 아트보드에 추가할 수 있습니다. 자세한 내용은 아래 나오는 "장면" 섹션을 참조하십시오.

빈 사용자 컨트롤 만들기 또는 프로젝트에서 새 사용자 컨트롤 만들기에서 예를 참조하십시오.
컨트롤의 템플릿 - 응용 프로그램에서 단추와 같은 특정 형식의 모든 컨트롤에 동일한 방식으로 애니메이션 효과를 적용하려는 경우에는 컨트롤의 템플릿에 애니메이션을 만들 수 있습니다. 그러나 모든 컨트롤의 모양이 정확하게 일치한다는 의미는 아닙니다. 템플릿 바인딩(템플릿이 적용되는 컨트롤의 속성에 템플릿의 속성을 바인딩)을 사용하면 각 컨트롤의 색 또는 기타 시각적 모양이 애니메이션에서 다르게 나타날 수 있습니다.

자세한 내용은 대화형 컨트롤 선택 및 사용을 참조하십시오. Windows Presentation Foundation (WPF)의 예는 실습 정보: 단추에 애니메이션 추가를 참조하십시오.
상태 - 새 상태로 전환한 후에 발생하는 애니메이션을 수정하려는 경우 상태 패널에서 상태를 선택한 다음 개체 및 타임라인 패널에서 타임라인 표시를 선택하여 변경할 수 있습니다.

상태 사용에 대한 자세한 내용은 컨트롤에 대해 다른 시각적 상태 정의를 참조하십시오.

개체에 설정된 트리거를 사용하거나, 동작을 사용하거나, 이벤트 처리기를 사용하여 스토리보드를 제어(시작, 중지, 일시 중지)할 수 있습니다.

자세한 내용은 스토리보드의 실행 시점 제어를 참조하십시오.

타임라인

타임라인은 응용 프로그램의 애니메이션 시퀀스 구조를 제공합니다. Expression Blend의 애니메이션은 속성 변경의 타이밍을 나타내는 키 프레임을 기록할 수 있는 타임라인으로 구성됩니다. 타임라인은 아트보드의 개체에 적용할 속성 변경의 레이어라고 할 수 있으며 타임라인은 스토리보드 안에 포함되어 있습니다.

개체 및 타임라인 패널에서 애니메이션 타임라인을 사용합니다. 이 패널에서 사용할 수 있는 컨트롤을 이용하여 시간에 따라 변경되는 아트보드를 확인하고 새 타임라인을 추가하며 타임라인을 수정하는 등의 작업을 할 수 있습니다.

키 프레임

키 프레임 Cc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(KO-KR,Expression.30).png 은 속성 변경이 발생하는 경우를 나타내는 타임라인의 마커입니다. Expression Blend에는 다음과 같은 네 가지 형식의 키 프레임이 있습니다.

개체 수준 키 프레임은 사각형 개체와 같은 전체 개체나 여러 개체를 포함하는 모눈에 적용됩니다. 일반적으로 키 프레임 기록 단추를 클릭하여 수동으로 설정하지 않는 한, 개체 수준 키 프레임은 자식 개체 중 하나에서 속성이 변경되었음을 나타냅니다. 개체 아래 노드를 확장하면 해당 속성을 확인할 수 있습니다. 예를 들어 위 이미지(이 항목 앞부분의 "Expression Blend에서 애니메이션의 작동 방식"에 있음)에서 Rectangle에 해당하는 타임라인의 행에 설정된 키 프레임이 개체 수준 키 프레임입니다.
복합 키 프레임은 속성에 애니메이션 효과를 적용할 자식 속성이 있음을 나타냅니다. 예를 들어 위 그림에서는 Translate 속성에 해당하는 타임라인의 행에 설정된 키 프레임이 복합 키 프레임입니다. 복합 키 프레임을 사용하면 타임라인을 따라 키 프레임을 이동하는 경우처럼 한 번의 선택 작업으로 큰 속성 그룹을 동시에 수정할 수 있습니다.
단순 키 프레임은 해당 시점의 단일 속성 변경을 나타냅니다. 예를 들어 위 그림에서는 X 및 Y 속성에 해당하는 타임라인의 행에 설정된 키 프레임이 단순 키 프레임입니다. 애니메이션의 반복 횟수 수정과 같은 특정 액션을 수행하려면 단순 키 프레임을 사용해야 합니다.

반복 기간 설정에서 예를 참조하십시오.
암시적 키 프레임은 한 애니메이션이 다른 애니메이션에 의해 중단된 경우 두 번째 애니메이션에 0초 표시에서 설정된 키 프레임이 없으면 표시됩니다. 애니메이션이 중단될 때 Expression Blend에서는 마지막으로 알려진 속성 값과 두 번째 애니메이션의 첫 번째 키 프레임에 설정된 값 사이의 변경에 애니메이션 효과를 적용합니다. 마지막으로 알려진 값이 첫 번째 애니메이션의 두 키 프레임 사이에 있는 경우에도 암시적 키 프레임으로 간주됩니다. 이러한 전환 기능을 핸드오프 애니메이션 이라고 하며 자세한 내용은 아래의 "다중 및 오버랩 애니메이션 타임라인 사용" 섹션에서 설명합니다.

키 프레임의 차이점을 알아 두면 애니메이션 효과를 적용할 모든 속성의 세부 정보를 확인하지 않아도 되는 경우가 있어 유용합니다. 대신 각 개체의 속성을 축소하고 개체 수준 키 프레임만 확인할 수 있습니다. 개체 수준 및 복합 키 프레임을 사용하면 타임라인을 따라 키 프레임을 이동하는 경우처럼 한 번의 선택 작업으로 큰 속성 그룹을 동시에 수정할 수 있습니다.

키 프레임 붙여넣기 또는 이동에서 예를 참조하십시오.

애니메이션의 반복 횟수 수정과 같은 특정 액션을 수행하려면 단순 키 프레임을 사용해야 합니다.

반복 기간 설정에서 예를 참조하십시오.

키 프레임 간 전환

키 프레임 보간은 두 키 프레임 사이의 시간 범위에서 속성 변경에 애니메이션 효과가 적용되는 방법을 나타냅니다.

미리 정의된 느린 시작 후 가속 또는 빠른 시작 후 감속 값을 선택하거나 KeySpline 그래프를 수정하거나 복잡한 KeySpline 그래프를 나타내는 기본 설정 EasingFunction 옵션을 사용하여 키 프레임 보간 값을 수정할 수 있습니다.

키 프레임 간 사용자 지정 보간을 만드는 키 스플라인 편집기

Cc295346.7ec8ec80-9667-4e95-9dd6-16cf9199b83b(KO-KR,Expression.30).png

자세한 내용은 키 프레임 간 애니메이션 보간 변경을 참조하십시오.

수동으로 또는 이동 패스를 사용하여 타임라인 만들기

[!참고]

Microsoft Silverlight 프로젝트에서는 이동 패스가 지원되지 않습니다.

수동으로 애니메이션 타임라인을 만들면 타임라인에서 애니메이션 효과가 적용되는 개체의 움직임과 개수를 가장 효과적으로 제어할 수 있습니다. 또한 색 간에 애니메이션 효과를 적용할 수 있습니다. Expression Blend에서 수동으로 애니메이션 타임라인을 만들려면 개체 및 타임라인에서 새로 만들기 Cc295346.86937695-03dd-44ea-aa30-28d4029b3ad0(KO-KR,Expression.30).png 를 클릭한 다음 먼저 타임라인 플레이헤드 Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(KO-KR,Expression.30).png 를 이동한 후 아트보드에서 개체를 수정하여 키 프레임을 생성하는 방식으로 키 프레임을 기록합니다.

간단한 애니메이션 만들기에서 예를 참조하십시오.

이동 패스로 변환 도구를 사용하여 자동으로 애니메이션 타임라인을 생성하면 패스 형식(선 또는 타원, 사각형과 같은 도형의 경계)에 관계없이 아트보드에서 패스를 따라 개체가 이동하도록 할 수 있습니다. 다음 그림에서는 타원의 경계가 파란색 원의 이동 패스가 됩니다.

이동 패스를 사용하여 애니메이션 타임라인 만들기

Cc295346.0b7efb11-9146-4bc5-a61f-2dc595f5cf5d(KO-KR,Expression.30).png

	별도의 두 개체: 타원 도구를 사용하여 만든 타원과 원입니다.
	타원이 이동 패스가 됩니다. 이 단계에서 필요에 따라 타원을 삭제할 수 있습니다.
	재생될 때 타원형 패스를 따라 원을 이동하는 새 타임라인이 생성됩니다.

이동 패스를 사용하여 애니메이션 타임라인을 생성하는 방법에 대한 예는 이동 패스 만들기, 수정 또는 삭제를 참조하십시오.

이동 패스는 타임라인의 키 프레임으로 표시되지 않으므로 보간 효과를 수정할 수 없습니다. 그러나 반복 횟수를 수정할 수는 있습니다.

자세한 내용은 반복 기간 설정을 참조하십시오.

애니메이션 개체의 원점이 패스에 있도록 만들어 패스의 중심을 향하는 모든 개체 면이 전체 타임라인에서 계속 패스의 중심을 향하도록 할 수도 있습니다.

자세한 내용은 이동 패스 만들기, 수정 또는 삭제에서 "이동 개체의 원점이 계속 패스에 있도록 유지"를 참조하십시오.

이동 패스가 생성된 다음에는 이동 패스가 포함된 동일한 타임라인에 수동 애니메이션을 추가할 수 있습니다.

[!참고]

Expression Blend에서 이동 패스를 포함하고 있는 스토리보드를 반전시켜 이동 패스를 반전할 수는 없습니다. 그러나 패스가 반대로 실행되도록 변형(대칭 이동)하거나 AutoReverse 스토리보드 속성을 사용하여 스토리보드가 앞으로 재생된 다음 반대로 재생되도록 만들 수 있습니다.

다중 및 오버랩 애니메이션 타임라인 사용

Expression Blend의 스토리보드는 응용 프로그램에서 동시에 둘 이상의 스토리보드 및 여러 타임라인을 실행할 수 있도록 구축되었습니다. 예를 들어 나비를 나타내는 두 개의 원을 그리고 원을 그리는 이동 패스를 따라 이동하는 나비의 애니메이션 타임라인을 만든 다음 날개를 퍼덕이는 애니메이션 타임라인을 별도로 만들 수 있습니다. 타임라인에서 나비 개체의 동일한 속성에 애니메이션 효과를 적용하지 않기 때문에 원형 애니메이션을 중단하지 않고도 원형 애니메이션과 동시에 날개를 퍼덕이는 애니메이션을 실행할 수 있습니다.

실습 정보: 오버랩 애니메이션 만들기에서 예를 참조하십시오.

두 개의 애니메이션 타임라인에서 동시에 같은 속성에 애니메이션 효과를 적용하는 경우 두 번째 애니메이션의 키 프레임을 0초 표시에서 기록하는지 여부에 따라 타임라인 간 전환이 다르게 작동합니다. 0초 표시에서 키 프레임을 기록하지 않으면 Expression Blend에서는 애니메이션이 중단될 때의 마지막 속성 값에서 두 번째 타임라인의 첫 번째 키 프레임에 설정된 속성 값으로 애니메이션 효과를 적용하는 것으로 가정합니다. 이러한 형식의 전환을 핸드오프 애니메이션이라고 합니다. 예를 들어 첫 번째 타임라인에서는 너비가 두 배로 늘어나고 두 번째 타임라인에서는 너비가 네 배로 늘어나는 원을 가정해 보십시오. 두 번째 애니메이션 타임라인에 의해 첫 번째 애니메이션 타임라인이 중단되는 경우 0초 표시에 설정된 키 프레임이 없으면 타원은 첫 번째 타임라인이 중단되는 순간에서 두 번째 타임라인(원래 너비의 네 배)의 끝점으로 부드럽게 확장됩니다. 두 번째 애니메이션 타임라인이 핸드오프 애니메이션이 아닐 경우 즉, 키 프레임이 0초 표시에서 설정된 경우에는 원이 두 번째 애니메이션의 시작점으로 갑자기 이동하게 됩니다.

실습 정보: 핸드오프 및 비핸드오프 애니메이션 재생에서 예를 참조하십시오.

[!참고]

두 타임라인에서 개체의 같은 속성에 애니메이션 효과를 적용하면 타임라인이 계속 반복되도록 설정된 경우에도 첫 번째 타임라인은 중단되는 순간에 중지됩니다.

프레임 속도

Expression Blend에서는 타임라인을 따라 키 프레임을 설정하여 애니메이션을 만듭니다. 키 프레임 간 보간은 런타임에 수행됩니다. 따라서 애니메이션 프레임 속도를 구성할 필요가 없습니다. 응용 프로그램을 실행하면 .NET Framework 런타임에서 가장 높은 프레임 속도로 애니메이션 타임라인을 렌더링합니다.

그러나 타임라인에서 키 프레임을 설정할 수 있는 간격을 지정할 수 있습니다. 이러한 간격 비율은 플레이헤드 Cc295346.5626c9eb-40bb-450a-9ca1-3678e5abe429(KO-KR,Expression.30).png 또는 키 프레임 Cc295346.fa3c696d-5463-4000-8a6b-650fe6759bf7(KO-KR,Expression.30).png 을 맞출 수 있는 위치를 나타내기 때문에 맞춤 해상도라고 합니다. 예를 들어 맞춤 해상도를 10(초당 키 프레임 수)으로 변경하면 타임라인을 따라 1/10초마다 하나씩 키 프레임을 설정할 수 있습니다. 맞춤 해상도를 변경하려면 개체 및 타임라인에서 맞추기 토글 단추 Cc295346.d4a3eb40-55f9-4120-9ba0-acc90a465828(KO-KR,Expression.30).png 옆에 있는 드롭다운 화살표를 클릭한 다음 맞추기를 클릭하여 맞춤 해상도 대화 상자를 표시합니다.

장면

Expression Blend에서는 장면 또는 사용자 정의 컨트롤 내에 애니메이션을 캡슐화한 다음 응용 프로그램의 다른 문서에서 해당 애니메이션을 여러 번 사용할 수 있습니다. 사용자 정의 컨트롤은 하나의 문서나 .dll(컨트롤 라이브러리) 파일로 만들 수 있습니다. 다른 모든 컨트롤과 마찬가지로 응용 프로그램의 파트인 모든 사용자 정의 컨트롤은 자산 패널 Cc295346.0d8b8d29-1af9-418f-8741-be3097d76eab(KO-KR,Expression.30).png 의 프로젝트 범주에서 액세스하여 문서에 그릴 수 있습니다.

[!참고]

프로젝트에 사용자 정의 컨트롤을 추가한 후 자산 패널에 사용자 정의 컨트롤이 표시되도록 하려면 프로젝트를 빌드해야 합니다. 프로젝트 메뉴에서 프로젝트 빌드를 클릭합니다.

사용자 정의 컨트롤에서 애니메이션 효과를 적용할 부분을 계획할 때는 다음 사항을 고려하십시오.

다양한 애니메이션의 타이밍 예를 들어 시작 화면에 먼저 애니메이션 효과를 적용한 다음 사용자 인터페이스에 점점 밝아지는 애니메이션 효과를 적용하는 응용 프로그램을 가정해 보겠습니다. 각 애니메이션을 고유한 사용자 정의 컨트롤에 넣을 수 있지만 두 번째 애니메이션이 시작될 때 시작 화면 애니메이션이 완료될 때까지 걸리는 시간만큼 충분한 시간을 남겨 놓을 수 있습니다.
애니메이션에서 사용할 수 있는 속성 및 트리거 예를 들어 단추가 포함된 응용 프로그램과 사용자 정의 컨트롤에 포함된 애니메이션을 가정해 보겠습니다. 단추를 클릭할 때 애니메이션 타임라인을 시작할 트리거를 사용자 정의 컨트롤에 추가하려면 단추가 사용자 정의 컨트롤의 파트가 되어야 합니다. 또한 두 속성이 같은 사용자 정의 컨트롤에 있는 경우에만 속성 값 사이의 데이터를 바인딩할 수 있습니다.

[!참고]

Silverlight 프로젝트에서는 트리거를 사용할 수 없습니다. 그러나 동작을 사용하여 스토리보드 및 상태 전환을 제어할 수 있습니다.

자세한 내용은 개체에 동작 추가를 참조하십시오.

사용자 정의 컨트롤에 대한 자세한 내용은 빈 사용자 컨트롤 만들기를 참조하거나 스토리보드의 실행 시점 제어에서 "사용자 정의 컨트롤의 스토리보드"를 참조하십시오.

스토리보드 테스트

Expression Blend 프로젝트의 스토리보드는 제작 환경 내에서 또는 응용 프로그램이 컴파일되는 런타임에 프로젝트 메뉴에서 프로젝트 실행을 클릭하거나 F5 키를 눌러 여러 가지 방법으로 테스트할 수 있습니다. 제작 환경 내에서는 개체 및 타임라인 패널에 있는 재생 컨트롤을 사용할 수 있습니다.

개체 및 타임라인 패널의 재생 컨트롤

Cc295346.ab1e4f11-0317-4ef1-a029-7d749629f0f8(KO-KR,Expression.30).png

첫 번째 프레임으로 이동 - 애니메이션의 첫 번째 프레임으로 플레이헤드 를 보냅니다.
이전 프레임으로 이동 - 이전 프레임으로 플레이헤드를 보냅니다.
재생 - 현재 시점에서 애니메이션을 재생합니다.
다음 프레임으로 이동 - 다음 프레임으로 플레이헤드를 보냅니다.
마지막 프레임으로 이동 - 애니메이션의 마지막 프레임으로 플레이헤드를 보냅니다.

타임라인 스크럽

타임라인 스크럽은 미리 보거나 테스트할 애니메이션의 속도와 위치를 정확하게 제어할 수 있는 유용한 기술입니다. 스크럽은 플레이헤드를 끌어서 수행합니다. 플레이헤드를 끌면 아트보드에 애니메이션이 표시됩니다. 정상적으로 또는 반대로 프레임을 스크럽할 수 있습니다. 애니메이션이 재생되는 속도는 플레이헤드를 끄는 속도에 따라 달라집니다.

타임라인 스크러빙에서 예를 참조하십시오.

시간 맞추기

개체 및 타임라인 패널에는 애니메이션 재생을 제어하고 맞춤 해상도에 따라 결정되는 별도의 단위(초당 프레임)로 시간을 탐색할 수 있는 컨트롤이 있습니다. 재생 컨트롤을 사용하여 시간을 탐색할 때 시간 맞추기 기능이 사용됩니다. 다음 프레임 및 이전 프레임 단추를 클릭하면 지정된 초당 프레임 크기만큼 앞뒤로 플레이헤드가 이동합니다. 초당 프레임 크기는 맞춤 해상도에서 결정합니다.

맞춤 해상도 대화 상자

Cc295346.df6c0208-d349-4948-b096-31869b94269d(KO-KR,Expression.30).png

맞춤 해상도 사용에 대한 예는 타임라인 맞추기 설정 또는 해제 및 맞춤 해상도 변경을 참조하십시오.

[!참고]

타임라인 맞추기는 응용 프로그램이 실행될 때 프레임 속도나 애니메이션 속도에 적용되지 않습니다. 자세한 내용은 이 항목의 앞부분에 나오는 "프레임 속도"를 참조하십시오.

시간 표시

현재 시간 표시에는 현재 선택된 시점이 MM:SS:xxx(분, 초, 밀리초) 형식으로 표시됩니다. 특정 시점으로 빠르게 이동하려면 이 필드에 숫자 값을 입력하여 해당 시점으로 직접 이동할 수 있습니다.

1.450초를 나타내는 플레이헤드 위치 텍스트 상자

Cc295346.74a390c7-0ed5-4f6a-8f8b-372e6e0dcbdf(KO-KR,Expression.30).png

시간 표시 사용에 대한 예는 타임라인의 특정 지점으로 이동을 참조하십시오.

트리거

트리거를 사용하면 이벤트 또는 속성 변경에 대한 응답으로 아트보드에 있는 개체의 상태를 변경할 수 있습니다. 트리거를 사용하여 애니메이션 타임라인을 시작하고 중지할 수도 있습니다. 예를 들어 타임라인을 만들면 응용 프로그램이 처음 로드될 때 타임라인을 실행하는 기본 트리거가 만들어집니다. 이 트리거를 수정할 수 있으며 사용자가 단추를 클릭하거나 그 밖의 다른 액션을 수행할 때 타임라인을 실행할 다른 트리거를 만들 수 있습니다.

트리거에 대한 자세한 내용은 트리거를 사용하여 WPF 컨트롤의 동작 정의를 참조하십시오.

[!참고]

Silverlight 프로젝트에서는 트리거를 사용할 수 없습니다. 그러나 동작을 사용하여 스토리보드 및 상태 전환을 제어할 수 있습니다.

자세한 내용은 개체에 동작 추가를 참조하십시오.

이벤트 처리기

이벤트 처리기는 지정된 이벤트(예: MouseOver)가 발생할 때 실행되도록 프로그래밍된 메서드입니다. 응용 프로그램에서 이벤트가 발생할 때 속성 설정이나 애니메이션 타임라인 제어의 범위를 넘는 작업을 수행해야 하는 경우 트리거 대신 이벤트 처리기를 사용할 수 있습니다. 이벤트 처리기 메서드를 사용하면 다른 개체에 대한 속성 설정, 새 문서 로드, 새 개체 만들기, 수학적 계산을 사용하여 개체에 애니메이션 효과 적용 등의 다른 프로그래밍 논리를 추가할 수 있습니다. 예를 들어 KeyDown 이벤트 중에 눌린 키를 확인하려면 키를 누를 때 호출되는 이벤트 처리기 메서드를 만들고 눌린 키를 확인하는 코드를 추가해야 합니다.

이벤트 처리기 메서드는 문서의 코드 숨김 파일에 정의됩니다. WPF 또는 Silverlight 프로젝트에서는 코드 숨김 파일이 Microsoft Visual C# 또는 Microsoft Visual Basic .NET으로 작성됩니다.

타임라인에서 트리거를 사용하여 미디어 제어 및 실습 정보: Silverlight 응용 프로그램에서 동적으로 새 페이지 로드에서 예를 참조하십시오.

코딩된 애니메이션

Expression Blend의 디자인 보기에서 작업하는 경우 XAML이나 코드 숨김 파일의 코드를 수정하지 않고도 전체 애니메이션 타임라인을 만들 수 있습니다. 사용자 상호 작용에 따라 애니메이션 타임라인을 시작, 중지 및 일시 중지하는 트리거를 구성할 수도 있습니다. Expression Blend의 디자인 보기에서 원하는 모든 애니메이션 작업을 수행할 수 있습니다.

수학적 계산을 사용하여 개체의 이동을 확인하는 경우처럼 몇 가지 고급 애니메이션 시나리오에서는 C#이나 Visual Basic .NET으로 코딩해야 합니다. 코드 숨김 파일에서 애니메이션 타임라인을 조작하려는 경우 응용 프로그램이 사용하는 기술의 애니메이션 모델을 이해하는 것이 좋습니다(WPF 또는 Silverlight).

XAML에서 애니메이션 타임라인은 STORYBOARD 요소로 표시됩니다. 예를 들어 Expression Blend의 디자인 보기에서 애니메이션 타임라인을 만들면 애니메이션에 대해 다음과 같은 XAML 코드가 생성됩니다.

<Window.Resources>
  <Storyboard x:Key="MoveRight">
    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
        Storyboard.TargetName="rectangle"
        Storyboard.TargetProperty="...(TranslateTransform.Y)">
      <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
      <SplineDoubleKeyFrame KeyTime="00:00:01" Value="375"/>
    </DoubleAnimationUsingKeyFrames>
  </Storyboard>
</Window.Resources>

위 XAML 예의 특성은 다음과 같습니다.

x:Key 특성은 타임라인 또는 스토리보드의 이름을 지정합니다.
BeginTime 특성은 애니메이션의 시작 시간을 지정합니다. 이 경우는 0초 표시입니다.
TargetName 특성은 스토리보드 또는 타임라인에서 애니메이션 효과를 적용하는 요소의 이름을 지정합니다. 이 경우는 "rectangle"이라는 개체입니다.
TargetProperty 특성은 변경될 속성을 지정합니다. 이 경우는 사각형의 Y 위치 속성을 지정합니다.
KeyTime 특성은 대상 속성이 변경되는 시간 간격 및 변경되는 값을 지정합니다. Expression Blend의 디자인 보기에서는 이러한 요소가 타임라인의 키 프레임으로 표시됩니다.

C#이나 Visual Basic .NET을 사용하여 코드 숨김 파일에서 애니메이션 타임라인을 프로그래밍 방식으로 제어할 수 있습니다. 예를 들어 코드 숨김 파일에서 위 애니메이션 타임라인을 시작하면 C# 코드가 다음과 같이 나타날 수 있습니다.

Storyboard moveRight;
moveRight = (Storyboard)this.Resources["MoveRight"];
moveRight.Begin(this);

XAML 및 코드 숨김 파일에서 애니메이션 타임라인을 만들고 조작하는 방법에 대한 자세한 내용은 MSDN에서 Windows Presentation Foundation 섹션의 애니메이션 및 타이밍 항목을 참조하거나 Microsoft Expression 웹 사이트에 게시된 예제 및 자습서를 참조하십시오.