动画控制旋转

我定义了一个简单的控件，只是一个红色的正方形，里面有一个黑色的三角形。当用户单击控件时，我想将黑色三角形旋转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属性不可用时，我如何触发旋转？
我怎样才能使这个动画旋转？

来源

2012-01-07 Jim_CS

IsPressed属性适用于需要使用OnMouseLeftDown /弥补电网或边境更高控件（按钮）。你可以在Expression Blend中做的动画，我会说试图找到一本关于WPF和动画的书，然后你会很快学会它。 – BigL 2012-01-07 17:09:31

您需要将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>

来源

2012-01-07 18:03:01 rfresia

非常好，欢呼声。 – 2012-01-07 18:58:51

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

祝你好运。

来源

2012-01-07 17:09:28 Hothreeyn

你可以使用一个EventTrigger，并听取了MouseLeftButtonDown事件......

至于旋转，要旋转需要像这样的路径：

<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已经指出的那样，用掺和这肯定是EA丝儿。

来源

2012-01-07 17:14:51 Nuffin

动画控制旋转

回答

相关问题