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

问题描述

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

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

GIF＃2如果合成动画完成时光标悬停在按钮上，并且鼠标在向上滚动之前退出该按钮，则我认为PointerOver状态会冻结并且0％的不透明度会卡住。解决此问题的唯一方法是再次将鼠标悬停以取消XAML VisualState的干扰。

所有按钮都在同一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,1);
_props.StartAnimation("progress",progressAnimation);

// StackPanel relevant code:

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

解决方法

在上面的代码摘录中，靠近此行的结尾

ExpressionNode carSubtitleObjectOpacityAnimation = 1 - (progressNode * 2);

应该是

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

这将迫使不透明度使用从0到1的线性插值进行更新。为此，我从Win UI samples repo复制了源代码，该代码不使用Lerp（）进行不透明度。我的结论是，Lerp会对系统造成更大的负担，但是当控件具有可视状态时是必需的。示例回购为一个简单的TextBlock（没有视觉状态）设置了动画。

composition uwp winui