一幅图像到另一幅图像的高级褪色

Question

所以基本上我做了一个定制按钮。

期望的行为：

当用户鼠标移动时，鼠标上方的图片就会褪色。

当用户鼠标离开鼠标/按下的图片将淡出。

例外情况：

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

• 立即停止当前播放的动画
• 从当前位置开始淡入新动画。让我们假设一个用户鼠标经过，鼠标上方的动画已经播放了，如果他们要鼠标离开，然后鼠标在鼠标动画还在播放的时候快速启动，它就不会从一开始就开始鼠标淡出。但从鼠标动画停止的地方。

Answer 1

我之前做了一件类似的事情，并使用GDI+实现了它。

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

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

使用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);
}

这里的秒表和循环构造将使动画目标为60 for动画。

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

希望这能帮助你在你的按钮上制作一个很好的流畅动画。

Answer 2

你需要选择一张图片在底部，另一张图片在顶部。顶部的部分需要将其alpha值从0调整为255，以创建动画。

此MSDN论坛线程详细说明了混合的方法。