c# - UWP 视觉偏移动画不起作用

Question

对于我的应用程序，我希望能够使用 Composition API 为 UIElement 的 Offset 设置动画 此元素是在 Xaml 中预定义的，我发现这些控件的可视层仅在 AFTER 动画已被触发时计算...

此行为导致动画仅在第二次调用时显示

我的 Xaml

<StackPanel x:Name="ActionButtonsPanel" Margin="50,175,0,0" HorizontalAlignment="Left" VerticalAlignment="Top">
    <Button x:Name="CreateNewButton" Tag="&#xE160;" Content="Create New..." Style="{StaticResource IconButtonStyle}" Click="CreateNewButton_Click"/>
    <Button x:Name="OpenFileButton" Tag="&#xE838;" Content="Open File..." Style="{StaticResource IconButtonStyle}" Margin="0,10,0,0" Click="OpenFileButton_Click"/>
</StackPanel>

我的代码

private void ShowNextButtons(UIElement Item1, UIElement Item2) {
    var _compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

    var visual1 = ElementCompositionPreview.GetElementVisual(Item1);
    visual1.CenterPoint = new Vector3(0, (float) Item1.RenderSize.Height / 2F, 0);

    var animationGroup1 = _compositor.CreateAnimationGroup();

    var offset1 = visual1.Offset; //First Time: Offset = <0,0,0>

    var fadeOut = _compositor.CreateScalarKeyFrameAnimation();
    fadeOut.Target = "Opacity";
    fadeOut.Duration = TimeSpan.FromMilliseconds(1000);
    fadeOut.InsertKeyFrame(0, 1);
    fadeOut.InsertKeyFrame(1, 0);
    //animationGroup1.Add(fadeOut); Not included: To be able to click a second time

    var slideOut = _compositor.CreateScalarKeyFrameAnimation();
    slideOut.Target = "Offset.X";
    slideOut.Duration = TimeSpan.FromMilliseconds(1000);
    slideOut.InsertKeyFrame(0, offset1.X);
    slideOut.InsertKeyFrame(1, offset1.X - 20F);
    animationGroup1.Add(slideOut);

    visual1.StartAnimationGroup(animationGroup1);
}

Offset.X 动画仅在第二次调用该方法时可见

Answer 1

您很可能遇到了 Composition 和 XAML 位置属性相互冲突的问题。 http://blog.robmikh.com/uwp/xaml/composition/2016/07/16/changes-to-xaml-composition-interop.html

您最简单的解决方案是将您正在设置动画的任何内容包裹在 Borders 内，并将任何布局属性应用于这些边框(例如边距)，然后您的偏移动画应该现在可以在您正在设置动画的内容上工作(因为 XAML 布局引擎现在没有理由用相对 XAML 位置覆盖动画目标上的 Composition Offset 属性)

或者，如果您的目标是创意者更新，您可以改为为合成翻译属性设置动画。请参阅:http://varunshandilya.com/offset-animation-gets-stomped-here-is-how-to-solve-it-in-uwp-creators-update/