silverlight / wpf 旋转动画的实现

最新推荐文章于 2022-07-11 08:45:57 发布

Gjack

最新推荐文章于 2022-07-11 08:45:57 发布

阅读量4.9k

点赞数

分类专栏： silverlight 文章标签： silverlight wpf image

本文链接：https://blog.csdn.net/Gjack/article/details/5670561

版权

silverlight 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

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

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

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

整个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>