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

Question

我认为 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);

Answer 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（没有视觉状态）设置动画。

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

How can I prevent XAML VisualStates from interfering with Windows UI Composition animation?

composition

uwp

winui