WPF開發者QQ群：?340500857?

前言

WPF使用Animation仿WeChat（微信）播放語音消息？

效果圖：

創建MyAnimationForever.cs如下：

public class MyAnimationForever : Control{private static Storyboard MyStory;private ObjectAnimationUsingKeyFrames MyAnimation;private UIElement animation;public static readonly DependencyProperty DurationProperty =DependencyProperty.Register("Duration", typeof(TimeSpan),typeof(MyAnimationForever), new PropertyMetadata(null));/// <summary>/// 動畫時間/// </summary>public TimeSpan Duration{get { return (TimeSpan)GetValue(DurationProperty); }set { SetValue(DurationProperty, value); }}public static readonly DependencyProperty IsLitProperty =DependencyProperty.Register("IsLit", typeof(bool),typeof(MyAnimationForever), new PropertyMetadata(false, new PropertyChangedCallback(OnIsLitChanged)));/// <summary>/// 是否開始播放/// </summary>public bool IsLit{get { return (bool)GetValue(IsLitProperty); }set { SetValue(IsLitProperty, value); }}public override void OnApplyTemplate(){base.OnApplyTemplate();animation = Template.FindName("animation", this) as UIElement;if (animation != null && IsLit)Animate(animation);}private static void OnIsLitChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){bool newValue = (bool)e.NewValue;if (newValue){MyAnimationForever c = d as MyAnimationForever;if (c != null && c.animation != null){c.Animate(c.animation);}}else{MyStory.Stop();}}private void Animate(UIElement animation){Storyboard.SetTarget(MyAnimation, animation);Storyboard.SetTargetProperty(MyAnimation, new PropertyPath(Image.SourceProperty));MyStory.Children.Add(MyAnimation);//將動畫添加到動畫板中Console.WriteLine($"一共添加：{MyAnimation.KeyFrames.Count} 個 DiscreteObjectKeyFrame。");MyStory.Begin();}public MyAnimationForever(){MyStory = new Storyboard();MyAnimation = new ObjectAnimationUsingKeyFrames();MyAnimation.FillBehavior = FillBehavior.Stop;MyAnimation.RepeatBehavior = RepeatBehavior.Forever;MyStory.CurrentTimeInvalidated += (s, e) => {Clock storyboardClock = (Clock)s;Console.WriteLine(storyboardClock.CurrentTime.ToString());if (storyboardClock.CurrentTime >= Duration){IsLit = false;}};MyAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame() {Value = new BitmapImage(new Uri("pack://application:,,,/Images/0.png")), KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.33))});MyAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame(){Value = new BitmapImage(new Uri("pack://application:,,,/Images/1.png")),KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.66))});MyAnimation.KeyFrames.Add(new DiscreteObjectKeyFrame(){Value = new BitmapImage(new Uri("pack://application:,,,/Images/2.png")),KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromSeconds(0.99))});}}

創建MainWindow.xaml：

<Window x:Class="WpfAnimationWeChat.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"xmlns:local="clr-namespace:WpfAnimationWeChat"mc:Ignorable="d" WindowState="Maximized"Title="MainWindow" Height="450" Width="800"><Window.Resources><ControlTemplate x:Key="ct" TargetType="local:MyCustomControl"><Image x:Name="animation" Height="20" Width="20" Source="/WpfAnimationWeChat;component/Images/2.png"/></ControlTemplate></Window.Resources><Grid><Viewbox><Grid Width="1240" Height="768"><Grid Height="28" Width="100" MouseLeftButtonDown="Grid_MouseLeftButtonDown"><Rectangle RadiusX="4" RadiusY="4" Fill="#9eea6a" /><StackPanel Orientation="Horizontal" Margin="4,0"><!--可以設置MyCustomControl的Duration 和 IsLit(點擊的時候執行)的{binding}--><local:MyAnimationForever x:Name="AudioPlay" Template="{StaticResource ct}" Duration="0:00:10" IsLit="False"/><TextBlock Text="10ms”" VerticalAlignment="Center" FontSize="20"/></StackPanel></Grid></Grid></Viewbox></Grid> </Window>

MainWindow.xaml.cs：

private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e){if (this.AudioPlay.IsLit){this.AudioPlay.IsLit = false;}else{this.AudioPlay.IsLit = true;}}

新增三張圖片資源。

WPF開發者QQ群：?340500857?

blogs：?https://www.cnblogs.com/yanjinhua

Github：https://github.com/yanjinhuagood

作者：驚鏵

出處：https://www.cnblogs.com/yanjinhua

版權：本作品采用「署名-非商業性使用-相同方式共享 4.0 國際」許可協議進行許可。

轉載請著名作者 出處 https://github.com/yanjinhuagood

源碼地址

Github：https://github.com/yanjinhuagood/WpfAnimationWeChat

Gitee：https://gitee.com/yanjinhua/WpfAnimationWeChat.git

總結

以上是生活随笔為你收集整理的WPF使用Animation仿WeChat（微信）播放语音消息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。