XAML 디자이너에서 개체에 애니메이션 효과 주기Animate objects in XAML Designer

개체를 이동하는 간단한 애니메이션을 만들 수 있고 개체를 페이드 인/페이드 아웃할 수 있습니다.You can create short animations that move objects, or fade them in and out.

시작하려면 스토리보드를 만듭니다.To get started, create a storyboard. 스토리보드에는 하나 이상의 타임 라인이 포함됩니다.A storyboard contains one or more timelines. 타임라인에서 키 프레임 을 설정하여 속성 변경 내용을 표시합니다.Set keyframes on a timeline to mark property changes. 그런 다음 애니메이션을 실행하면 Blend가 지정된 기간 동안 속성 변경 내용을 보간합니다.Then, when you run the animation, Blend interpolates the property changes over the designated period of time. 따라서 부드러운 전환이 가능해집니다.The result is a smooth transition. 비시각적 속성을 비롯하여 개체에 속하는 모든 속성에 애니메이션 효과를 적용할 수 있습니다.You can animate any property that belongs to an object, even nonvisual properties.

다음 그림은 위로 이동이라고 하는 스토리보드를 보여 줍니다.The following illustration shows a storyboard named MoveUp. 타임라인에는 사각형의 X 및 Y 위치를 표시하는 키 프레임이 포함됩니다.The timeline contains keyframes that mark the X and Y position of a rectangle. 이 애니메이션을 실행하면 사각형이 특정 위치에서 다른 위치로 부드럽게 이동합니다.When this animation runs, the rectangle moves from one position to another smoothly.

다음 비디오를 시청하여 애니메이션을 만드는 방법을 배워봅니다.Learn to create animations by watching these videos.

짧은 비디오 보기:Watch a short video: 비디오 내용Learn how to:
설치된 기능 구성 타임라인 만들기Configure Installed Features Create timelines 타임라인을 만들고 타임라인에서 개체 작업을 수행합니다.Create a timeline, and work with objects in the timeline.
설치된 기능 구성 키 프레임 추가 및 애니메이션 반복Configure Installed Features Add keyframes and repeat the animation 키 프레임을 추가하고 각 키 프레임에서 속성을 설정합니다.Add keyframes and set properties at each keyframe. 그런 다음 애니메이션을 실행하고 애니메이션 간 부드럽게 전환되는 개체를 확인합니다.Then, run the animation and watch objects smoothly transition between them.
설치된 기능 구성 대화형 작업을 위한 이벤트 트리거 추가Configure Installed Features Add event triggers for interactivity 이벤트가 발생할 때 애니메이션을 시작합니다.Start an animation when an event occurs. 예를 들어 창이 로드되면 애니메이션을 시작합니다.For example, start one when the window loads.
설치된 기능 구성 색 애니메이션Configure Installed Features Animate colors 애니메이션을 사용하여 개체의 색을 변경합니다.Use an animation to change the color of an object.
설치된 기능 구성 이동 경로 만들기 및 수정Configure Installed Features Create and modify motion paths 패스를 따라 개체에 애니메이션 효과를 적용합니다.Animate objects along a path.
설치된 기능 구성 키 프레임 감속/가속Configure Installed Features Ease keyframes 애니메이션 시작 부분(가속)이나 끝 부분(감속)에서 애니메이션 속도를 높이거나 낮춥니다.Speed up or slow down an animation near the beginning (easing in) or near the end (easing out) of an animation.
설치된 기능 구성 단추 애니메이션Configure Installed Features Animate the button 사용자가 단추를 가리킬 때 단추에 표시되는 흥미로운 효과를 만듭니다.Create interesting effects that appear on a button when the user points to it.
설치된 기능 구성 애니메이션 만들기 및 감속/가속 작업Configure Installed Features Create animation and work with easing 사용자가 계산기의 이미지에 있는 단추를 누를 때 나타나는 효과에 애니메이션 효과를 적용합니다.Animate effects that appear when a user presses down a button on the image of a calculator.

참고 항목See Also

Blend for Visual Studio를 사용하여 UI 만들기Creating a UI by using Blend for Visual Studio