Question

我是WPF Transforms和storyboard的新手。

如何通过淡化旧图像然后调出新图像来更改图像对象中的图像并将图像更改为不同的图像？我想要的是这样的：example

注意图像是如何变化的 - 这就是我想要的。

如何在WPF中创建此效果？把两个图像放在同一个地方并改变它们的不透明度？

Answer 1

这是执行该操作的Windows Universal应用程序的控件：

public sealed class ImageButton : Button, IFadeable
{
    public event EventHandler FadeoutCompleted;
    private Image _image;
    private Image _image2;
    public ImageSource ImageSource
    {
        get { return (ImageSource)GetValue(ImageSourceProperty); }
        set { SetValue(ImageSourceProperty, value); }
    }
    public static readonly DependencyProperty ImageSourceProperty =
        DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));

    public ImageSource SecondImageSource
    {
        get { return (ImageSource)GetValue(SecondImageSourceProperty); }
        set { SetValue(SecondImageSourceProperty, value); }
    }

    public static readonly DependencyProperty SecondImageSourceProperty =
        DependencyProperty.Register("SecondImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));


    public ImageButton()
    {
        DefaultStyleKey = typeof(ImageButton);
    }

    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _image = GetTemplateChild("Image") as Image;
        _image2 = GetTemplateChild("Image2") as Image;
    }
    public void Fadeout()
    {
        var animation = new DoubleAnimation
        {
            From = 1.0,
            To = 0.0,
            FillBehavior = FillBehavior.HoldEnd,
            Duration = new Duration(TimeSpan.FromSeconds(1))
        };

        var easingFunction = new CubicEase();
        easingFunction.EasingMode = EasingMode.EaseInOut;
        animation.EasingFunction = easingFunction;
        var storyboard = new Storyboard();

        storyboard.Children.Add(animation);
        Storyboard.SetTarget(animation, _image);
        Storyboard.SetTargetProperty(animation, "Opacity");

        storyboard.Completed += (s, e) =>
        {
            if (FadeoutCompleted != null)
            {
                FadeoutCompleted(this, EventArgs.Empty);
            }
            _image2.Visibility = Visibility.Collapsed;
            _image.Opacity = 1.0;
        };
        _image2.Visibility = Visibility.Visible;
        storyboard.Begin();

    }
}

public interface IFadeable
{
    void Fadeout();
    event EventHandler FadeoutCompleted;
}

WPF：如何动画淡化图像变化？

1 个答案: