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

最新推荐文章于 2022-02-27 01:12:29 发布

dotNET跨平台

最新推荐文章于 2022-02-27 01:12:29 发布

阅读量269

点赞数

文章标签： github animation kylin webgl lnmp

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

新增三张图片资源。