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

Question

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

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

如果在合成动画完成时光标悬停在按钮上，并且鼠标在向上滚动之前退出按钮，我认为PointerOver状态会冻结，0%的不透明度会卡住。解决这个问题的唯一方法是再次悬停以解开XAML VisualStates。

​

​

这些按钮都在同一StackPanel中，该are是不透明度动画的目标。当一个按钮出现这个问题时，整个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对系统的负担更大，但当控件具有可视状态时，它是必要的。示例存储库为一个简单的TextBlock (没有可视状态)设置动画。