Using effects and animations
in XAML applications can help in creating a much better user experience. In
this tutorial we will cover some of the basics aspects.
Overview of tutorials:
- Controls with build in animations/transitions
- Theme Transition Animations (Transition effects on controls)
- Theme Animations with Storyboards (Custom From-To Animation with ease)
- Key-Frame Animations (Multiple frame storyboard animation)
(A) Controls with
build in animations/transitions
Some controls have built in animations. Examples of these
include:
Here is an example of both a FlipView
and Tooltip
implementation:
*Please note that this solution had the 3 pictures
in the Asset folder to run successfully
(B) Theme Transition
Animations
These animations are a set of predefined transitions that
you can apply to specific events (Here you can see examples
of the available options).
Create an example for both Entrance and Reposition transitions
as follows:
- Create an Items Control (D) instance that has a samples set of rectangles (C) with both the Entrance & Reposition theme animations (B). Also add a button (A) to initiate removal of an item.
- Create a button click event with the following even in the code behind:
(C) Theme Animations (Storyboards)
This is a collection of
predefined animations that transforms a specific property over duration of
time. They are grouped in a storyboard and you can stack them together to form
custom animations. These supports:
Changes are applied in a StoryBoard in the context of a DoubleAnimation
object. Additionally these animations can be extended with the following ease
functions (You
can test your easing options here).
What you need to do:
- Define a XAML element to animate and button to initiate the animation:
- Create a Storyboard(A) as container to combine Animations and also include easing functions(B) in one:
- Finish up by creating the code behind logic behind the button event to initiate the animation:
(D) Key-Frame
Animations
This provides animations with more than one animation
point stacked on top of each other to form the duration with multiple
animations.
We define the stack of animations within DoubleAnimationUsingKeyFrames
element. We can use the following elements to create sub animation points
(Frames) to the bigger animation:
- LinearDoubleKeyFrame. These objects within the animation will create smooth transformation from the previous key frame till the KeyTime specified.
-
SplineDoubleKeyFrame. These objects will implement a KeySpline property that sets first and second control points of a Bezier curve. This will manipulate the acceleration in the animation during the last KeyFrame and the KeyTime specified.
- E.g. KeySpline (0,0 1,0): Simulate acceleration
- E.g. KeySpline (0.10, 0.21 0.00, 1.0): Start of fast and then slow down to end
How to create a key-Frame Animation:
- Start off by using the same button and target element than in (C).
- Create the Key Frames Animations in a StoryBoard:
- Initiate the new Key Frame animation by adding the begin logic to the button code behind event:
