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" 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" VerticalAlignment="Top">
            <Image.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="1" ScaleY="1"  />
                </TransformGroup>
            </Image.RenderTransform>
        </Image>
        <Label HorizontalAlignment="Left" Margin="21,141,0" Name="label1" Width="120" Foreground="White" Height="28" VerticalAlignment="Top">Loading.......</Label>
        <ProgressBar Height="16" HorizontalAlignment="Left" Margin="50,167,0" Name="progressBar1" VerticalAlignment="Top" Width="185" IsIndeterminate="True" />
    </Grid>

 

 

 该代码为wpf 实现。

 silverlight 中需要做稍微的调整。