silverlight / wpf 旋转动画的实现

有些时候我们需要让程序中某个元件按设定的方式旋转，如果是在普通的WinFrom 程序中这样的实现会需要大量的代码来控制线程，和计算变换的角度。

但是在 silverlight / wpf 中旋转的实现就变的极其的简单，让我们一起开始这个简单的过程。

1：首先我们需要确定一个旋转的目标（image）当然其他元件也可

<Image x:Name="DesignerHead" RenderTransformOrigin="0.4,0.5" Source="image/DesignerHead.png" Stretch="Fill" Width="73" Height="41" HorizontalAlignment="Left" Margin="12,12,0,0" VerticalAlignment="Top">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup>
</Image.RenderTransform>
</Image>

2：定义动画行为方式 说明：指定目标“DesignerHead” 元件的 "ScaleTransform.ScaleX" 属性在2秒内 值从1 按时间线逐步变化到 -1 在由 -1逐步变化到 1 整个过程 为2秒，并始终重复该动画过程(RepeatBehavior="Forever" )

<Storyboard x:Key="LoadHeadStoryboard">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:02" RepeatBehavior="Forever" Storyboard.TargetName="DesignerHead" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame Value="1"/>
<SplineDoubleKeyFrame Value="-1"/>
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>

3: 制定动画的触发方式(事件触发)

<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource LoadHeadStoryboard}"/>
</EventTrigger>

整个xaml代码如下：

<Window.Resources>
<Storyboard x:Key="LoadHeadStoryboard">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:02" RepeatBehavior="Forever" Storyboard.TargetName="DesignerHead" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame Value="1"/>
<SplineDoubleKeyFrame Value="-1"/>
<SplineDoubleKeyFrame Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Storyboard="{StaticResource LoadHeadStoryboard}"/>
</EventTrigger>
</Window.Triggers>
<Grid>
<Grid.Background>
<ImageBrush ImageSource="image/DesignerLoad.png">
</ImageBrush>
</Grid.Background>
<Image x:Name="DesignerHead" RenderTransformOrigin="0.4,0.5" Source="image/DesignerHead.png" Stretch="Fill" Width="73" Height="41" HorizontalAlignment="Left" Margin="12,12,0,0" VerticalAlignment="Top">
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1" />
</TransformGroup>
</Image.RenderTransform>
</Image>
<Label HorizontalAlignment="Left" Margin="21,141,0,0" Name="label1" Width="120" Foreground="White" Height="28" VerticalAlignment="Top">Loading.......</Label>
<ProgressBar Height="16" HorizontalAlignment="Left" Margin="50,167,0,0" Name="progressBar1" VerticalAlignment="Top" Width="185" IsIndeterminate="True" />
</Grid>

该代码为wpf 实现。

silverlight 中需要做稍微的调整。