Sunday, June 12, 2011

How to use Easing function in Silverlight?

In this article let us learn how to use Easing function in a Silverlight application. When we animate  something in WPF or Silverlight, the result of that animation is linear. To make our animations more interesting, we can make use of easing function in silverlight. Easing essentially changes our animation from being linear to something by slowing down or speeding up the rate at which our properties change. In this article let us learn its implementation.

As usual, open visual studio and select Silverlight project. We can notice that there is a Grid layout in our MainPage.xaml.  Remove the default Grid layout and just drag and drop the Stack panel Layout into our application. The code for this looks like as

<StackPanel x:Name="LayoutRoot" Background="White"> </StackPanel>

Now let us create a storyboard as shown below. From the below code we can observe that the target properties are “ScaleX” and “ScaleY”. This means that we are going to animate an element with the help of its height and width.

<StackPanel.Resources>
   <Storyboard x:Name="myStoryboard">
      <DoubleAnimation From="1" To="2" Duration="00:00:1"
      Storyboard.TargetName="myScaleTransform"
      Storyboard.TargetProperty="ScaleX">
            <DoubleAnimation.EasingFunction>
                   <BackEase Amplitude="0.9" EasingMode="EaseInOut" />
            </DoubleAnimation.EasingFunction>
      </DoubleAnimation>
      <DoubleAnimation From="1" To="2" Duration="00:00:1"
      Storyboard.TargetName="myScaleTransform"
      Storyboard.TargetProperty="ScaleY">
             <DoubleAnimation.EasingFunction>
                    <BackEase Amplitude="0.9" EasingMode="EaseInOut" />
             </DoubleAnimation.EasingFunction>
      </DoubleAnimation>
   </Storyboard>
</StackPanel.Resources>

In the above code, the code between <DoubleAnimation.EasingFunction> and                     </DoubleAnimation.EasingFunction> is actually responsible for Easing our animated rectangle. Here I used easing amplitude as “0.9”. The larger the amplitude, the larger the retraction before and/or after the animation. Here I used two easing functions one for easing the width of the rectangle and the other for easing the height of the rectangle.

Let us take a rectangle and apply scale transform to it as shown below. From the below code we can observe that transform name and storyboard target name both are same. This means that we are going to apply an animation to a transform.

<Rectangle Margin="60" x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="50" Height="50" >
      <Rectangle.RenderTransform>
             <ScaleTransform x:Name="myScaleTransform" />
      </Rectangle.RenderTransform>
 </Rectangle>

Our animation will start whenever mouse left button is clicked on the rectangle. The code for this is as follows.

private void Mouse_Clicked(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }

That’s it!!!! Just press F5 and see the result

Sample output:

How to use Easing function in Silverlight

Here is the sample code for the above explanation:

MainPage.xaml:

<UserControl x:Class="backease.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:DesignHeight="300" d:DesignWidth="400">

      <StackPanel x:Name="LayoutRoot" Background="White">
        <StackPanel.Resources>
            <Storyboard x:Name="myStoryboard">
                <DoubleAnimation From="1" To="2" Duration="00:00:1"
                Storyboard.TargetName="myScaleTransform"
                Storyboard.TargetProperty="ScaleX">
                    <DoubleAnimation.EasingFunction>
                        <BackEase Amplitude="0.9" EasingMode="EaseInOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
                <DoubleAnimation From="1" To="2" Duration="00:00:1"
                Storyboard.TargetName="myScaleTransform"
                Storyboard.TargetProperty="ScaleY">
                    <DoubleAnimation.EasingFunction>
                        <BackEase Amplitude="0.9" EasingMode="EaseInOut" />
                    </DoubleAnimation.EasingFunction>
                </DoubleAnimation>
            </Storyboard>
        </StackPanel.Resources>

        <Rectangle Margin="60" x:Name="myRectangle" MouseLeftButtonDown="Mouse_Clicked" Fill="Blue" Width="50" Height="50" >
            <Rectangle.RenderTransform>
                <ScaleTransform x:Name="myScaleTransform" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </StackPanel>
</UserControl> 

MainPage.xaml.cs:

public MainPage()
        {
            InitializeComponent();
        }
        private void Mouse_Clicked(object sender, MouseEventArgs e)
        {
            myStoryboard.Begin();
        }

0 comments:

Post a Comment

Subscribe via Email