Jumpstart With Animations In Blend 2015

Animation designing in Microsoft Blend 2015 is interesting and some magical things happen when objects move and animate.

Basically, there are two major animation techniques that are generally used. i.e. Frame-Based & Time-Based Animation.

In frame-based animation, the animation cut into frames and displayed one frame at a time. In old films, you might have seen the camera does this by recording many photographs (frames) per second, and, when it is played back, it feels like a moving picture. So it happened in a similar manner except that the frames can be further apart in time and the computer will animate and interpolate any changes in between. The problem with such kind of animation is that they become resource intensive when they run.

In time-based animation, you define the start and end points of a visual transition, and the framework interpolates the property changes over time and displays the animation in our application. In UWP, the animation is time based, so don’t worry about frame based animation.

So simply create a Blank Project in Microsoft Blend for Visual Studio,

Now simply draw an Eclipse for Toolbar and apply Gradients to it,

Now simply go to the ‘Objects and Timeline’ panel and click on the + button in the top right corner of the panel as in the following screenshot. This will add a storyboard into our application,

Now we will get a Popup to set the name of the Storyboard,

Simply name the Storyboard. Now when the Storyboard gets created, you will have the timeline in the Objects and Timeline windows,

Now you can test the storyboard at the design time itself without having to run the application. When you select a storyboard, you see the playback controls on the Objects and Timeline panel. Let's go through them one by one from left to right;

First frame: This moves the playhead to the first frame of the animation.
Previous frame: This moves the playhead to the previous frame.
Play: This plays the animation from the current point in time, that is, from the current position of the playhead.
Next frame: This moves the playhead to the next frame.
Last frame: This moves the playhead to the last frame.

If we select the storyboard and right-click on the animation name, we see multiple options in a popup. Each option in the popup is described in the following list,

New: This creates a new storyboard and asks for a name for it.
Duplicate: This creates a new storyboard that is the same as the existing one.
Reverse: This reverses the sequence and keyframes of the existing storyboard.
Delete: This deletes the selected storyboard.
Rename: This provides us with the option to rename the storyboard.
Close: This closes the animation view and storyboard.

Now if you see the Timeline, you can see the great view through each you can easily manage the Timeline;

Animations in Blend are composed of timelines recorded on keyframes that represent the timing of property changes.

Timelines provide a structure to the animation sequence in our apps. We can think of the timeline as a layer on which the property changes of the objects are applied. The three sections of a timeline are depicted in the following screenshot:

We can see the timeline inside the Objects and Timeline panel. At the top of the Timeline panel, we can see the various controls to play and seek the animation we are designing. The play button is enabled once we have added at least one animation timeframe.
In the second section, you can see the current playhead position, which is 0:00.000 when we created the storyboard. Also, the other two options next to this playhead position are snapping options. The format of the time displayed is MM:SS:xxx (minutes, seconds, milliseconds) of the currently selected point.
The third section that we see shows the visual representation of the playhead position, and we can drag it to the position we want.

The Properties Windows of Microsoft Blend also plays a major role with Storyboard to manage Animations.

Moreover you can see the Keyframe in the Timeline.

A keyframe in an animation that sets a specific state of an object. A sequence of keyframes defines the object’s movement that we see, and the position of a keyframe defines the object movement timing.

The first keyframe defines the starting of the animation and the next one determines how it's going to proceed. By changing the surrounding keyframes, we can change the starting or ending point of the transition, depending on whether the keyframe is before or after the transition.

For example, we can set a keyframe at the 0-second mark, record the position of the ball in the top-left corner of the art board, and then set a keyframe at the 1-second mark to record the position of the same ball in the bottom-right corner of the art board. Now, the animation will move the ball from the top-left corner to the bottom-right corner in 1 second.

We can use these keyframes and the storyboard to change any property of the object, and these properties can be visible or invisible.

Basically there are four types of keyframes in Blend,

Object-level keyframes: These keyframes apply to the whole object (such as an ellipse or rectangle) or to the object that contains multiple objects (such as a grid or canvas). In the latter case, when we expand the object node, we can see the individual elements on which we have recorded the keyframe. As we can see in the image, we have set the keyframe on the ellipse. To record such a keyframe, we can click on an object, such as an ellipse or rectangle, and click on the Record Keyframe button.
Compound keyframes: These keyframes imply that the property has child properties being animated. To record such a keyframe, while still in the recording mode, change any of the compound properties of the object and link the translation and the keyframe will be automatically created.
Simple keyframes: These keyframes represent the property change of a single property. As illustrated in the screenshot, the X and Y properties are simple keyframes. To record such a keyframe, while still in the recording mode, change any of the simple properties of the object, and the keyframe will be automatically created.
Implicit keyframes: These keyframes are present when we move from one animation to another and the second animation does not have a keyframe at the 0-second mark. Blend animates the change from the last known value of the property to the first keyframe of the second animation. This last known value is known as the implicit keyframe even when this is the value between two keyframes in the first animation.

So, let’s design some animations to get hands on experience;

Select the ellipse and click on the Record Keyframe button, as shown in the next image. This will record the current state of the selected object. So, when we click on the Record Keyframe button, make sure that we select only relevant objects just as we selected the ellipse here.

A keyframe is responsible for changing the properties of an object. Once we click on the Record Keyframe button, we can see a white mark in front of the ellipse object as it is the object that was selected when we clicked on Record Keyframe. So, this keyframe has the value of all the properties of ellipse at the 0 sec mark,

ellipse at the 0 sec mark

That’s how we can easily insert a keyframe that is at the initial state for the animation to start. Now to make some action, let us perform some transmission to the ball,

Simply move the playhead in the Timeline panel from the current position, that is, 0 to 1. Click and drag the ellipse to the bottom-right corner of the art board. When we drag the ellipse, we will notice a few changes:

The play button is now enabled. When we click on it, we can see the animation playing. And, we see a highlighted white mark of the playhead in front of the ellipse. So, this keyframe saves all the properties of the ellipse at the 1 sec mark.
We also see a series of dots connecting the original position of the ellipse to the new position. This actually depicts the path that the ellipse will follow when the animation happens;
Now repeat the same step and take the Eclipse to its initial state,

Now simply click upon Storyboard name in the Objects and Timeline Window. You’ll get ‘Common’ in properties Windows. Now simply change the RepeatBehavior to Forever,

Category

So, we have figured out that storyboards are made up of structures called keyframes, and these structures can be changed by specifying the time, property, and value.

Now simply go to Assets Windows and in Behaviors select the ControlStoryboardAction and drop into the Design surface.

And in the Properties Window, select the name of Storyboard in the Storyboard option;

Now when you run the project, you’ll see the ball will bounce as expected.

Now some EasingFunction, click upon Keyframe in Timeline. Now EasingFunction will appear in Easing properties;

And simply select the number of bounces and bounciness;

Now when you run the Application, then the selected animations will work for you.

Further you can add animations according to your own wish.

So, as you saw how interesting is to play with animations. In order to get best hands-on experience along with the blog try out the code either by MSDN code Samples or by GitHub.

Original Blog Reference.