How To: Sanfte Animation eines Magnify-Effekt

Kürzlich habe ich das Beispiel-Projekt "Just Fun" in der Expression Gallery veröffentlicht. Bestandteil dieses Projekts ist ein animierter Magnify-Effekt. Dieser Effekt wirkt in dem Beispiel - wie ich finde - deswegen ziemlich cool, weil das visuelle Element, auf das der Effekt angewendet wird, ein Linsenglas ist.

Dieser Artikel hier beschreibt kurz, wie man einen Magnify-Effekt sanft animiert. Er ist sehr einfach nachzuvollziehen. Das Beispielprojekt kann in der Expression Gallery angeschaut werden. Dort steht auch der Quellcode zum Download bereit.

Generelle Vorgehensweise

Ein Magnify-Effekt wird zu einem visuellen Element hinzugefügt. Die Eigenschaften des Magnify-Effekts werden zunächst so eingestellt, dass der Effekt visuell keine Auswirkung hat. Der Effekt soll sanft erscheinen, wenn die Maus über das Element bewegt wird und ebenso sanft verschwinden, wenn die Maus sich nicht länger über dem Element befindet. Hierfür werden zwei Storyboards erzeugt, die aktiviert werden, wenn die Ereignisse MouseEnter bzw. MouseLeave feuern. Außerdem soll der Magnify-Effekt dem Mauszeiger folgen, wenn sich die Maus über dem Element befindet. Dazu wird einfach im Ereignis MouseMove zur Laufzeit die Position des Mauszeigers abgefangen und die berechnete Position der Center-Eigenschaft des Magnify-Effekts zugewiesen.

Schritt für Schritt

Schritt 1 - Hinzufügen des Magnify-Effekt
Das visuelle Element, auf das der Effekt angewendet werden soll, befindet sich im Objektbaum innerhalb eines Grid-Steuerelements. Ich benutze Expression Blend 4. Aus der Registerkarte "Objekte" wird aus "Effekte" der Magnify-Effekt selektiert und per Drag&Drop auf dieses Grid-Steuerelement gezogen. Das bewirkt, dass sich der Effekt visuell nicht nur auf das Grid-Steuerelement, sondern auf alle Kind-Elemente auswirkt, die sich in diesem Grid befinden.

Da später zur Laufzeit die Eigenschaften des Effekts manipuliert werden sollen, muss der Effekt einen Namen erhalten. Im Beispiel ist dies der Name "myMag".

Schritt 2 - Anfängliche Einstellung der Eigenschaften des Effekts
Die Eigenschaften des Magnify-Effekt werden wie folgt eingestellt:

Amount: "25%"
Center: "0,5" und "0,5"
InnerRadius: "0"
OuterRadius: "0"

Die Wertzuweisungen von jeweils "0" für die Eigenschaften InnerRadius und OuterRadius bewirken, dass sich der Effekt zunächst visuell nicht auswirkt.

Schritt 3 - Erstellen der Storyboards für das MouseEnter-Ereignis und für das MouseLeave-Ereignis
Es werden zwei Storyboards erstellt. Das Storyboard "sbMakeMag" läßt den Magnify-Effekt beim Eintreten des Mauszeigers in das Element langsam erscheinen. Das Storyboard "sbReleaseMag" läßt den Magnify-Effekt beim Austreten der Maus aus dem Element langsam wieder verschwinden.

sbMakeMag
In Expression Blend 4 wird mit F6 in den Arbeitsbereich "Animation" gewechselt. In der Registerkarte "Objekte und Zeitachsen" wird der Magnify-Effekt selektiert. Dann wird bei der Timeline-Position "0:00,000" ein neuer Keyframe hinzugefügt. Bei der Timeline-Position  0:00,400 wird ein zweiter Keyframe hinzugefügt. Für diesen Keyframe werden die Eigenschaften des Magnify-Effekts wie folgt eingestellt:

Amount: "25%"

Center: "0,5" und "0,5"
InnerRadius: "0,25"
OuterRadius: "0,41"

Damit der Lupeneffekt mit einer realistischen Bewegung eintritt, wird dem zweiten Keyframe eine EasingFunction hinzugefügt. Dazu wird der Keyframe mit einem einfachen Mausklick selektiert und in der Registerkarte "Eigenschaften" eine "SineOut"-EasingFunction ausgewählt.

sbReleaseMag
Das zweite Storyboard wird erstellt, indem einfach das erste Storyboard dupliziert und umgekehrt wird. Das Umbenennen nicht vergessen.

Schritt 4 - Aktivieren der Storyboards bei MouseEnter bzw. MouseLeave
Das Storyboard sbMakeMag wird im MouseEnter-Ereignisbehandler gestartet und das Storyboard sbReleaseMag wird im MouseLeave-Ereignisbehandler gestartet:

  Private Sub Overlay_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Overlay.MouseEnter

    If IsMagActive = True Then

      sbMakeMag.Begin()

    End If

  End Sub

  Private Sub Overlay_MouseLeave(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Overlay.MouseLeave

    If IsMagActive = True Then

      sbReleaseMag.Begin()

    End If

  End Sub

Im konkreten Beispiel habe ich dem sichtbaren Bereich ein Ellipse-Steuerelement als Overlay hinzugefügt, um den Quellcode verständlicher zu gestalten. Dieses Overlay-Element ist entsprechend benannt.
Schritt 5 - Magnify-Effekt soll dem Mauszeiger folgen
Als letztes wird der Code erstellt, damit der Magnify-Effekt dem Mauszeiger folgt. Hier ist der betreffende Quellcode:

  Private Sub Overlay_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles Overlay.MouseMove

    If IsMagActive = True Then

      Dim CP As Point = e.GetPosition(Overlay)

      CP.X /= Overlay.ActualWidth

      CP.Y /= Overlay.ActualHeight

      myMag.Center = CP

    End If

  End Sub

Der Variablen "CP" wird im MouseMove-Ereignis die Position des Mauszeigers innerhalb des Overlay-Elements zugewiesen. Diese Variable ist vom Typ "Point". Dann werden der X-Wert und der Y-Wert für die Eigenschaft "Center" des Magnify-Effekts ermittelt, indem der X-Wert der Mauszeigerposition durch die aktuelle Breite des Overlay-Elements geteilt wird. Entsprechend wird Y-Wert der Mauszeigerposition durch die aktuelle Höhe des Overlay-Elements geteilt. Schließlich wird dieser Wert der "Center"-Eigenschaft des Magnify-Effekts zugewiesen. Jedesmal, wenn das MouseMove-Ereignis feuert, wird jetzt die "Center"-Position des Magnify-Effekts aktualisiert.

Das war's.