UWP 视觉偏移动画不起作用答案

【问题标题】：UWP Visual offset animation not workingUWP 视觉偏移动画不起作用
【发布时间】：2017-12-14 00:44:42
【问题描述】：

对于我的应用，我希望能够使用 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 动画仅在第二次调用该方法时可见

【问题讨论】：

您需要展示您的代码的完整示例。我们不知道您正在为哪个元素设置动画，以及触发动画的原因。
我正在为 Stackpanel 制作动画，对此感到抱歉:)
尝试删除StackPanel 上的边距，看看是否可行。

标签： c# uwp composition

【解决方案1】：

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

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

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

【讨论】：

我通过在项目属性中更改项目，将项目更改为仅创意者更新。我无法使用您上一个链接中的解决方案......我错过了什么？
NVM，找到它：链接说：EnableTranslation，应该是SetIsTranslationEnabled
Aaand 第二个链接坏了。
链接已损坏，但以下解决方案对我有用：ElementCompositionPreview::SetIsTranslationEnabled(YourElement, true);YourElementVisual->StartAnimation("Translation", YourExpression);