如何在 jpanel(背景图像)上淡入和淡出(淡入淡出过渡)图像?

How to fade in and fade out (Fading transition ) image on panel(backgroud image)?

我正在向我的方法发送不同的图像,我想对此更改插入一些效果。

如何淡入淡出图像?

 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.

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

所以你需要自己写一个。

我能想到的最简单的方法是使用第二个 Panel,它叠加在第一个之上,实际上需要 第一个 Panel 否则透明效果将不起作用..

这是设置,使用两个 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。这是一个快速代码示例:

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();

}

我在一个 Button 中启动它,我还显示了当前状态:

private void button1_Click(object sender, EventArgs e)
{

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

如您所见,我使用了两种您可以设置的速度:一种用于控制 Timer 的速度,另一种用于控制透明度在每个 Tick 上变化的步骤。

通过简单地将图像 PanelColorBackgroundColor 更改为完全透明然后再返回,在两者之间等待指定的秒数来创建效果。

在效果结束时我调用了一个函数changeImage()来改变图像。如果此功能 returns false Timer 将永久停止..

我很确定这可以用更简洁、更优雅的方式编写,但实际上它似乎有效..

更新

  • 为了无闪烁显示使用双缓冲控件,像这样 Panel subclass:

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

这是 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;
}

它假设有两个 class 级变量:一个 List<string> imageFiles 填充了幻灯片图像的文件名和一个 int index = 0.