Wednesday 4 July 2007

Fading Rectangly thingy Silverlight XAML Animation

I just created in about 10 minutes a little fun animation in silverlight.

We have four squares rotating and fading, to build a larger square (looks quite pretty).

The XAML is below.

I will look into hosting these somewhere at some point



<Canvas>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="myRectangleRotate1" Storyboard.TargetProperty="Angle" To="90" Duration="0:0:01"/>
<DoubleAnimation Storyboard.TargetName="myRectangleRotate2" Storyboard.TargetProperty="Angle" To="180" Duration="0:0:02"/>
<DoubleAnimation Storyboard.TargetName="myRectangleRotate3" Storyboard.TargetProperty="Angle" To="270" Duration="0:0:03"/>
<DoubleAnimation Storyboard.TargetName="myRectangleRotate4" Storyboard.TargetProperty="Angle" To="360" Duration="0:0:04"/>
<DoubleAnimation Storyboard.TargetName="myRectangle1" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:04"/>
<DoubleAnimation Storyboard.TargetName="myRectangle2" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:04"/>
<DoubleAnimation Storyboard.TargetName="myRectangle3" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:04"/>
<DoubleAnimation Storyboard.TargetName="myRectangle4" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:04"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Canvas.Triggers>

<TextBlock x:Name="helloBlock" Foreground="SlateBlue"/>
<Rectangle x:Name="myRectangle1" Height="100" Width="100" Canvas.Left="200" Canvas.Top="200"
Fill="SlateBlue" Opacity="0">
<Rectangle.RenderTransform>
<RotateTransform x:Name="myRectangleRotate1" Angle="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="myRectangle2" Height="100" Width="100" Canvas.Left="200" Canvas.Top="200"
Fill="SlateBlue" Opacity="0">
<Rectangle.RenderTransform>
<RotateTransform x:Name="myRectangleRotate2" Angle="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="myRectangle3" Height="100" Width="100" Canvas.Left="200" Canvas.Top="200"
Fill="SlateBlue" Opacity="0">
<Rectangle.RenderTransform>
<RotateTransform x:Name="myRectangleRotate3" Angle="0"/>
</Rectangle.RenderTransform>
</Rectangle>
<Rectangle x:Name="myRectangle4" Height="100" Width="100" Canvas.Left="200" Canvas.Top="200"
Fill="SlateBlue" Opacity="0">
<Rectangle.RenderTransform>
<RotateTransform x:Name="myRectangleRotate4" Angle="0"/>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>

No comments: