[英]Fade out play/pause icon on media element - uwp
我想分別在暫停/播放模式下在視頻上顯示“播放/暫停”圖標。 幾秒鍾后,該圖標應消失。 對其應用淡入/淡入淡出動畫的最佳方法是什么?
<MediaElement Name="videoMediaElement" AreTransportControlsEnabled="True" Stretch="Fill" PointerPressed="videoMediaElement_PointerPressed" MediaOpened="videoMediaElement_MediaOpened" CurrentStateChanged="Media_State_Changed" >
<MediaElement.TransportControls>
<MediaTransportControls Background="Red" Foreground="White" IsStopButtonVisible="True" IsStopEnabled="True" IsTextScaleFactorEnabled="True" IsPlaybackRateEnabled="True" IsPlaybackRateButtonVisible="True" IsFastForwardButtonVisible="True" IsFastForwardEnabled="True" IsFastRewindButtonVisible="True" IsFastRewindEnabled="True" />
</MediaElement.TransportControls>
</MediaElement>
<Image x:Name="icon_play" Source="Assets/icon_play.png" Visibility="Collapsed" Opacity="0.5" HorizontalAlignment="Center" Height="100px" Width="100"/>
<Image x:Name="icon_pause" Source="Assets/icon_pause.png" Visibility="Collapsed" Opacity="0.5" HorizontalAlignment="Center" Height="100px" Width="100"/>
private void Media_State_Changed(object sender, RoutedEventArgs args)
{
if (videoMediaElement.CurrentState == MediaElementState.Paused)
{
icon_play.Visibility = Visibility.Visible;
icon_pause.Visibility = Visibility.Collapsed;
}
else if (videoMediaElement.CurrentState == MediaElementState.Playing)
{
icon_pause.Visibility = Visibility.Visible;
icon_play.Visibility = Visibility.Collapsed;
}
}
通過設置AreTransportControlsEnabled="True"
您決定使用內置媒體播放器。 您可以進行一些自定義(例如顏色),但是自定義項非常有限。 如果要構建自己的UI,則需要設置AreTransportControlsEnabled="False"
並使用XAML創建自己的UI。
創建XAML動畫,例如:
<Storyboard x:Name="FadeOut" Target="icon_play" TargetProperty="Opacity">
<DoubleAnimation To="0" Duration="0:0:0.3"/>
</Storyboard>
然后調用FadeOut.Begin();
或創建(我更喜歡)合成動畫:
var compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;
var implicitOpacity = compositor.CreateScalarKeyFrameAnimation();
implicitOpacity.Target = "Opacity";
implicitOpacity.InsertExpressionKeyFrame(1, "This.FinalValue");
implicitOpacity.Duration = TimeSpan.FromMilliseconds(300);
var implicitCollection = compositor.CreateImplicitAnimationCollection();
implicitCollection["Opacity"] = implicitOpacity;
var playVisual = ElementCompositionPreview.GetElementVisual(play_icon);
playVisual.ImplicitAnimations = implicitCollection;
現在,每次您更改視覺的不透明度的值時,都會對其進行動畫處理: playVisual.Opacity = 0;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.