動畫控制旋轉

我定義了一個簡單的控件，只是一個紅色的正方形，裏面有一個黑色的三角形。當用戶單擊控件時，我想將黑色三角形旋轉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

動畫控制旋轉

回答

相關問題