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 position 属性相互冲突的问题。 http://blog.robmikh.com/uwp/xaml/composition/2016/07/16/changes-to-xaml-composition-interop.html

你最简单的解决方案是将你正在制作的任何动画包裹在边框内，并将任何布局属性应用于这些边框（如边距），然后你的偏移动画应该现在可以工作了你正在制作动画（因为 XAML 布局引擎现在应该没有理由用相对 XAML 位置覆盖动画目标上的合成偏移属性）

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

UWP 视觉偏移动画不起作用

UWP Visual offset animation not working

c#

composition

uwp