「通過」的RenderTransform屬性的角度上忽略圖像

我已經諮詢了旋轉使用WPF的聲明XAML格式的圖像數量的來源，即這種非常穩固的博客文章，Rotate an Image in WPF Using Just XAML和SO問題：wpf rotate image around center。「通過」的RenderTransform屬性的角度上忽略圖像

其結果是，我的XAML - 這是旋轉圖像 - 看起來像這樣：

<UserControl.Resources> 
     <Style x:Key="Spinner" TargetType="Image"> 
      <Setter Property="Image.RenderTransform"> 
       <Setter.Value> 
        <RotateTransform CenterX="13" CenterY="13" /> 
       </Setter.Value> 
      </Setter> 
      <Style.Triggers> 
       <Trigger Property="IsEnabled" Value="True"> 
        <Trigger.EnterActions> 
         <BeginStoryboard> 
          <Storyboard> 
           <DoubleAnimation 
             Storyboard.TargetProperty="RenderTransform.Angle" 
             By="90" 
             To="360" 
             Duration="0:0:4" 
             RepeatBehavior="Forever" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </Trigger.EnterActions> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </UserControl.Resources>

我遇到的問題是，所述旋轉顯示流體和連續的，而不是由90度。由By屬性指定。我試圖將圖像的特定部分旋轉到每個動畫的特定象限。

答案，https://stackoverflow.com/a/23699219/3469725，接近我所需要的;然而，圖像旋轉一次，並沒有連續動畫。

這是可能與WPF和是By財產正確的財產使用？

來源

2015-11-06 Thomas

我以完全「錯誤」的方式接近這個。這是我的解決方案，不是使用DoubleAnimation XAML屬性，而是DoubleAnimationUsingKeyFrames - 一種完全不同的方法。對於我想要做的 - 旋轉90度。間隔 - 這是一個簡單的解決方案，不需要使用緩動，並提供更多的「捕捉」效果。

<Style.Triggers> 
    <Trigger Property="IsEnabled" Value="True"> 
     <Trigger.EnterActions> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetProperty="RenderTransform.Angle" 
            Duration="0:0:4" 
            RepeatBehavior="Forever"> 
         <DoubleKeyFrameCollection> 
          <DiscreteDoubleKeyFrame KeyTime="0:0:1" Value="90"/> 
          <DiscreteDoubleKeyFrame KeyTime="0:0:2" Value="180"/> 
          <DiscreteDoubleKeyFrame KeyTime="0:0:3" Value="270"/> 
          <DiscreteDoubleKeyFrame KeyTime="0:0:4" Value="360"/> 
         </DoubleKeyFrameCollection> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
      </BeginStoryboard> 
     </Trigger.EnterActions> 
    </Trigger> 
</Style.Triggers>

來源

2015-11-06 15:22:08 Thomas

沒有To + By組合（至少對於DoubleAnimation）。

這是不是很清楚你的期望。您有初始值（例如0），並且您設置了Duration和To，這足以計算動畫將如何更改角度值。 By是無意義的無視您將設置的價值。

如果你需要某種步驟，那麼你有一系列快速的動畫做到這一點：旋轉90°，等待（或使用緩動函數），另一個旋轉90°等

<Storyboard RepeatBehavior="Forever" > 
    <DoubleAnimation To="90" Duration="0:0:1" ... > 
     <DoubleAnimation.EasingFunction> 
      <BounceEase Bounces="2" EasingMode="EaseOut" Bounciness="1.8" /> 
     </DoubleAnimation.EasingFunction> 
    </DoubleAnimation> 
    ... more animations to rotate for 360 degrees if steps need different animation 
    ... otherwise use `By` (without `To`) and repeat above animation it indefinitely 
</Storyboard>

查看更多關於easing functions。只是嘗試一些，直到你瞭解他們如何工作，並找到最適合你的動畫。

來源

2015-11-06 14:35:24 Sinatr

你能演示緩動功能嗎？我正在尋找如何下一步，是的。 – Thomas

這很簡單，請參閱編輯。我喜歡自己'ElasticEase'（類似彈簧的效果）。 – Sinatr

不只是設置「By」將動畫重置爲動畫後的原始位置？ – Thomas

「通過」的RenderTransform屬性的角度上忽略圖像

回答

相關問題