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

看起来默认情况下 Toolkit 使用 Visual.Opacity 作为 Fade 动画，如果您在 [=50] 中将 Opacity 设置为 0 =] 代码，它不会工作，因为 Visual.Opacity 与 UIElement.Opacity 不同步。

因此您可以删除 Opacity="0" xaml 代码，然后设置 VolumeRing 的 Opacity Visual 到 0 在你的构造函数中，像这样 -

ElementCompositionPreview.GetElementVisual(VolumeRing).Opacity = 0;

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

AnimationSet.UseComposition = false;

更新

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

按照你的称呼方式，我猜你想先等待元素显示，然后再隐藏它。因此，您需要将隐藏和显示方法从 async void 更改为 async Task。

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

UWP community fade animation not changing the opacity at all

c#

xaml

uwp

windows-community-toolkit

windows-composition-api

更新

更新