UWP 社区淡入淡出动画根本不会改变不透明度

Question

await VolumeRing.Fade(value: 1f, duration: 20, delay: 0).StartAsync();

我的问题很简单。我正在使用 UWP 社区工具包对 xaml 元素的淡入淡出动画进行动画处理，但我什至检查了断点;上面的代码确实将其不透明度从 0 提高到 1，而不是不透明度保持在 0(这是我为元素设置的默认值)。

更新

public CompactNowPlayingPage()
{
InitializeComponent();
ElementCompositionPreview.GetElementVisual(VolumeRing).Opacity = 0;           
}
private async void VolumeFadeIn()
{
await VolumeRing.Fade(value: 1f, duration: 20, delay: 0).StartAsync();
}
private async void VolumeFadeOut()
{
await VolumeRing.Fade(value: 0f, duration: 1500, delay: 3000).StartAsync();
}
//invoked by KeyboardShortCuts
private void ChangeVolume(bool increase)
{
if (IsControlPressed)
{
VolumeFadeIn();
if (increase&&Media.Volume<100)
Media.Volume += 5;
else if(!increase&&Media.Volume>0)
Media.Volume -= 5;
VolumeRing.Value = Media.Volume;
VolumeFadeOut();
}
}

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<vlc:MediaElement AreTransportControlsEnabled="True"
Name="Media"                     
HardwareAcceleration="True"
AutoPlay="True">
</vlc:MediaElement>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,32,0,0">
<notification:SfProgressBar Name="VolumeRing"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="0,16,48,0"
FontSize="24"
Width="Auto"
Value="{x:Bind Media.Volume, Mode=OneWay}"
Height="Auto"
FillColor="{ThemeResource SystemAccentColor}"
BackRimStrokeThickness="12"
StrokeThickness="12"
ProgressType="SolidCircular"
>
<notification:SfProgressBar.Foreground>
<SolidColorBrush Color="WhiteSmoke" Opacity="0.7"/>
</notification:SfProgressBar.Foreground>
</notification:SfProgressBar>
</Grid>
</Grid>

Answer 1

看起来默认情况下，工具包正在使用Fade动画的Visual.Opacity，如果您将Opacity设置为在 xaml 代码中0，它将无法工作，因为Visual.Opacity与UIElement.Opacity不同步。

因此，您可以删除Opacity="0"xaml 代码，然后将VolumeRing的VisualOpacity设置为在构造函数中0，如下所示 -

ElementCompositionPreview.GetElementVisual(VolumeRing).Opacity = 0;

或者，保留xaml 代码Opacity="0"，但在调用Fade方法之前将AnimationSet.UseComposition设置为false-

AnimationSet.UseComposition = false;

更新

好的，只是看了一下源代码，我错了，工具包默认不使用组合 API。有点令人惊讶，但无论如何...应删除构造函数中的Visual.Opacity设置，并在 xaml 代码中放回Opacity设置。

顺便说一下，你调用它们，我想你想等待元素先显示，然后隐藏它。因此，您需要将隐藏和显示方法从async void更改为async Task.