Applying Multiple Animations On A Single Property Within A Silverlight5 Application


I came across a situation where I needed to perform multiple rotations on a single object’s property within the same storyboard. However, when I tried to apply two rotations to the same image, I received an error stating that I could not apply multiple animations to the same property within the same storyboard. This had me stumped for a while. That is until I came across Peter Gerritsen’s article called ‘silverlight: multiple animations on one property through transforms‘. By using the DoubleAnimationUsingKeyFrames object in conjunction with a TranformGroup and multiple RotateTransform objects I was able apply multiple rotations to a single element on the same storyboard.

The XAML Code:

<Canvas x:Class=”SilverlightScriptedAnimationHarness.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation&#8221;

xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml&#8221;

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008&#8243;

xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006&#8243;

mc:Ignorable=”d”

d:DesignHeight=”768″ d:DesignWidth=”1024″>

<Image Source=”/SilverlightScriptedAnimationHarness;component/Images/image.jpg” Canvas.Top=”275″ Canvas.ZIndex=”100″ />

<Canvas x:Name=”LayoutRoot” Background=”transparent”>

<Canvas.Resources>

<Storyboard x:Name=”MultipleRotationsStoryboard” AutoReverse=”True” RepeatBehavior=”Forever”>

<DoubleAnimationUsingKeyFrames x:Name=”RotateAnimation1″ BeginTime=”00:00:00″ Storyboard.TargetName=”RotateTransform1″ Storyboard.TargetProperty=”Angle”>

<EasingDoubleKeyFrame KeyTime=”00:00:05″ Value=”360″>

<EasingDoubleKeyFrame.EasingFunction>

<CubicEase EasingMode=”EaseInOut” />

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames x:Name=”RotateAnimation2″ BeginTime=”00:00:00″ Storyboard.TargetName=”RotateTransform2″ Storyboard.TargetProperty=”Angle”>

<EasingDoubleKeyFrame KeyTime=”00:00:05″ Value=”360″>

<EasingDoubleKeyFrame.EasingFunction>

<CubicEase EasingMode=”EaseInOut” />

</EasingDoubleKeyFrame.EasingFunction>

</EasingDoubleKeyFrame>

</DoubleAnimationUsingKeyFrames>               

</Storyboard>

</Canvas.Resources>

<Rectangle x:Name=”RotateRectangle” Fill=”Blue” Width=”50″ Height=”50″ Canvas.Top=”240″ Canvas.Left=”200″>

<Rectangle.RenderTransform>

<TransformGroup>

<RotateTransform Angle=”0″ CenterX=”0″ CenterY=”0″ x:Name=”RotateTransform1″ />

<RotateTransform Angle=”0″ CenterX=”50″ CenterY=”50″ x:Name=”RotateTransform2″ />

</TransformGroup>

</Rectangle.RenderTransform>

</Rectangle>

<Button x:Name=”MultipleAnimationsOnProperty” Canvas.Left=”800″ Canvas.Top=”200″ Width=”100″ Height=”75″ Content=”Multiple” />

</Canvas>

</

Canvas>

The VB.NET Code:

Partial PublicClassMainPage
  InheritsCanvas
Private Sub MultipleAnimationsOnProperty_Click(sender As System.Object, e As System.Windows.RoutedEventArgs) Handles MultipleAnimationsOnProperty.Click
MultipleRotationsStoryboard.Begin()
  End Sub
End Class

Advertisements