Beschleunigungsfunktionen

Mit Beschleunigungsfunktionen können Sie benutzerdefinierte mathematische Formeln für die Animationen übernehmen. Sie möchten z. B., dass ein Objekt realistisch springt oder sich so verhält, als wäre es auf einer Feder angebracht. Sie könnten die Keyframe- oder auch From/To/By-Animationen verwenden, um sich diesen Effekten anzunähern, dazu wäre jedoch ein beträchtlicher Aufwand erforderlich, und die Animation wäre weniger wirklichkeitsgetreu als bei der Verwendung einer mathematischen Formel.

Sie können nicht nur eine eigene benutzerdefinierte Beschleunigungsfunktion durch Erben von EasingFunctionBase erstellen, sondern auch eine von mehreren Beschleunigungsfunktionen verwenden, die von der Laufzeit für die Erstellung allgemeiner Effekte bereitgestellt wird.

• BackEase: Kehrt die Bewegung einer Animation geringfügig um, bevor die Animation im angegebenen Pfad gestartet wird.

• BounceEase: Erstellt einen Sprungeffekt.

• CircleEase: Erstellt eine Animation, die mithilfe einer zirkulären Funktion beschleunigt und/oder abbremst.

• CubicEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t3 beschleunigt und/oder abbremst.

• ElasticEase: Erstellt eine Animation, die einer Feder ähnelt, die hin- und herschwingt, bis sie zum Stillstand kommt.

• ExponentialEase: Erstellt eine Animation, die mithilfe einer exponentiellen Formel beschleunigt und/oder abbremst.

• PowerEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t beschleunigt oder abbremst, wobei p gleich der Power-Eigenschaft ist.

• QuadraticEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t2 beschleunigt und/oder abbremst.

• QuarticEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t4 beschleunigt und/oder abbremst.

• QuinticEase: Erstellt eine Animation, die mithilfe der Formel f(t) = t5 beschleunigt und/oder abbremst.

• SineEase: Erstellt eine Animation, die mithilfe einer Sinusformel beschleunigt und/oder abbremst.

Sie können das Verhalten dieser Beschleunigungsfunktionen mit folgendem Beispiel prüfen.

Dieses Beispiel ausführen

Zur Anwendung einer Beschleunigungsfunktion auf eine Animation verwenden Sie die EasingFunction-Eigenschaft der Animation, um die Beschleunigungsfunktion anzugeben, die auf die Animation angewendet werden soll. Im folgenden Beispiel wird eine BounceEase-Beschleunigungsfunktion auf eine DoubleAnimation angewendet, um einen Sprungeffekt zu erstellen.

Dieses Beispiel ausführen

<Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <Storyboard x:Name="myStoryboard">
                        <DoubleAnimation From="30" To="200" Duration="00:00:3" 
                         Storyboard.TargetName="myRectangle" 
                         Storyboard.TargetProperty="Height">
                            <DoubleAnimation.EasingFunction>
                                <BounceEase Bounces="2" EasingMode="EaseOut" 
                                 Bounciness="2" />
                            </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>

                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>

</Rectangle>

Im vorherigen Beispiel wurde die Beschleunigungsfunktion auf eine From/To/By-Animation angewendet. Sie können diese Beschleunigungsfunktionen auch auf Keyframe-Animationen anwenden. Im folgenden Beispiel wird veranschaulicht, wie Keyframes mit zugeordneten Beschleunigungsfunktionen verwendet werden, um eine Animation eines Rechtecks zu erstellen, das sich nach oben zusammenzieht, abbremst, sich dann nach unten verlängert (wie beim Fallen) und dann springend zum Stehen kommt.

Dieses Beispiel ausführen

<Rectangle Name="myRectangle" Width="200" Height="200" Fill="Blue">
    <Rectangle.Triggers>
        <EventTrigger RoutedEvent="Rectangle.MouseDown">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames
                     Storyboard.TargetProperty="Height"
                     Storyboard.TargetName="myRectangle">

                        <!-- This keyframe animates the ellipse up to the crest 
                             where it slows down and stops. -->
                        <EasingDoubleKeyFrame Value="30" KeyTime="00:00:02">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <CubicEase EasingMode="EaseOut"/>
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>

                        <!-- This keyframe animates the ellipse back down and makes
                             it bounce. -->
                        <EasingDoubleKeyFrame Value="200" KeyTime="00:00:06">
                            <EasingDoubleKeyFrame.EasingFunction>
                                <BounceEase Bounces="5" EasingMode="EaseOut"/>
                            </EasingDoubleKeyFrame.EasingFunction>
                        </EasingDoubleKeyFrame>

                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Rectangle.Triggers>

</Rectangle>

Sie können die EasingMode-Eigenschaft verwenden, um das Verhalten der Beschleunigungsfunktion, d. h. die Interpolation der Animation, zu ändern. Für EasingMode sind drei Werte möglich:

• EaseIn: Die Interpolation folgt der mathematischen Formel, die der Beschleunigungsfunktion zugeordnet ist.

• EaseOut: Die Interpolation folgt der Interpolation zu 100 % minus der Ausgabe der Formel, die der Beschleunigungsfunktion zugeordnet ist.

• EaseInOut: Die Interpolation verwendet EaseIn für die erste Hälfte der Animation und EaseOut für die zweite Hälfte.

In den nachfolgenden Diagrammen werden die unterschiedlichen Werte von EasingMode veranschaulicht, wobei f(x) den Animationsfortschritt und t die Zeit darstellt.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

SineEase

Hinweis
Sie können mit PowerEase das gleiche Verhalten erstellen wie mit CubicEase, QuadraticEase, QuarticEase und QuinticEase, indem Sie die Power-Eigenschaft verwenden.Wenn Sie z. B. PowerEase verwenden möchten, um CubicEase zu ersetzen, geben Sie den Power-Wert 3 an.

Sie können nicht nur die in der Laufzeit enthaltenen Beschleunigungsfunktionen verwenden, sondern durch Erben von EasingFunctionBase auch eigene benutzerdefinierte Beschleunigungsfunktionen erstellen. Im folgenden Beispiel wird veranschaulicht, wie eine einfache benutzerdefinierte Beschleunigungsfunktion erstellt wird. Sie können für das Verhalten der Beschleunigungsfunktion eine eigene mathematische Logik hinzufügen, indem Sie die EaseInCore-Methode überschreiben.

Dieses Beispiel ausführen

Namespace CustomEasingFunction
    Public Class CustomSeventhPowerEasingFunction
        Inherits EasingFunctionBase
        Public Sub New()
            MyBase.New()
        End Sub

        ' Specify your own logic for the easing function by overriding
        ' the EaseInCore method. Note that this logic applies to the "EaseIn"
        ' mode of interpolation. 
        Protected Overrides Function EaseInCore(ByVal normalizedTime As Double) As Double
            ' applies the formula of time to the seventh power.
            Return Math.Pow(normalizedTime, 7)
        End Function

        ' Typical implementation of CreateInstanceCore
        Protected Overrides Function CreateInstanceCore() As Freezable

            Return New CustomSeventhPowerEasingFunction()
        End Function

    End Class
End Namespace

namespace CustomEasingFunction
{
    public class CustomSeventhPowerEasingFunction : EasingFunctionBase
    {
        public CustomSeventhPowerEasingFunction()
            : base()
        {
        }

        // Specify your own logic for the easing function by overriding
        // the EaseInCore method. Note that this logic applies to the "EaseIn"
        // mode of interpolation. 
        protected override double EaseInCore(double normalizedTime)
        {
            // applies the formula of time to the seventh power.
            return Math.Pow(normalizedTime, 7);
        }

        // Typical implementation of CreateInstanceCore
        protected override Freezable CreateInstanceCore()
        {

            return new CustomSeventhPowerEasingFunction();
        }

    }
}

<Window x:Class="CustomEasingFunction.Window1"
        xmlns:CustomEase="clr-namespace:CustomEasingFunction"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="500" Width="300">
    <StackPanel>
        <TextBlock Margin="10" TextWrapping="Wrap">Click on the rectangle to start the animation</TextBlock>
        <StackPanel x:Name="LayoutRoot" Background="White">

            <Rectangle Name="myRectangle" Width="200" Height="30" Fill="Blue">
                <Rectangle.Triggers>
                    <EventTrigger RoutedEvent="Rectangle.MouseDown">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation From="30" To="300" Duration="00:00:3" 
                                 Storyboard.TargetName="myRectangle" 
                                 Storyboard.TargetProperty="Height">
                                    <DoubleAnimation.EasingFunction>

                                        <!-- You get the EasingMode property for free on your custom
                                             easing function.-->
                                        <CustomEase:CustomSeventhPowerEasingFunction EasingMode="EaseIn"/>
                                    </DoubleAnimation.EasingFunction>
                                </DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Rectangle.Triggers>

            </Rectangle>

        </StackPanel>
    </StackPanel>

</Window>