Recommended

Skip Navigation LinksHome / Articles / View Article

Animation Easings in Silverlight 3

+ Add to SilverlightShow Favorites
9 comments   /   posted by Nikolay Raychev on Mar 25, 2009
(2 votes)
Tags: Animation Easing , Animations , Silverlight , C# , XAML , Nikolay Raychev , Silverlight 3
Categories: Tutorials , Samples , QuickStarts

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. It won't be so easy if you want to make it yourself. But in Silverlight 3 it is ready, waiting you to use it. You just need to add an EasingFunction to your Animation:

<Storyboard x:Name="sbBackEaseIn">  
    <DoubleAnimation From="50" To="400" Duration="0:0:10" 
        Storyboard.TargetName="circle" 
        Storyboard.TargetProperty="(Canvas.Top)">  
        <DoubleAnimation.EasingFunction> 
            <BackEase EasingMode="EaseIn" 
                Amplitude="0.5"></BackEase> 
        </DoubleAnimation.EasingFunction> 
    </DoubleAnimation> 
</Storyboard> 

Please note the parameters of the BackEase object.

Let's describe the EasingMode. You can set it to:

  • EaseIn - the animation ease function occurs in the beginning of the animation.
  • EaseOut - the animation ease function occurs in the end of the animation.
  • EaseInOut - the animation ease function occurs both in the beginning and in the end of the animation

NOTE: The EasingMode parameter is valid for all animation functions.

NOTE: The Amplitude is specific for the BackEase function and is connected with the distance the ellipse goes backward before going ahead. Some of the easing functions have their own parameters while others do not have. You can see an example for all of them in the demo.

Here is a list of all animation easings. You can see each of them in action in the demo.

  • BackEase
  • BounceEase
  • CircleEase
  • CubicEase
  • ElasticEase
  • ExponentialEase
  • PowerEase
  • QuadraticEase
  • QuarticEase
  • QuinticEase
  • SineEase

Demo

Here you can test each of the animation easing functions with each EasingMode parameter:

I have just created a separate Storyboard for every combination of animation easing and mode.

XAML:

<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="300" 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.EasingFunction> 
                    <BackEase EasingMode="EaseIn" Amplitude="0.5"></BackEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbBackEaseOut">  
            <DoubleAnimation From="0" To="350" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <BackEase EasingMode="EaseOut" Amplitude="0.5"></BackEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbBackEaseInOut">  
            <DoubleAnimation From="50" To="350" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <BackEase EasingMode="EaseInOut" Amplitude="0.5"></BackEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbBounceEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <BounceEase Bounces="10" Bounciness="2" 
                        EasingMode="EaseIn"></BounceEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbBounceEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <BounceEase Bounces="10" Bounciness="2" 
                        EasingMode="EaseOut"></BounceEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbBounceEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <BounceEase Bounces="10" Bounciness="2" 
                        EasingMode="EaseInOut"></BounceEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbCircleEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <CircleEase EasingMode="EaseIn"></CircleEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbCircleEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <CircleEase EasingMode="EaseOut"></CircleEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbCircleEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <CircleEase EasingMode="EaseInOut"></CircleEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbCubicEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <CubicEase EasingMode="EaseIn"></CubicEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbCubicEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <CubicEase EasingMode="EaseOut"></CubicEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbCubicEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <CubicEase EasingMode="EaseInOut"></CubicEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbElasticEaseIn">  
            <DoubleAnimation From="130" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <ElasticEase Springiness="5" Oscillations="3" 
                        EasingMode="EaseIn"></ElasticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbElasticEaseOut">  
            <DoubleAnimation From="0" To="270" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <ElasticEase Springiness="5" Oscillations="3" 
                        EasingMode="EaseOut"></ElasticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbElasticEaseInOut">  
            <DoubleAnimation From="130" To="270" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <ElasticEase Springiness="5" Oscillations="3" 
                        EasingMode="EaseInOut"></ElasticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbExponentialEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <ExponentialEase Exponent="3" 
                        EasingMode="EaseIn"></ExponentialEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbExponentialEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <ExponentialEase Exponent="3" 
                        EasingMode="EaseOut"></ExponentialEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbExponentialEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <ExponentialEase Exponent="3" 
                        EasingMode="EaseInOut"></ExponentialEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbPowerEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                    Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <PowerEase Power="3" 
                        EasingMode="EaseIn"></PowerEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbPowerEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <PowerEase Power="3" 
                        EasingMode="EaseOut"></PowerEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbPowerEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <PowerEase Power="3" 
                        EasingMode="EaseInOut"></PowerEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbQuadraticEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuadraticEase EasingMode="EaseIn"></QuadraticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbQuadraticEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuadraticEase EasingMode="EaseOut"></QuadraticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbQuadraticEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuadraticEase EasingMode="EaseInOut"></QuadraticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbQuarticEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuarticEase EasingMode="EaseIn"></QuarticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbQuarticEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuarticEase EasingMode="EaseOut"></QuarticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbQuarticEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuarticEase EasingMode="EaseInOut"></QuarticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbQuinticEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuinticEase EasingMode="EaseIn"></QuinticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbQuinticEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuinticEase EasingMode="EaseOut"></QuinticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbQuinticEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <QuinticEase EasingMode="EaseInOut"></QuinticEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
 
        <Storyboard x:Name="sbSineEaseIn">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <SineEase EasingMode="EaseIn"></SineEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbSineEaseOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <SineEase EasingMode="EaseOut"></SineEase> 
                </DoubleAnimation.EasingFunction> 
            </DoubleAnimation> 
        </Storyboard> 
        <Storyboard x:Name="sbSineEaseInOut">  
            <DoubleAnimation From="0" To="400" 
                Duration="0:0:10" Storyboard.TargetName="circle" 
                Storyboard.TargetProperty="(Canvas.Top)">  
                <DoubleAnimation.EasingFunction> 
                    <SineEase EasingMode="EaseInOut"></SineEase> 
                </DoubleAnimation.EasingFunction> 
            </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> 
        <TextBlock Text="Mode" Canvas.Left="150" Canvas.Top="20"></TextBlock> 
        <ComboBox x:Name="cbMode" Canvas.Left="150" Canvas.Top="40" 
            SelectedIndex="0" Width="140">  
            <ComboBox.Items> 
                <ComboBoxItem Name="EaseIn" Content="EaseIn"></ComboBoxItem> 
                <ComboBoxItem Name="EaseOut" Content="EaseOut"></ComboBoxItem> 
                <ComboBoxItem Name="EaseInOut" Content="EaseInOut"></ComboBoxItem> 
            </ComboBox.Items> 
        </ComboBox> 
        <TextBlock Text="Easing" Canvas.Left="150" Canvas.Top="70"></TextBlock> 
        <ComboBox x:Name="cbEasing" Canvas.Left="150" Canvas.Top="90" 
            SelectedIndex="0" Width="140">  
            <ComboBox.Items> 
                <ComboBoxItem Name="BackEase" Content="BackEase"></ComboBoxItem> 
                <ComboBoxItem Name="BounceEase" Content="BounceEase"></ComboBoxItem> 
                <ComboBoxItem Name="CircleEase" Content="CircleEase"></ComboBoxItem> 
                <ComboBoxItem Name="CubicEase" Content="CubicEase"></ComboBoxItem> 
                <ComboBoxItem Name="ElasticEase" Content="ElasticEase"></ComboBoxItem> 
                <ComboBoxItem Name="ExponentialEase" Content="ExponentialEase"></ComboBoxItem> 
                <ComboBoxItem Name="PowerEase" Content="PowerEase"></ComboBoxItem> 
                <ComboBoxItem Name="QuadraticEase" Content="QuadraticEase"></ComboBoxItem> 
                <ComboBoxItem Name="QuarticEase" Content="QuarticEase"></ComboBoxItem> 
                <ComboBoxItem Name="QuinticEase" Content="QuinticEase"></ComboBoxItem> 
                <ComboBoxItem Name="SineEase" Content="SineEase"></ComboBoxItem> 
            </ComboBox.Items> 
        </ComboBox> 
        <Button x:Name="btnStart" Canvas.Left="150" Canvas.Top="140" 
            Width="140" Content="Start" Click="btnStart_Click"></Button> 
    </Canvas> 
 
</UserControl> 

Code behind:

using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Net;  
using System.Windows;  
using System.Windows.Controls;  
using System.Windows.Documents;  
using System.Windows.Input;  
using System.Windows.Media;  
using System.Windows.Media.Animation;  
using System.Windows.Shapes;  
 
namespace AnimationEasings  
{  
    public partial class MainPage : UserControl  
    {
        #region Constructors  
        public MainPage()  
        {  
            InitializeComponent();  
        }
        #endregion  
 
        #region Handlers  
        private void btnStart_Click( object sender, RoutedEventArgs e )  
        {  
            //Canvas.SetTop(this.circle, 0);     
 
            ComboBoxItem cbEasingItem = ( ComboBoxItem )this.cbEasing.SelectedItem;  
            ComboBoxItem cbModeItem = ( ComboBoxItem )this.cbMode.SelectedItem;  
 
            switch ( cbEasingItem.Name )  
            {  
                case "BackEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbBackEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbBackEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbBackEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "BounceEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbBounceEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbBounceEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbBounceEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "CircleEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbCircleEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbCircleEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbCircleEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "CubicEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbCubicEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbCubicEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbCubicEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "ElasticEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbElasticEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbElasticEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbElasticEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "ExponentialEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbExponentialEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbExponentialEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbExponentialEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "PowerEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbPowerEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbPowerEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbPowerEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "QuadraticEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbQuadraticEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbQuadraticEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbQuadraticEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "QuarticEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbQuarticEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbQuarticEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbQuarticEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "QuinticEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbQuinticEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbQuinticEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbQuinticEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
                case "SineEase":  
                    switch ( cbModeItem.Name )  
                    {  
                        case "EaseIn":  
                            this.sbSineEaseIn.Begin();  
                            break;  
                        case "EaseOut":  
                            this.sbSineEaseOut.Begin();  
                            break;  
                        case "EaseInOut":  
                            this.sbSineEaseInOut.Begin();  
                            break;  
                    }  
                    break;  
            }  
        }
        #endregion  
    }  
}  
 

Conclusion

With the animation easings you can easily achieve some effects that are hard to create by yourself. Any comments are welcome.

Share


Comments

Comments RSS RSS

  • RE: Animation Easings in Silverlight 3  

    posted by Viktor on Mar 25, 2009 14:54
    Sometimes its better to create animations in code-behind, on the fly, but I've been trying to figure out how to assign easingfunctions to animations in code-behind with no luck. Do you know how?

  • RE: Animation Easings in Silverlight 3  

    posted by nikolayraychev on Apr 06, 2009 09:01

    Hi Viktor,

    Try the following:

    <UserControl.Resources> 
        <Storyboard x:Name="sbBackEaseIn">  
            <DoubleAnimation x:Name="daBackEase" From="50" To="400" Duration="0:0:10"   
                Storyboard.TargetName="circle"   
                Storyboard.TargetProperty="(Canvas.Top)">  
            </DoubleAnimation> 
        </Storyboard> 
    </UserControl.Resources 

    public MainPage()  
    {  
        InitializeComponent();  
     
        BackEase backEase = new BackEase();
        backEase.EasingMode = EasingMode.EaseIn;
        backEase.Amplitude = 0.5;
        this.daBackEase.EasingFunction = backEase;  
     
        this.sbBackEaseIn.Begin();  
    } 

    I hope that this will help you.

     

  • Animation Easings in Silverlight 3  

    posted by Bastien Besson on Jul 04, 2009 23:33
    Thanks a lot, this is all what I wanted, nice post :)

  • RE: Animation Easings in Silverlight 3  

    posted by Michael on Jul 20, 2009 03:30
    There is a Silverlight animation creator that uses waypoints, like a game. It's at http://www.spiveyworks.com/dynamicvisuals

  • RE: Animation Easings in Silverlight 3  

    posted by tj.valiyamattam on Aug 27, 2009 09:45
    thanks its realy helpful

  • Animation Easings in Silverlight 3  

    posted by gatof on Dec 17, 2009 18:12
    mmm

    i think this animation are the same like flex mmm but is good have the same tools in both silverlight and flex

  • RE: Animation Easings in Silverlight 3  

    posted by Raj on Mar 22, 2010 13:52
    Great One...

  • RE: Animation Easings in Silverlight 3  

    posted by Jesse Graupmann on Apr 03, 2010 23:54
    There is an easier way to add easing in the code behind. Check out http://artefactanimator.codeplex.com/. It doesn't use storyboards but it give you a simple syntax that mimics Tweener for Flash. It also uses the same code for the Silverlight and WPF version. 

    ArtefactAnimator.AddEase (element, Canvas.LeftProperty, 250, .7, AnimationTransitions.CubicEaseOut, 0);

    You can even animate multiple properties on an object at the same time.

    Application.Current.RootVisual.MouseLeftButtonDown += (s, args) =>
    {
        // position info
        Point pt = args.GetPosition(null);
     
        // transition info
        double time = .8;
        double delay = 0;
        PercentHandler ease = AnimationTransitions.CubicEaseOut;
     
        // ease
        ArtefactAnimator.AddEase(element,
               new object[] { AnimationTypes.X, AnimationTypes.Y },
               new object[] { pt.X, pt.Y },
               time, ease, delay);
    };

  • RE: Animation Easings in Silverlight 3  

    posted by nikolayraychev on Apr 15, 2010 12:26
    Thanks for sharing, Jesse :)

Add Comment

 
 

   
 
 
  
   
Please add 4 and 8 and type the answer here:

Help us make SilverlightShow even better and win a free t-shirt. Whether you'd like to suggest a change in the structure, content organization, section layout or any other aspect of SilverlightShow appearance - we'd love to hear from you! Need a material (article, tutorial, or other) on a specific topic? Let us know and SilverlightShow content authors will work to have that prepared for you. (hide this)