动画控制旋转答案

【问题标题】：Animating control rotation动画控制旋转
【发布时间】：2012-01-07 16:55:39
【问题描述】：

我定义了一个简单的控件，只是一个红色的正方形，里面有一个黑色的三角形。当用户单击控件时，我想将黑色三角形旋转 180 度。我需要为旋转设置动画。这是控件（和主窗口）的 xaml -

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="WpfApplication1.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Window.Resources>
    <ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}">
        <Grid>
            <Border Background="Red"/>
            <Path Grid.Row="1" x:Name="myPath" Visibility="Visible" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill" 
                Width="80" Height="60" Fill="Black" Opacity="1"
                VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.4">
            </Path>
        </Grid>
    </ControlTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Control HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Template="{DynamicResource ControlControlTemplate1}">
    </Control>
</Grid>

我尝试在控件上设置触发器以在按下控件时进行旋转，但似乎没有 IsPressed 属性（但由于某种原因存在 IsMouseOver 属性）。那么当 IsPressed 属性不可用时如何触发旋转？
如何使它成为动画旋转？

【问题讨论】：

IsPressed 属性适用于更高级别的控件（按钮），您需要将 OnMouseLeftDown/Up 用于网格或边框。你可以在 Expression blend 中做的动画，我会说试着找一本关于 WPF 和 Animation 的书，然后你会很快学会。

标签： c# wpf expression-blend

【解决方案1】：

您需要在路径中添加一个 MouseDown 事件，这是一个将启动 StoryBoard 的事件触发事件。我为您采样并在 Expression Blend 中创建了请求的旋转。要更改，您可以更改情节提要中的旋转度 - “OnMouseDown1”

 <Window.Resources>
    <ControlTemplate x:Key="ControlControlTemplate1" TargetType="{x:Type Control}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="OnMouseDown1">
                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="myPath">
                    <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/>
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
        <Grid>
            <Border Background="Red"/>
            <Path Grid.Row="1" x:Name="myPath" Visibility="Visible" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"  
            Width="80" Height="60" Fill="Black" Opacity="1" 
            VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.4">
                <Path.RenderTransform>
                    <TransformGroup>
                        <ScaleTransform/>
                        <SkewTransform/>
                        <RotateTransform/>
                        <TranslateTransform/>
                    </TransformGroup>
                </Path.RenderTransform>
            </Path>
        </Grid>
        <ControlTemplate.Triggers>
            <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="myPath">
                <BeginStoryboard Storyboard="{StaticResource OnMouseDown1}"/>
            </EventTrigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Storyboard x:Key="OnMouseDown1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)" Storyboard.TargetName="control">
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="180"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>

<Grid x:Name="LayoutRoot">
    <Control x:Name="control" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Template="{DynamicResource ControlControlTemplate1}" RenderTransformOrigin="0.5,0.5">
        <Control.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Control.RenderTransform>
    </Control>
</Grid>

【讨论】：

【解决方案2】：

您可以使用EventTrigger 并收听MouseLeftButtonDown 事件...

至于旋转，你要旋转的 Path 需要如下所示：

<Path ...>
    <Path.RenderTransform>
        <RotateTransform />
    </Path.RenderTransform>
</Path>

动画本身看起来像这样（持续时间为半秒）：

<DoubleAnimation BeginTime="0"
                 Duration="0:0:0.5"
                 To="180"
                 Storyboard.TargetName="nameOfThePath"
                 Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)" />

但是，正如 Hothreeyn 已经指出的那样，使用 Blend 绝对更容易。

【讨论】：

【解决方案3】：

我建议您通过 Microsoft Expression Blend 版本 3 或 4 创建动画；在这种情况下（即动画），用 xaml 编写代码非常困难。

祝你好运。

【讨论】：