WPF 动态图的插入方法

方法一、通过两张图片的频繁替换实现动态图
.xaml文件：

 <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/EasiNote.Resources;component/DesignTimeMain.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <Storyboard x:Key="RollInImg1FadeOutImg2">
                <DoubleAnimation Storyboard.TargetName="Img1" 
                             Storyboard.TargetProperty="Opacity"
                             To="1" 
                             Duration="0:0:0.1" />
                <DoubleAnimation Storyboard.TargetName="Img2" 
                             Storyboard.TargetProperty="Opacity"
                             To="0" 
                             BeginTime="0:0:0.4"
                             Duration="0:0:0.3" />
            </Storyboard>

            <Storyboard x:Key="RollInImg2FadeOutImg1">
                <DoubleAnimation Storyboard.TargetName="Img2" 
                             Storyboard.TargetProperty="Opacity"
                             To="1" 
                             Duration="0:0:0.1" />
                <DoubleAnimation Storyboard.TargetName="Img1" 
                             Storyboard.TargetProperty="Opacity"
                             To="0" 
                             BeginTime="0:0:0.4"
                             Duration="0:0:0.3" />
            </Storyboard>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid x:Name="Root">
        <Image x:Name="Img1" Width="{Binding ElementName=ImageRollingControl,Path=ImageWidth}" Height="{Binding ElementName=ImageRollingControl,Path=ImageHeight}" Stretch="Fill" Opacity="1" />
        <Image x:Name="Img2" Width="{Binding ElementName=ImageRollingControl,Path=ImageWidth}" Height="{Binding ElementName=ImageRollingControl,Path=ImageHeight}" Stretch="Fill" Opacity="0"/>
        <Grid x:Name="TextGrid" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="0 0 0 20" Visibility="Collapsed">
            <Image x:Name="TextBg" Width="180" Height="30" Source="{StaticResource Image.FlowChart.TipsBg}"/>
        </Grid>
    </Grid>

.cs文件

   public partial class ImageRolling
    {
        #region 依赖属性

        public List<BitmapImage> ItemSource
        {
            get => (List<BitmapImage>)GetValue(ItemSourceProperty);
            set => SetValue(ItemSourceProperty, value);
        }
        public static readonly DependencyProperty ItemSourceProperty = DependencyProperty.Register(
            "ItemSource", typeof(List<BitmapImage>), typeof(ImageRolling), new PropertyMetadata(null));

        public int FrameRate
        {
            get => (int)GetValue(FrameRateProperty);
            set => SetValue(FrameRateProperty, value);
        }
        public static readonly DependencyProperty FrameRateProperty = DependencyProperty.Register(
            "FrameRate", typeof(int), typeof(ImageRolling), new PropertyMetadata(43));

        public double ImageWidth
        {
            get => (double)GetValue(ImageWidthProperty);
            set => SetValue(ImageWidthProperty, value);
        }
        public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register(
            "ImageWidth", typeof(double), typeof(ImageRolling), new PropertyMetadata(0.0));

        public double ImageHeight
        {
            get => (double)GetValue(ImageHeightProperty);
            set => SetValue(ImageHeightProperty, value);
        }
        public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register(
            "ImageHeight", typeof(double), typeof(ImageRolling), new PropertyMetadata(0.0));

        #endregion

        private Timer _timer;
        private int _intCurrentImageIndex;
        private int _currentImgId = 1;
        private readonly string _tip1 = Lang.Get("toolbar.more.graphic.tips1");
        private readonly string _tip2 = Lang.Get("toolbar.more.graphic.tips2");
		private readonly List<BitmapImage> _bitmapImages = new List<BitmapImage>();
        public ImageRolling()
        {
            InitializeComponent();            

            IsVisibleChanged += ImageRolling_IsVisibleChanged;

			for (int i = 1; i <= 174; i++)
            {
                string index = i.ToString();
                if (i <= 9)
                {
                    index = $"000{i}";
                }
                if (i > 9 && i < 100)
                {
                    index = $"00{i}";
                }

                if (i >= 100)
                {
                    index = $"0{i}";
                }

                _bitmapImages.Add(new BitmapImage(new Uri([email protected]"DongHua_/intelligent{index}.png", UriKind.RelativeOrAbsolute)));
            }
            ItemSource = _bitmapImages;
        }

        private void ImageRolling_IsVisibleChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            TipTb.Text = "";
            TextGrid.Visibility = Visibility.Collapsed;

            if ((bool) e.NewValue)
            {
                try
                {
                    Img1.Source = ItemSource[_intCurrentImageIndex];
                    if (_intCurrentImageIndex + 1 >= ItemSource.Count)
                    {
                        _intCurrentImageIndex = 0;
                    }
                    else
                    {
                        _intCurrentImageIndex++;
                    }

                    Img2.Source = ItemSource[_intCurrentImageIndex];

                    _timer = new Timer(ImagePollingCallback, null, 0, 24);
                }
                catch (Exception exception)
                {
                    Log.Error(exception);
                }      
            }
            else
            {
                _timer.Dispose();
                _intCurrentImageIndex = 0;
            }
        }

        private void ImagePollingCallback(object state)
        {
            Application.Current.Dispatcher.BeginInvoke(new Action(() =>
            {
                try
                {
                    if (_intCurrentImageIndex + 1 >= ItemSource.Count)
                    {
                        TipTb.Text = "";
                        TextGrid.Visibility = Visibility.Collapsed;
                        _intCurrentImageIndex = 0;
                    }
                    else
                    {
                        _intCurrentImageIndex++;
                    }

                    if (_currentImgId == 1)
                    {
                        Img1.Opacity = 0;
                        Img2.Opacity = 1;
                        Img1.Source = ItemSource[_intCurrentImageIndex];
                        _currentImgId = 2;          
                    }
                    else if (_currentImgId == 2)
                    {
                        Img2.Opacity = 0;
                        Img1.Opacity = 1;
                        Img2.Source = ItemSource[_intCurrentImageIndex];
                        _currentImgId = 1;                     
                    }

                    if (_intCurrentImageIndex == 24)
                    {
                        TipTb.Text = _tip1;
                        TextGrid.Visibility = Visibility.Visible;
                    }

                    if (_intCurrentImageIndex == 124)
                    {
                        TipTb.Text = _tip2;
                        TextGrid.Visibility = Visibility.Visible;
                    }
                }
                catch (Exception e)
                {
                    Log.Error(e);
                }          
            }));     
        }

        private void ImagePollingCallbackOther(object sender, EventArgs e)
        {
            Storyboard sb=new Storyboard();
            Application.Current.Dispatcher.BeginInvoke(new Action(() =>
            {
                if (_intCurrentImageIndex + 1 >= ItemSource.Count)
                {
                    _intCurrentImageIndex = 0;
                }
                else
                {
                    _intCurrentImageIndex++;
                }

                if (_currentImgId == 1)
                {
                    sb = (Storyboard)FindResource("RollInImg2FadeOutImg1");
                    Img1.Source = ItemSource[_intCurrentImageIndex];
                    _currentImgId = 2;
                }
                else if (_currentImgId == 2)
                {
                    sb = (Storyboard)FindResource("RollInImg1FadeOutImg2");
                    Img2.Source = ItemSource[_intCurrentImageIndex];
                    _currentImgId = 1;
                }
                sb.Begin();
            }));      
        }    
        
    }

方法二、帧序列图
.xaml文件

<Grid Width="304"
                  Height="175"
                  Margin="0 40 0 0">
                <Rectangle Name="RectDis" />
                <TextBlock x:Name="PageNumber"
                           Text="01/02"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Bottom"
                           Foreground="#FFA3A3A3"
                           FontSize="20"
                           Height="26"
                           Width="56"
                           Margin="0 0 0 14">
                </TextBlock>
            </Grid>

.cs文件

    public partial class ImageRolling
    {
        private Storyboard _sbDisappear;
        public ImageRolling()
        {
            InitializeComponent();
            LoadPictures();
            IsVisibleChanged += ((sender, e) =>
            {
                if (e.NewValue is bool value && value)
                {
                    _sbDisappear.Begin();
                }
            });
            _changeText1Timer = new Timer(ChangeTimer1Callback, null, TimeSpan.FromMilliseconds(1400), Timeout.InfiniteTimeSpan);
            _changeText2Timer = new Timer(ChangeTimer2Callback, null, TimeSpan.FromMilliseconds(2760), Timeout.InfiniteTimeSpan);
            Storyboard _hideStoryboard=TryFindResource("HideStoryboard") as Storyboard;
        }
        public void LoadPictures()
        {
            _sbDisappear = new Storyboard();
            for (int i = 1; i < 100; i++)
            {
                //ObjectAnimationUsingKeyFrames 可以对指定 Duration 内的一组 KeyFrames 中的 Object 属性值进行动画处理
                ObjectAnimationUsingKeyFrames oauf = new ObjectAnimationUsingKeyFrames();
                //读取图片文件
                ImageBrush imgBrush = new ImageBrush();
                BitmapImage bmpImge = new BitmapImage(new Uri([email protected]"Resource/Image/Cartoon/pizhu{i:0000}.png", UriKind.RelativeOrAbsolute));
                imgBrush.ImageSource = bmpImge;
                //DiscreteObjectKeyFrame 通过使用离散内插，可以在前一个关键帧的 Object 值及其自己的 Value 之间进行动画处理。
                DiscreteObjectKeyFrame dokf = new DiscreteObjectKeyFrame();
                //KeyTime 获取或设置应到达关键帧的目标 Value 的时间,这里每隔40毫秒设置一张图片，也就是每秒1000/40=25帧
                dokf.KeyTime = KeyTime.FromTimeSpan(TimeSpan.FromMilliseconds(i * 40));
                dokf.Value = imgBrush;
                oauf.KeyFrames.Add(dokf);
                Storyboard.SetTargetProperty(oauf, new PropertyPath("(Rectangle.Fill)"));
                //把动画应用到窗体的Rectangle中
                Storyboard.SetTarget(oauf, RectDis);
                //把ObjectAnimationUsingKeyFrames动画添加到Storyboard中
                _sbDisappear.Children.Add(oauf);
            }
        }
    }