动画无法在椭圆上工作

我正在尝试动画一个将在状态变化时变大的椭圆。我似乎无法得到宽度和高度的过渡。动画无法在椭圆上工作

请注意，如果我将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

动画无法在椭圆上工作

回答

相关问题