UWP 社区淡入淡出动画根本不改变不透明度
UWP community fade animation not changing the opacity at all
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>
看起来默认情况下 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
。
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>
看起来默认情况下 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
。