一张图片到另一张图片的高级淡入淡出答案

【问题标题】：Advanced fading of one picture to another一张图片到另一张图片的高级淡入淡出
【发布时间】：2010-09-11 03:11:33
【问题描述】：

所以基本上我正在制作一个自定义按钮。

期望的行为：

当用户鼠标悬停时，鼠标悬停的图片会淡入。

当用户将鼠标移开时，鼠标悬停/按下的图片会淡出。

例外情况：

如果用户在播放淡入淡出动画时鼠标移入或关闭，则需要：

立即停止当前播放的动画
从当前位置开始淡入新动画。示例：假设用户鼠标悬停，并且鼠标悬停动画已经播放，如果他们要在鼠标悬停动画仍在播放时将鼠标移开，然后快速重新打开鼠标，则不会从一开始就开始淡入淡出鼠标。但是 mouseoff 动画从哪里停止。

【问题讨论】：

标签： c# image fading

【解决方案1】：

我之前做过类似的事情，并使用 GDI+ 实现。

按钮应该在它的 draw 方法中做两件事。

绘制默认按钮，不考虑透明度。
使用给定的 alpha 绘制鼠标悬停图像。

使用 BackgroundWorker 为您提供流畅的动画。因此，在鼠标悬停时启动 BackgroundWorker 并使其运行直到 Alpha 达到 1.0f。当鼠标从按钮上移开时，工人应该减少 Alpha 直到它达到 0.0f。有一个名为 fadingin 的变量，以便 BackgroundWorker 了解它应该做什么。您的鼠标进出事件应该正确地将淡入淡出设置为 true 或 false，然后启动 BackgroundWorker（如果它尚未运行）。

BackgroundWorkers DoWork 方法可能如下所示：

void backgroundWorker_DoWork(object sender, DoWorkEventArgs e) {
  long ticks1 = 0;
  long ticks2 = 0;
  double interval = (double)Stopwatch.Frequency / 60;
  while (true) {
    ticks2 = Stopwatch.GetTimestamp();
    if (ticks2 >= ticks1 + interval) {
      ticks1 = Stopwatch.GetTimestamp();

      if(_fadeIn){
        _fadeAlpha += 0.1f;
        if(_fadeAlpha > 1f){
          _fadeAlpha = 1f;
          break;
        }
      }else{
        _fadeAlpha -= 0.1f;
        if(_fadeAlpha < 0f){
          _fadeAlpha = 0f;
          break;
        }
      }
      backgroundWorker.ReportProgress(0);
    }
    Thread.Sleep(1);
  }
  backgroundWorker.ReportProgress(0);
}

此处的秒表和循环构造将使动画以 60fps 动画为目标。

backgroundWorker ProgressChanged 应该只是将 ColorMatrix 更改为正确的 alpha 值，并将 ColorMatrix 绑定到 ImageAttributes，并通过调用 Invalidate 使控件无效。必须这样做，以便从主线程而不是 BackgroundWorker 线程请求 GUI 重绘。如果您直接从 DoWork 执行此操作，如果您在进行绘制操作时尝试修改 ImageAttributes，则会收到异常。

希望这可以帮助您在按钮上制作出流畅的动画。

【讨论】：

【解决方案2】：

您需要选择一张图片在底部，一张图片在顶部。最上面的那一个需要逐步将其 alpha 值从 0 调整到 255 以创建动画。

MSDN forum thread 详细介绍了一种混合方法。

【讨论】：