|
1 | 1 | --- |
2 | | -title: "Animate objects in XAML Designer | Microsoft Docs" |
3 | | -ms.custom: "" |
4 | | -ms.date: "11/04/2016" |
5 | | -ms.reviewer: "" |
6 | | -ms.suite: "" |
7 | | -ms.technology: |
8 | | - - "vs-ide-designers" |
9 | | -ms.tgt_pltfrm: "" |
10 | | -ms.topic: "article" |
| 2 | +title: Animate objects in XAML Designer |
| 3 | +ms.date: 04/11/2018 |
| 4 | +ms.technology: vs-ide-designers |
| 5 | +ms.topic: conceptual |
11 | 6 | ms.assetid: fb88fa26-e835-47f5-9771-2f279441c83c |
12 | | -caps.latest.revision: 9 |
13 | 7 | author: "gewarren" |
14 | 8 | ms.author: "gewarren" |
15 | 9 | manager: ghogen |
16 | | -ms.workload: |
| 10 | +ms.workload: |
17 | 11 | - "uwp" |
18 | 12 | --- |
19 | 13 | # Animate objects in XAML Designer |
20 | | -You can create short animations that move objects, or fade them in and out. |
21 | | - |
22 | | - To get started, create a *storyboard*. A storyboard contains one or more *timelines*. Set *keyframes* on a timeline to mark property changes. 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. |
23 | | - |
24 | | - The following illustration shows a storyboard named **MoveUp**. 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. |
25 | | - |
26 | | -  |
27 | | - |
28 | | - Learn to create animations by watching these videos. |
29 | | - |
30 | | -|Watch a short video:|Learn how to:| |
31 | | -|--------------------------|-------------------| |
32 | | -| [Create timelines](http://www.popscreen.com/v/6A4eF/Microsoft-Expression-Blend-Creating-Timelines)|Create a timeline, and work with objects in the timeline.| |
33 | | -| [Add keyframes and repeat the animation](http://www.popscreen.com/v/6A4fi/Microsoft-Expression-Blend-Adding-Keyframes-and-Repeating-an-Animation)|Add keyframes and set properties at each keyframe. Then, run the animation and watch objects smoothly transition between them.| |
34 | | -| [Add event triggers for interactivity](http://www.popscreen.com/v/6A4e4/Microsoft-Expression-Blend-Adding-Event-Triggers-for-Interactivity)|Start an animation when an event occurs. For example, start one when the window loads.| |
35 | | -| [Animate colors](http://www.popscreen.com/v/6A4gv/Microsoft-Expression-Blend-Animating-Colors)|Use an animation to change the color of an object.| |
36 | | -| [Create and modify motion paths](http://www.popscreen.com/v/6A4fX/Microsoft-Expression-Blend-Creating-and-Modifying-Motion-Paths)|Animate objects along a path.| |
37 | | -| [Ease keyframes](http://www.popscreen.com/v/6A4dM/Microsoft-Expression-Blend-Easing-Keyframes)|Speed up or slow down an animation near the beginning (*easing in*) or near the end (*easing out*) of an animation.| |
38 | | -| [Animate the button](http://www.popscreen.com/v/6A4fK/Microsoft-Expression-Blend-Animating-a-Button)|Create interesting effects that appear on a button when the user points to it.| |
39 | | -| [Create animation and work with easing](https://www.youtube.com/watch?v=mAJXYrwxGYo)|Animate effects that appear when a user presses down a button on the image of a calculator.| |
40 | | - |
41 | | -## See Also |
42 | | - [Creating a UI by using Blend for Visual Studio](../designers/creating-a-ui-by-using-blend-for-visual-studio.md) |
| 14 | + |
| 15 | +You can create short animations that move objects, or fade them in and out. |
| 16 | + |
| 17 | +To get started, create a *storyboard*. A storyboard contains one or more *timelines*. Set *keyframes* on a timeline to mark property changes. 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. |
| 18 | + |
| 19 | +The following illustration shows a storyboard named **MoveUp**. 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. |
| 20 | + |
| 21 | + |
| 22 | + |
| 23 | +## See also |
| 24 | + |
| 25 | +- [Create a UI by using Blend for Visual Studio](../designers/creating-a-ui-by-using-blend-for-visual-studio.md) |
0 commit comments