如何在面板(背景图像)上淡入和淡出(淡入淡出过渡)图像? [英] How to fade in and fade out (Fading transition ) image on panel(backgroud image)?

问题描述

我正在向我的方法发送不同的图像，我想为此更改插入一些效果.

I'm sending to my method different images and I want insert some effect to this change.

如何淡入和淡出图像?

 private void ShowImage(Image image, ImageLayout imageLayout, int numberOfSeconds)
    {
        try
        {
            if (this.image_timer != null)
                this.KillImageTimer();

            this.customer_form.DisplayImage(image, imageLayout);

            this.image_timer = new Timer();
            this.image_timer.Tick += (object s, EventArgs a) => NextImage();
            this.image_timer.Interval = numberOfSeconds* 1000;
            this.image_timer.Start();
        }
        catch
        {
            //Do nothing
        }


public void DisplayImage(Image image, ImageLayout imageLayout)
    {
        panel1.BackgroundImage = image;
        panel1.BackgroundImageLayout = imageLayout;
    }

推荐答案

Winforms 中没有内置的淡入淡出过渡.

There are no built-in fading transitions in Winforms.

所以你需要自己写一个.

So you will need to write one yourself.

我能想到的最简单的使用第二个Panel，它位于第一个之上，实际上需要在第一个Panel 否则透明效果将不起作用..

The simplest one I can think of uses a second Panel, that is layered upon the first one and in fact needs to be inside the first Panel or else the transparency effect won't work..

这是设置，使用两个Panels:

public Form1()
{
    InitializeComponent();

    pan_image.BackgroundImage = someImage;

    pan_layer.Parent = pan_image;
    pan_layer.BackColor = pan_image.BackColor;
    pan_layer.Size = pan_image.Size;
    pan_layer.Location = Point.Empty;
}

对于淡入淡出的动画，我使用了 Timer.这是一个快速代码示例:

For the fading animation I use a Timer. This is a quick code example:

Timer timer1 = new Timer();
int counter = 0;
int dir = 1;               // direction 1 = fade-in..
int secondsToWait = 5;
int speed1 = 25;           // tick speed ms
int speed2 = 4;            // alpha (0-255) change speed

void timer1_Tick(object sender, EventArgs e)
{
    // we have just waited and now we fade-out:
    if (dir == 0)
    {
        timer1.Stop(); 
        dir = -speed2;
        counter = 254;
        timer1.Interval = speed2;
        timer1.Start();
    }

    // the next alpha value:
    int alpha =  Math.Min(Math.Max(0, counter+= dir), 255);

    button1.Text = dir > 0 ? "Fade In" : "Fade Out";

    // fully faded-in: set up the long wait:
    if (counter >= 255)
    { 
        timer1.Stop(); 
        button1.Text = "Wait";
        timer1.Interval = secondsToWait * 1000;
        dir = 0;
        timer1.Start();


    }
    // fully faded-out: try to load a new image and set direction to fade-in or stop
    else if (counter <= 0)
    {
        if ( !changeImage() ) 
           {
             timer1.Stop(); 
             button1.Text = "Done";
           }
        dir = speed2;
    }

    // create the new, semi-transparent color:
    Color col = Color.FromArgb(255 - alpha, pan_image.BackColor);
    // display the layer:
    pan_layer.BackColor = col;
    pan_layer.Refresh();

}

我在一个按钮中启动它，我也在按钮上显示当前状态:

I start it in a Button, on which I also show the current state:

private void button1_Click(object sender, EventArgs e)
{

    dir = speed2;
    timer1.Tick += timer1_Tick;
    timer1.Interval = speed1;
    timer1.Start();
}

如您所见，我使用了两种可以设置的速度:一种用于控制 Timer 的速度，另一种用于控制每个 Tick.

As you can see I use two speeds you can set: One to control the speed of the Timer and one to control the steps by which the transparency changes on each Tick.

效果是通过简单地将 Color 从图像 Panel 的 BackgroundColor 更改为完全透明和背面来创建的，在两者之间等待指定的秒数.

The effect is created by simply changing the Color from the BackgroundColor of the image Panel to fully transparent and back, waiting in between for a specified number of seconds.

效果的最后我调用一个函数 changeImage() 来改变图像.如果此函数返回 false，则 Timer 将永远停止..

And the end of the effect I call a function changeImage() to change the images. If this function returns false the Timer is stopped for good..

我很确定这可以用更简洁、更优雅的方式编写，但它似乎可以工作..

I'm pretty sure this could be written in a cleaner and more elegant way, but as it is it seems to work..

更新

• 为了实现无闪烁显示，请使用双缓冲控件，例如此 Panel 子类:

class DrawPanel : Panel
{
    public DrawPanel()      { DoubleBuffered = true;  }
}

以下是 changeImage 的示例实现:

Here is a sample implementation for changeImage:

bool changeImage()
{
    if (pan_image.BackgroundImage != null)
    {
        var img = pan_image.BackgroundImage;
        pan_image.BackgroundImage = null;
        img.Dispose();
    }
    pan_image.BackgroundImage = Image.FromFile(imageFiles[index++]);
    return index < imageFiles.Count;
}

它假定两个类级变量:一个 List;imageFiles 填充了幻灯片图像的文件名和 int index = 0.

It assumes two class level variables: a List<string> imageFiles filled with file names of images for a slide-show and an int index = 0.

这篇关于如何在面板(背景图像)上淡入和淡出(淡入淡出过渡)图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！