Xaml 动画不适用于椭圆

我正在尝试制作一个椭圆的动画，它会随着状态的改变而变大。 我似乎无法在宽度和高度上实现过渡

请注意，如果我将

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，但它在设置动画时会提供像素级的效果）

您的动画是从属动画，默认情况下，动画系统不会运行从属动画。要启用动画，需要将动画对象的

EnableDependentAnimation

属性设置为

True

在WinRT中，有两种动画：

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

• 动画的持续时间为0秒（参见警告）
• 动画的目标是ui元素。不透明度
• 动画以这些UIElement属性的子属性值为目标：渲染转换、投影、剪辑
• 动画目标为Canvas.Left或Canvas.Top
• 动画以笔刷值为目标，并使用SolidColorBrush，为其颜色设置动画
• 动画是一个使用关键帧的对象动画

如果您的动画不符合这些标准，则它可能是一个依赖的动画

要使转换正常工作，可以按如下方式更改代码：

<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>

...
...

您肯定应该像以前一样进行渲染转换/缩放动画，至于生成的渲染，我可能认为它与@ChrisW有关。结果与您链接的问题不同。这更像是直接转换为位图图像，然后缩放它，从而产生马赛克效果。