淡出媒体元素上的播放/暂停图标

我想分别在暂停/播放模式下在视频上显示播放/暂停图标 . 几秒钟后，这些图标就会消失 . 将fadeout / fadein动画应用到它的最佳方法是什么？

<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;
        }
    }

2 回答

0

通过设置 AreTransportControlsEnabled="True" ，您决定使用内置媒体播放器 . 您可以进行一些自定义（如颜色），但这些非常有限 . 如果您想构建自己的UI，则需要设置 AreTransportControlsEnabled="False" 并使用XAML创建自己的UI .

回复于 2024-04-28T01:48:19+08:00

创建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;

现在，每次更改visual 's opacity - it' ll的值时都会被动画化： playVisual.Opacity = 0;

回复于 2024-04-28T01:48:19+08:00

淡出媒体元素上的播放/暂停图标 - uwp

2 回答

相关问题