动画不适用于椭圆答案

【问题标题】：Animation not work on Ellipse动画不适用于椭圆
【发布时间】：2016-02-22 18:48:04
【问题描述】：

我正在尝试为椭圆设置动画，该椭圆会随着状态变化而变大。我似乎无法在宽度和高度上进行过渡。

请注意，如果我将 TargetProperty 更改为 (FrameworkElement.RenderTransform).(CompositeTransform.TranslateX)，则会应用转换。

这是我使用的 ControlTemplate：

<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，但它在制作动画时会给出像素级结果）

【问题讨论】：

你绝对应该像你一样做渲染转换/缩放动画，至于生成的渲染我可能会认为它与this type of issue
@ChrisW。结果与您链接的问题不同。它更像是直接转换为位图图像，然后将其缩放以产生马赛克效果。

标签： xaml storyboard uwp visualstatemanager

【解决方案1】：

您的动画是依赖动画，默认情况下，动画系统不会运行依赖动画。要启用动画，您需要将动画对象的EnableDependentAnimation 属性设置为True。

在 WinRT 中，有两种动画：Dependent and independent animations。

如果动画具有以下任何特征，则它是独立的：

动画的持续时间为 0 秒（请参阅注意事项）

动画目标UIElement.Opacity

动画针对以下 UIElement 属性的子属性值：RenderTransform、Projection、Clip

动画以 Canvas.Left 或 Canvas.Top 为目标

动画以 Brush 值为目标并使用 SolidColorBrush，为其 Color 设置动画

动画是一个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>

【讨论】：