c# - 一张图片到另一张图片的高级褪色

Question

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

期望的行为:

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

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

异常(exception)情况:

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

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

Answer 1

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

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

1. 在不考虑透明度的情况下绘制默认按钮。
2. 使用给定的 alpha 绘制 mouseove 图像。

使用 BackgroundWorker 为您提供流畅的动画效果。因此，在鼠标悬停时启动 BackgroundWorker 并使其运行直到 Alpha 达到 1.0f。当鼠标从按钮上移开时，工作人员应减少 ​​Alpha 直到达到 0.0f。有一个名为 fadingin 的变量，以便 BackgroundWorker 了解它应该做什么。您的鼠标进出事件应该正确地将 fadingin 设置为 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 绑定(bind)到 ImageAttributes，并通过调用 Invalidate 使控件无效。必须这样做，以便从主线程而不是 BackgroundWorker 线程请求 GUI 重绘。如果您直接从 DoWork 执行此操作，那么如果您在绘制操作正在进行时尝试修改 ImageAttributes，则会出现异常。

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