动画在Ellipse上不起作用

用户

我正在尝试制作一个椭圆，该椭圆将随着State Change而变大。我似乎无法在Width和Height上进行过渡。

请注意，如果将更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秒（请参阅警告）

动画的目标是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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。