C# 如何在ScaleTransform动画后重置控件_C#_Animation_Uwp_Storyboard_Windows 10 Universal

C# 如何在ScaleTransform动画后重置控件

c# animation uwp

C# 如何在ScaleTransform动画后重置控件,c#,animation,uwp,storyboard,windows-10-universal,C#,Animation,Uwp,Storyboard,Windows 10 Universal,我正在一个针对PC的Windows 10通用应用程序上工作。我想重复运行动画（不是在“RepeatBehavior”循环中，而是在发生其他事情后再次运行），但我正在努力在动画完成后重置动画控件故事板中的动画之一是TranslateTransform。完成后，我可以在代码中使用Canvas.SetLeft和Canvas.SetTop重新定位控件。但是，在使用ScaleTransform动画“消失”控件后，该控件仍然不可见，并且无法使其再次可见。更改控件的高度和宽度没有任何作用在XAML中使用A

我正在一个针对PC的Windows 10通用应用程序上工作。我想重复运行动画（不是在“RepeatBehavior”循环中，而是在发生其他事情后再次运行），但我正在努力在动画完成后重置动画控件

故事板中的动画之一是TranslateTransform。完成后，我可以在代码中使用Canvas.SetLeft和Canvas.SetTop重新定位控件。但是，在使用ScaleTransform动画“消失”控件后，该控件仍然不可见，并且无法使其再次可见。更改控件的高度和宽度没有任何作用

在XAML中使用AutoReverse确实解决了这个问题，但我不希望用户看到这个问题。控件应该“消失”。我想在下一次运行之前，在幕后以代码重置控件

我正在制作动画的情节提要和边框控件如下所示。这在第一次使用时效果很好。图像在屏幕上旋转，然后消失。第二次图像不可见，直到缩放变换再次运行

我尝试在第一个关键帧之前添加另一个ScaleTransform动画，以快速从0缩放到1（我尝试了“0”或“0.1”的持续时间），但由于某种原因，这破坏了整个过程

我想知道RenderTransferMorigin是否与此有关，但我不确定如何将其用于TransformGroup。因此，将其设置为（0.5,0.5）以使旋转居中

任何帮助都将不胜感激

 <Storyboard x:Name="myStoryboard">
        <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="myImage"
                        Storyboard.TargetProperty="(Canvas.Top)"
                        EnableDependentAnimation="False">
                        <SplineDoubleKeyFrame x:Name="MyTopSpline"   KeyTime="0:0:1.9"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="myImage"
                        Storyboard.TargetProperty="(Canvas.Left)"
                        EnableDependentAnimation="False"">
                        <SplineDoubleKeyFrame x:Name="MyLeftSpline" KeyTime="0:0:1.9"/>
                    </DoubleAnimationUsingKeyFrames>

                    <DoubleAnimation Storyboard.TargetName="myImage" 
                             Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" 
                             From="0" To="360" BeginTime="0:0:1.0" Duration="0:0:1.9" />

                    <DoubleAnimation Storyboard.TargetName="myImage"
                                      Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleX)" 
                             From="1" To="0" BeginTime="0:0:1.9" Duration="0:0:0.9" />
                    <DoubleAnimation Storyboard.TargetName="myImage"
                                      Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[1].(ScaleTransform.ScaleY)" 
                             From="1" To="0" BeginTime="0:0:1.9" Duration="0:0:0.9"  />


</Storyboard>

  <Border Name="myImage"  Height="244" Width="244" Canvas.Left="200" Canvas.Top="100" Visibility="Collapsed" 
RenderTransformOrigin=".5,.5">
        <Border.RenderTransform>
            <TransformGroup>
                    <RotateTransform Angle="0" />
                    <ScaleTransform ScaleX="1" ScaleY="1" />
                </TransformGroup>
         </Border.RenderTransform>
</Border>


首先，让我们稍微整理一下代码。您不应该使用TransformGroup
，而应该使用名为CompositeTransform
的复合变换对象，因为它更易于使用。别忘了给它命名
<Border.RenderTransform>
    <CompositeTransform x:Name="myImageTransform" />
</Border.RenderTransform>

在这个处理程序中，您需要做的就是重置所有变换属性和画布偏移
private void myStoryboard_Completed(object sender, object e)
{
    myImage.Visibility = Visibility.Collapsed;

    Canvas.SetTop(myImage, 100);
    Canvas.SetLeft(myImage, 200);

    myImageTransform.Rotation = 0;
    myImageTransform.ScaleX = myImageTransform.ScaleY = 1;
}

但这里有一个更好的方法。
与其在代码隐藏中做一些事情，为什么不将所有逻辑封装在同一个故事板中呢？您只需使用DoubleAnimationUsingKeyFrames
为每个动画定义开始值和结束值
<Storyboard x:Name="myStoryboard">
    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myImage"
                                   Storyboard.TargetProperty="(Canvas.Top)">
        <SplineDoubleKeyFrame KeyTime="0:0:0" Value="100" />
        <SplineDoubleKeyFrame x:Name="MyTopSpline" KeyTime="0:0:1.9" Value="100" />
    </DoubleAnimationUsingKeyFrames>

    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="myImage"
                                   Storyboard.TargetProperty="(Canvas.Left)">
        <SplineDoubleKeyFrame KeyTime="0:0:0" Value="200" />
        <SplineDoubleKeyFrame x:Name="MyLeftSpline" KeyTime="0:0:1.9" Value="200" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)"
                                   Storyboard.TargetName="myImage">
        <EasingDoubleKeyFrame KeyTime="0" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.9" Value="360" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleX)"
                                   Storyboard.TargetName="myImage">
        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="0" />
    </DoubleAnimationUsingKeyFrames>
    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.ScaleY)"
                                   Storyboard.TargetName="myImage">
        <EasingDoubleKeyFrame KeyTime="0" Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:1.9" Value="1" />
        <EasingDoubleKeyFrame KeyTime="0:0:2.8" Value="0" />
    </DoubleAnimationUsingKeyFrames>
    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
                                   Storyboard.TargetName="myImage">
        <DiscreteObjectKeyFrame KeyTime="0">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Visible</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
        <DiscreteObjectKeyFrame KeyTime="0:0:3">
            <DiscreteObjectKeyFrame.Value>
                <Visibility>Collapsed</Visibility>
            </DiscreteObjectKeyFrame.Value>
        </DiscreteObjectKeyFrame>
    </ObjectAnimationUsingKeyFrames>
</Storyboard>


看得见的
崩溃

希望这有帮助
 将这行代码添加到情节提要已完成事件解决了问题：
MyStoryboard.Stop();

谢谢你。CompositeTransform肯定比TransformGroup更容易使用，但不幸的是，它没有解决问题。直到下一次运行“缩放变换”（completed事件中的代码未运行）时，图像才可见。似乎仅仅更改ScaleX和ScaleY值实际上并没有重置控件。此外，我不能在XAML中完成所有工作，因为很多值都是在运行时计算的。我想我需要强制对象重新缩放到X=Y=1，但不知道如何…我希望看到这个问题的现场演示，因为上面的代码在我的项目中确实有效。顺便问一下，您是否在回调中将可见性
设置回可见
？实际上，有一种简单的方法可以调试您的问题。你以前试过活的视觉树吗？您可以在那里检查myImage，然后在Live Property Explorer中找到所有转换、可见性、画布左值，并直接在那里修改它们，然后您应该能够确定哪一个计算错误。当缩放转换运行时，这不是控件显示的可见性。一旦我将其缩放为零，直到下一次缩放变换才会恢复。今晚我将尝试使用可视化树进行故障排除……顺便说一句，如果我在缩放变换中使用AutoRestore，它将修复问题。我只是不想让用户看到…我感觉你的代码中有其他错误。不得不这样称呼是没有任何意义的。这现在被作为一个bug提出来给MS：太棒了！我会留意的。
MyStoryboard.Stop();