Introduction
Animation Easing are built in animation functions in Silverlight 3. They include several commonly used animations effects.
Overview
I'll describe in details how you can use the BackEase animation. Imagine that you want to move an Ellipse from the top to the bottom of a Canvas. You just create a Storyboard with DoubleAnimation as follows:
<UserControl x:Class="AnimationEasings.MainPage" |
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" |
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" |
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" |
Width="150" Height="450"> |
<UserControl.Resources> |
<Storyboard x:Name="sbBackEaseIn"> |
<DoubleAnimation From="50" To="400" Duration="0:0:10" |
Storyboard.TargetName="circle" |
Storyboard.TargetProperty="(Canvas.Top)"> |
</DoubleAnimation> |
</Storyboard> |
</UserControl.Resources> |
<Canvas x:Name="LayoutRoot" |
Background="LightYellow"> |
<Ellipse x:Name="circle" Width="50" |
Height="50" Canvas.Top="0" Canvas.Left="50"> |
<Ellipse.Fill> |
<ImageBrush x:Name="backgroundImageBrush" |
Stretch="UniformToFill"> |
<ImageBrush.ImageSource> |
<BitmapImage x:Name="bmpBackground" |
UriSource="http://www.silverlightshow.net/Storage/Users/nikolayraychev/sls_icon.jpg"> |
</BitmapImage> |
</ImageBrush.ImageSource> |
</ImageBrush> |
</Ellipse.Fill> |
</Ellipse> |
</Canvas> |
</UserControl> |
Code behind:
public MainPage() |
{ |
InitializeComponent(); |
|
this.sbBackEaseIn.Begin(); |
} |
OK, but what if you want to make the ellipse move up for a while and after that move down.