動畫無法在橢圓上工作

我正在嘗試動畫一個將在狀態變化時變大的橢圓。我似乎無法得到寬度和高度的過渡。動畫無法在橢圓上工作

請注意，如果我將TargetProperty更改爲(FrameworkElement.RenderTransform).(CompositeTransform.TranslateX)，則應用轉換。

這是我使用的控件模板：

<Border> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="ControlStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition x:Name="ClosedToOpened" 
             From="Closed" To="Opened" 
             GeneratedDuration="0:0:0.5"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Bubble"> 
          <EasingDoubleKeyFrame KeyTime="0:0:0" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" /> 
          <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" /> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="Bubble"> 
          <EasingDoubleKeyFrame KeyTime="0:0:0" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" /> 
          <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" /> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition x:Name="OpenedToClosed" 
             From="Opened" To="Closed" 
             GeneratedDuration="0:0:0.5"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Bubble"> 
          <EasingDoubleKeyFrame KeyTime="0:0:0" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" /> 
          <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" /> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Height" Storyboard.TargetName="Bubble"> 
          <EasingDoubleKeyFrame KeyTime="0:0:0" Value="50" EasingFunction="{StaticResource EaseOutQuintic}" /> 
          <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="10" EasingFunction="{StaticResource EaseOutQuintic}" /> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      <VisualStateGroup.States> 
       <VisualState x:Name="Opened"> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width" Duration="0" To="50" /> 
         <DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height" Duration="0" To="50" /> 
        </Storyboard> 
       </VisualState> 
       <VisualState x:Name="Closed"> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width" Duration="0" To="10" /> 
         <DoubleAnimation Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height" Duration="0" To="10" /> 
        </Storyboard> 
       </VisualState> 
      </VisualStateGroup.States> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Ellipse x:Name="Bubble" Width="10" Height="10" Fill="Black" /> 
</Border>

我如何過渡工作？

（我試過的ScaleX/Y，但動畫時，它提供一個像素Ly的結果）

來源

2015-11-20 user1510539

你絕對應該做的RenderTransform /縮放動畫像你這樣的人，因爲所得到的渲染我可能會認爲這將是涉及[此類問題]（http://graphicdesign.stackexchange.com/questions/54770/why-would-i-get-aliasing-on-a-vector-like-this） –

@ChrisW。結果不像你連接的問題。它更像是直接轉換爲位圖圖像，然後縮放它以產生馬賽克效果。 – user1510539

你的動畫是一個依賴動畫，默認情況下，動畫系統將無法運行依賴動畫。要啓用動畫，您需要將動畫對象的EnableDependentAnimation屬性設置爲True。

在WinRT中，有兩種動畫：Dependent and independent animations。

動畫是獨立如果有任何的這些特徵：

動畫的持續時間爲0秒（見注意）

動畫目標UIElement.Opacity

動畫定位這些UIElement屬性的子屬性值：RenderTransfor米，投影，剪輯

動畫目標Canvas.Left或Canvas.Top

動畫靶向刷值，並使用一個的SolidColorBrush，動畫其顏色

動畫是ObjectAnimationUsingKeyFrames

如果您的動畫不符合這些標準，則可能是從屬動畫。

爲了讓您的轉換工作，你可以改變你的代碼像下面：

<Border> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup x:Name="ControlStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition x:Name="ClosedToOpened" 
            From="Closed" 
            GeneratedDuration="0:0:0.5" 
            To="Opened"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width"> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="10" /> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="50" /> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height"> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="10" /> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="50" /> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
       <VisualTransition x:Name="OpenedToClosed" 
            From="Opened" 
            GeneratedDuration="0:0:0.5" 
            To="Closed"> 
        <Storyboard> 
         <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Width"> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="50" /> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="10" /> 
         </DoubleAnimationUsingKeyFrames> 
         <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetName="Bubble" Storyboard.TargetProperty="Height"> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0" Value="50" /> 
          <EasingDoubleKeyFrame EasingFunction="{StaticResource EaseOutQuintic}" KeyTime="0:0:0.5" Value="10" /> 
         </DoubleAnimationUsingKeyFrames> 
        </Storyboard> 
       </VisualTransition> 
      </VisualStateGroup.Transitions> 
      ... 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    ... 
</Border>

來源

2015-11-23 08:15:00

感謝您的信息。有用！ :) – user1510539

動畫無法在橢圓上工作

回答

相關問題