UWP视觉偏移动画不起作用

Question

对于我的应用程序,我希望能够使用Composition API为UIElement的Offset设置动画这个元素是在Xaml中预定义的,我发现这些控件的Visual层只能在触发动画后计算...

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

我的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/