c# - 如何在 UWP App 中设置列​​宽动画

Question

在我的 UWP 应用程序中，我有一个包含 2 列的网格。该应用程序是自适应的，在移动设备上我只想一次显示一列。有没有办法使用动画来减少第 1 列的宽度并扩大第 2 列的宽度，反之亦然？

Answer 1

动画大小和布局在 XAML 框架中一直很棘手。为什么？不是因为您不能为 Width 设置动画，您可以，但是性能通常很糟糕，因为 Width/Height 的更改会自动触发布局更新然后在 UI 线程上进行大量重新计算、重新测量和重新安排会影响性能的事情。

但总有一些变通办法可以解决。借助 Windows Composition API，在保持每秒 60 帧刷新率的同时为布局更改设置动画变得更加容易，这一切都归功于新的 API，例如 ImplicitAnimations , SetImplicitHideAnimation & SetImplicitShowAnimation .

ImplicitAnimations 基本上允许您监视属性更改，如 Opacity、Offset、Size 等，以及它们何时发生更新后，旧值将平滑地动画到新值；其中 SetImplicitHideAnimation 和 SetImplicitShowAnimation 将在元素的 Visibility 更改时简单地设置动画。因此，一个元素可以缩小并淡出，而不是立即消失。

请注意，您需要为 API 提供所需的动画才能知道如何制作动画。为了让您的生活更轻松一些，我创建了一些辅助方法(请参阅底部的链接)来封装您通常需要的一些关键动画。

要准确了解它们的作用，请查看下面的 gif

我在不同的自适应视觉状态中重新定位、隐藏和显示元素，没有用 XAML 编写动画，但使用以下代码，Composition API 简单负责隐式地为所有这些变化设置动画。

var compositor = this.Visual().Compositor;

// Create background visuals.
var leftBackgroundVisual = compositor.CreateSpriteVisual();
leftBackgroundVisual.Brush = compositor.CreateColorBrush(Colors.Crimson);
LeftGridBackgroundVisualWrapper.SetChildVisual(leftBackgroundVisual);

var middleBackgroundVisual = compositor.CreateSpriteVisual();
middleBackgroundVisual.Brush = compositor.CreateColorBrush(Colors.Gold);
MiddleGridBackgroundVisualWrapper.SetChildVisual(middleBackgroundVisual);

var rightBackgroundVisual = compositor.CreateSpriteVisual();
rightBackgroundVisual.Brush = compositor.CreateColorBrush(Colors.DarkOrchid);
RightGridBackgroundVisualWrapper.SetChildVisual(rightBackgroundVisual);

// Sync background visual dimensions.
LeftGridBackgroundVisualWrapper.SizeChanged += (s, e) => leftBackgroundVisual.Size = e.NewSize.ToVector2();
MiddleGridBackgroundVisualWrapper.SizeChanged += (s, e) => middleBackgroundVisual.Size = e.NewSize.ToVector2();
RightGridBackgroundVisualWrapper.SizeChanged += (s, e) => rightBackgroundVisual.Size = e.NewSize.ToVector2();

// Enable implilcit Offset and Size animations.
LeftText.EnableImplicitAnimation(VisualPropertyType.Offset, 400);
MiddleText.EnableImplicitAnimation(VisualPropertyType.Offset, 400);
RightText.EnableImplicitAnimation(VisualPropertyType.Offset, 400);
LeftGrid.EnableImplicitAnimation(VisualPropertyType.Offset, 400);
MiddleGrid.EnableImplicitAnimation(VisualPropertyType.Offset, 400);
RightGrid.EnableImplicitAnimation(VisualPropertyType.Offset, 400);
leftBackgroundVisual.EnableImplicitAnimation(VisualPropertyType.Size, 400);
middleBackgroundVisual.EnableImplicitAnimation(VisualPropertyType.Size, 400);
rightBackgroundVisual.EnableImplicitAnimation(VisualPropertyType.Size, 400);

// Enable implicit Visible/Collapsed animations.
LeftGrid.EnableFluidVisibilityAnimation(showFromScale: 0.6f, hideToScale: 0.8f, showDuration: 400, hideDuration: 250);
MiddleGrid.EnableFluidVisibilityAnimation(showFromScale: 0.6f, hideToScale: 0.8f, showDelay: 200, showDuration: 400, hideDuration: 250);
RightGrid.EnableFluidVisibilityAnimation(showFromScale: 0.6f, hideToScale: 0.8f, showDelay: 400, showDuration: 400, hideDuration: 250);

代码很多，所以我不会在这里发布所有内容。但请随时从 this link 查看.