如何在UWP App中为列宽设置动画

Question

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

Answer 1

在XAML框架中,动画大小和布局一直很棘手.为什么？不是因为你不能动画a Width,你可以,但是性能通常很糟糕,因为对Width/ 的更改会Height自动触发布局更新,然后在UI线程上进行大量重新计算,重新测量和重新安排,这会伤害到性能.

但是你总能做一些变通办法.随着的Windows 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);

有很多代码所以我不会在这里发布所有内容.但请随意从此链接中查看.