Versoepelingsfuncties

Met easing-functies kunt u aangepaste wiskundige formules toepassen op uw animaties. U wilt bijvoorbeeld dat een object realistisch stuitert of zich gedraagt alsof het op een veer staat. U kunt Key-Frame of zelfs Van/Naar/Door-animaties gebruiken om deze effecten te benaderen, maar het zou een aanzienlijke hoeveelheid werk kosten en de animatie zou minder nauwkeurig zijn dan het gebruik van een wiskundige formule.

Naast het maken van uw eigen aangepaste easing-functie door overname van EasingFunctionBase, kunt u een van de verschillende easing-functies van de runtime gebruiken om algemene effecten te creëren.

• BackEase: Trekt de beweging van een animatie iets in voordat deze begint te bewegen in het aangegeven pad.

• BounceEase: Hiermee creëert u een stuiterend effect.

• CircleEase: Hiermee maakt u een animatie die versnelt en/of vertraagt met behulp van een kringfunctie.

• CubicEase: Hiermee maakt u een animatie die versnelt en/of vertraagt met behulp van de formule f(t) = t³.

• ElasticEase: Hiermee maakt u een animatie die lijkt op een veer die heen en weer draait totdat het tot rust komt.

• ExponentialEase: Hiermee maakt u een animatie die versnelt en/of vertraagt met behulp van een exponentiële formule.

• PowerEase: maakt een animatie die versnelt en/of vertraagt met behulp van de formule f(t) = t^p, waarbij p gelijk is aan de eigenschap Power.

• QuadraticEase: Hiermee maakt u een animatie die versnelt en/of vertraagt met behulp van de formule f(t) = t².

• QuarticEase: hiermee maakt u een animatie die versnelt en/of vertraagt met behulp van de formule f(t) = t⁴.

• QuinticEase: Maak een animatie die versnelt en/of vertraagt met behulp van de formule f(t) = t⁵.

• SineEase: hiermee maakt u een animatie die versnelt en/of vertraagt met behulp van een sinusformule.

Als u een versoepelingsfunctie wilt toepassen op een animatie, gebruikt u de eigenschap EasingFunction van de animatie, geeft u de easing-functie op die op de animatie moet worden toegepast. In het volgende voorbeeld wordt een BounceEase easing-functie toegepast op een DoubleAnimation om een veerachtig effect te creëren.

<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>

In het vorige voorbeeld is de versoepelingsfunctie toegepast op een van/naar/door-animatie. U kunt deze easing-functies ook toepassen op Key-Frame animaties. In het volgende voorbeeld ziet u hoe u sleutelframes gebruikt met versoepelingsfuncties die eraan zijn gekoppeld om een animatie te maken van een rechthoek die omhoog loopt, vertraagt, vervolgens omlaag uitbreidt (alsof ze vallen) en vervolgens naar een stop stuitert.

<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>

U kunt de eigenschap EasingMode gebruiken om te wijzigen hoe de versoepelingsfunctie zich gedraagt, dat wil gezegd, wijzigen hoe de animatie interpoleert. Er zijn drie mogelijke waarden die u kunt geven voor EasingMode:

• EaseIn: Interpolatie volgt de wiskundige formule die is gekoppeld aan de versoepelingsfunctie.

• EaseOut: Interpolatie volgt 100% interpolatie min de uitvoer van de formule die is gekoppeld aan de versoepelingsfunctie.

• EaseInOut: Interpolatie gebruikt EaseIn voor de eerste helft van de animatie en EaseOut voor de tweede helft.

In de onderstaande grafieken ziet u de verschillende waarden van EasingMode waarbij f(x) de animatievoortgang vertegenwoordigt en t tijd vertegenwoordigt.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

SineEase

Opmerking

U kunt PowerEase gebruiken om hetzelfde gedrag te maken als CubicEase, QuadraticEase, QuarticEaseen QuinticEase met behulp van de eigenschap Power. Als u bijvoorbeeld PowerEase wilt gebruiken om te vervangen door CubicEase, geeft u een Power waarde van 3 op.

Naast het gebruik van de easing-functies die zijn opgenomen in de runtime, kunt u uw eigen aangepaste easing-functies maken door deze over te nemen van EasingFunctionBase. In het volgende voorbeeld ziet u hoe u een eenvoudige aangepaste easing-functie maakt. U kunt uw eigen wiskundige logica toevoegen voor de manier waarop de versoepelingsfunctie zich gedraagt door de methode EaseInCore te overschrijven.

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

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

<Window x:Class="CustomEasingFunction.Window1"
        xmlns:CustomEase="clr-namespace:CustomEasingFunction"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://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>