dissolvenza avanzata di un'immagine all'altra

Question

Quindi, fondamentalmente im facendo un pulsante personalizzato.

comportamento desiderato:

Quando un utente mouse sopra, allora il quadro passaggio del mouse si esaurirà in.

Quando un utente sposta il mouse fuori l'immagine mouseover / pressato svanirà.

Eccezioni:

Se un utente mouse in o fuori, mentre un'animazione dissolvenza è in riproduzione, allora avranno bisogno di:

• Immediatamente fermare la fase di riproduzione di animazione
• Avvia in dissolvenza la nuova animazione dalla posizione corrente. Esempio: Diciamo che un utente mouse sopra, e l'animazione mouseover ha giocato, se dovessero il mouse fuori, e poi di nuovo il mouse in fretta, mentre l'animazione si allontana il mouse stava ancora giocando, non sarebbe iniziare il mouse nella dissolvenza dall'inizio .. ma da dove l'animazione si allontana il mouse si era fermato.

Answer 1

Ho fatto una cosa simile a questo prima, e implementato utilizzando GDI +.

Il pulsante dovrebbe fare due cose in esso del metodo draw.

1. Disegnare il pulsante di default, senza alcun riguardo per la trasparenza.
2. Disegna l'immagine mouseove con un dato alpha.

Usa un BackgroundWorker per darvi un un'animazione fluida. Quindi, al passaggio del mouse avviare il BackgroundWorker e farlo funzionare fino Alpha raggiunge 1.0f. Quando il mouse viene rimosso dal pulsante, il lavoratore dovrebbe ridurre Alpha fino a che non raggiunge 0.0f. Avere una variabile chiamata fadingin in modo che il BackgroundWorker capirà quello che dovrebbe fare. Il mouse dentro e fuori evento deve solo correttamente impostato fadingin true o false, quindi avviare il BackgroundWorker (se non è già runnung).

I BackgroundWorkers DoWork metodo può essere simile a questa:

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

Il cronometro e passante costrutto qui farà scopo animazione per un'animazione 60fps.

Il BackgroundWorker ProgressChanged deve solo cambiare il ColorMatrix al valore alfa corretta, e si legano il ColorMatrix alle ImageAttributes, e invalidare il controllo chiamando Invalidate. Questo deve essere fatto in modo che il ridisegno GUI è richiesto dal thread principale, e non il filo BackgroundWorker. Se si esegue questa operazione direttamente dal DoWork otterrete un'eccezione se si tenta di modificare ImageAttributes mentre un'operazione di pareggio è in corso.

Spero che questo aiuti a fare una buona animazione liscio sul vostro pulsante.

Answer 2

È necessario scegliere una foto per essere sul fondo, e uno per essere al top. L'uno sopra dovrà suo valore alfa regolato da 0 a 255 in passaggi per creare l'animazione.

MSDN thread del forum dettagli un metodo per la miscelazione.