合并两个图像以改变不透明度的“淡入淡出”过渡? (C#/ PNG)

时间:2011-09-02 10:18:44

标签: c# graphics fade

首先,我想建议它不是THIS问题的重复。至少我的意见是这样:))

我想要实现的是一系列“淡化”动画的帧。

我选择了两个PNG文件(假设它们的大小相同),例如:

我想“模拟”将它们合并为图形编辑器中的图层。我把Pic1放在顶部,不透明度为255,Pic2放在不透明度为0的下面,所以一开始我只看到Pic1。然后我改变他们的不透明度,如下:

有什么简单的方法吗?

2 个答案:

答案 0 :(得分:4)

在winforms应用程序中,这可以很容易地完成。创建具有一些属性的用户控件:

public Image FromImage { get; set; }
public Image ToImage { get; set; }

private float opacity = 1;

现在覆盖OnPaint

 protected override void OnPaint(PaintEventArgs e)
    {
        if (FromImage != null && ToImage != null)
        {
            ColorMatrix matrix1 = new ColorMatrix();
            matrix1.Matrix33 = opacity;
            ImageAttributes attributes1 = new ImageAttributes();
            attributes1.SetColorMatrix(matrix1, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);


            ColorMatrix matrix2 = new ColorMatrix();
            matrix2.Matrix33 = 1 - opacity;
            ImageAttributes attributes2 = new ImageAttributes();
            attributes2.SetColorMatrix(matrix2, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

            e.Graphics.DrawImage(FromImage, new Rectangle(0, 0, this.Width, this.Height), 0, 0, this.Width,
                                 this.Height, GraphicsUnit.Pixel, attributes1);
            e.Graphics.DrawImage(ToImage, new Rectangle(0, 0, this.Width, this.Height), 0, 0, this.Width,
                                 this.Height, GraphicsUnit.Pixel, attributes2);
        }
        base.OnPaint(e);
    }

现在将一个计时器放到控件上,将其设置为启用时间为100毫秒。处理tick事件:

private void timer_Tick(object sender, EventArgs e)
    {
        if(opacity == 0)
        {
            this.timer.Stop();
            return;
        }

        this.opacity -= 0.01f;
        this.Invalidate();
    }
瞧,瞧。但是,有一点需要注意。这使得转换非常简单,可以在控件的构造函数中使用此行进行一些修改:

this.SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlStyles.AllPaintingInWmPaint,true);

基于编辑进行更新:您可以将其转换为一个实用程序,它可以拍摄2张图像,并使用相同的代码将每一步输出到新图像。像这样的东西:

public class ImageUtility
{
    private Image image1;
    private Image image2;

    public ImageUtility(Image image1, Image image2)
    {
        this.image1 = image1;
        this.image2 = image2;
    }

    public void SaveTransitions(int numSteps, string outDir)
    {
        var opacityChange = 1.0f/(float) numSteps;

        for(float opacity = 1,i=0;opacity>0;opacity-=opacityChange,i++)
        {
            using(var image = new Bitmap(image1.Width,image2.Width))
            {
                Graphics g = Graphics.FromImage(image);
                ColorMatrix matrix1 = new ColorMatrix();
                matrix1.Matrix33 = opacity;
                ImageAttributes attributes1 = new ImageAttributes();
                attributes1.SetColorMatrix(matrix1, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);


                ColorMatrix matrix2 = new ColorMatrix();
                matrix2.Matrix33 = 1 - opacity;
                ImageAttributes attributes2 = new ImageAttributes();
                attributes2.SetColorMatrix(matrix2, ColorMatrixFlag.Default, ColorAdjustType.Bitmap);

                g.DrawImage(image1, new Rectangle(0, 0, image1.Width, image1.Height), 0, 0, image1.Width,
                                     image1.Height, GraphicsUnit.Pixel, attributes1);
                g.DrawImage(image2, new Rectangle(0, 0, image2.Width, image2.Height), 0, 0, image2.Width,
                                     image2.Height, GraphicsUnit.Pixel, attributes2);

                image.Save(Path.Combine(outDir,"Image" + i + ".png"),ImageFormat.Png);
            }
        }
    }

用法:

ImageUtility util = new ImageUtility(Image.FromFile(@"C:\path\pic1.png"), Image.FromFile(@"C:\path\pic2.png"));
util.SaveTransitions(100, @"C:\path\output"); // saves 100 images 

答案 1 :(得分:1)

使用,您可以使用Graphics.DrawImage,使用带有ImageAttributes参数的重载。该类可以指定对颜色(和alpha )值的操作。

ImageAttributes页面上的示例几乎就是您想要的。只需在同一个地方绘制原始图像并将其转换,然后将颜色矩阵更改为仅更改Alpha级别。