淡入新图像并同时淡出旧图像 WPF

Question

我想弄清楚如何让新图像淡入并同时让旧图像淡出。我最初想到使用两个双动画，一个用于淡入，另一个用于淡出，完成时相互触发，但这对我不起作用，因为我需要一个图像淡入而另一个图像淡出，我不不知道该怎么做。

我尝试做的事情：

XAML:

        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:Animation"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">

    <Grid x:Name="gridTest">
        <StackPanel x:Name="stkHeaderBar" Grid.Row="0"
         Orientation="Horizontal" FlowDirection="RightToLeft">
            <Button x:Name="btnChangeImg" Content="Change Image"
             Click="btnChangeImage_Click"/>
            <Image x:Name="img"></Image>
        </StackPanel>
    </Grid>

后面的代码：

using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;

namespace Animation
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
  
        }
        private void btnChangeImage_Click(object sender, RoutedEventArgs e)
        {

            DoubleAnimation fadeIn = new DoubleAnimation
            {
                From = 0,
                To = 1,
                Duration = TimeSpan.FromSeconds(2)
            };

            DoubleAnimation fadeOut = new DoubleAnimation
            {
                From = 1,
                Duration = TimeSpan.FromSeconds(2),
            };

            fadeOut.Completed += (o, e) =>
            {

                img.Source = new BitmapImage(new Uri(@"C:\images.jpg"));
                img.BeginAnimation(OpacityProperty, fadeIn);
            };


            fadeIn.Completed += (o, e) =>
            {

                img.Source = new BitmapImage(new Uri(@"C:\images.jpg"));
                img.BeginAnimation(OpacityProperty, fadeOut);
            };



            img.Source = new BitmapImage(new Uri(@"C:\images1.jpg"));
            img.BeginAnimation(OpacityProperty, fadeIn);
        }
    }
}

Answer 1

你是 over-complicating 它，只需将两张图片放在一个网格中，使它们重叠即可：

<Grid>
    <Image x:Name="img1" Stretch="UniformToFill"></Image>
    <Image x:Name="img2" Stretch="UniformToFill"></Image>
</Grid>

第一张图片的不透明度可以始终保持在 1.0，然后您只需设置第二张图片的动画以淡入其上方即可：

    private void btnChangeImage_Click(object sender, RoutedEventArgs e)
    {
        DoubleAnimation fadeIn = new DoubleAnimation
        {
            From = 0,
            To = 1,
            Duration = TimeSpan.FromSeconds(2)
        };

        img1.Source = new BitmapImage(new Uri(@"C:\image1.jpg"));
        img2.Source = new BitmapImage(new Uri(@"C:\image2.jpg"));
        img2.BeginAnimation(OpacityProperty, fadeIn);
    }

如果你想要彻底，那么你可以使用你的 fadeIn.Completed 处理程序在动画完成时删除 img1，但我通常不会担心，除非它是一个 time-critical 应用程序.

淡入新图像并同时淡出旧图像 WPF

Fade in new image and simultaneously fade out old image WPF

c#

wpf