如何防止 XAML VisualStates 干扰 Windows UI 合成动画？答案

【问题标题】：How can I prevent XAML VisualStates from interfering with Windows UI Composition animation?如何防止 XAML VisualStates 干扰 Windows UI 合成动画？
【发布时间】：2020-09-20 08:51:28
【问题描述】：

我认为 Windows.UI.Composition 工具与按钮上的 XAML VisualStates 冲突。

GIF #1 当按钮处于正常状态时，没有光标悬停，动画会起作用，按钮在向下滚动时成功消失，然后在向上滚动时成功重新出现。

GIF #2 如果在合成动画完成时光标悬停在按钮上，并且鼠标在向上滚动之前退出按钮，我相信 PointerOver 状态会被冻结并且 0% 的不透明度会卡住。修复它的唯一方法是再次悬停以解除 XAML VisualStates 的阻塞。

按钮都在同一个 StackPanel 中，这是不透明动画的目标。当一个按钮出现这个问题时，整个 StackPanel 会卡在 0% 的不透明度。下面的代码是一般要点，为简洁起见省略了一些部分。我不认为这是代码问题，我认为这是平台限制，我正在寻找解决方法。

CompositionPropertySet _scrollerPropertySet = 
ElementCompositionPreview.GetScrollViewerManipulationPropertySet((ScrollViewer)sender);
Compositor _compositor = _scrollerPropertySet.Compositor;
CompositionPropertySet _props = _compositor.CreatePropertySet();
_props.InsertScalar("progress", 0);
var scrollingProperties = 
_scrollerPropertySet.GetSpecializedReference<ManipulationPropertySetReferenceNode>();
var props = _props.GetReference();
var progressNode = props.GetScalarProperty("progress");
ExpressionNode progressAnimation = EF.Clamp(-scrollingProperties.Translation.Y / clampSizeNode, 0, 1);
_props.StartAnimation("progress", progressAnimation);

// StackPanel relevant code:

Visual carOperationButtonStackPanelVisual= 
ElementCompositionPreview.GetElementVisual(CarOperationStackPanel);
ExpressionNode carSubtitleObjectOpacityAnimation = 1 - (progressNode * 2);
carOperationButtonStackPanelVisual.StartAnimation("Opacity", carSubtitleObjectOpacityAnimation);

【问题讨论】：

标签： uwp composition winui

【解决方案1】：

在上面的代码摘录中，接近尾声的这一行

ExpressionNode carSubtitleObjectOpacityAnimation = 1 - (progressNode * 2);

应该是

ExpressionNode carSubtitleObjectOpacityAnimation = ExpressionFunctions.Lerp(0, 1, 1 - (progressNode * 2));

这将强制不透明度通过从 0 到 1 的线性插值进行更新。对于它的价值，我从 Win UI samples repo 复制了源代码，它不使用 Lerp() 来实现不透明度。我的结论是 Lerp 对系统的负担更大，但当控件具有视觉状态时是必要的。示例 repo 对一个简单的 TextBlock（没有视觉状态）进行了动画处理。

【讨论】：