Fonctions d'accélération

Les fonctions d'accélération vous permettent d'appliquer des formules mathématiques personnalisées à vos animations. Par exemple, vous pouvez souhaiter qu'un objet rebondisse de façon réaliste ou se comporte comme s'il se trouvait sur un ressort. Vous pourriez utiliser des animations d'image clé et même des animations From/To/By afin de vous rapprocher de ces effets, mais cela exigerait beaucoup de travail et l'animation obtenue serait moins précise qu'avec l'aide d'une formule mathématique.

En plus de créer votre propre fonction d'accélération personnalisée en héritant de EasingFunctionBase, vous pouvez utiliser l'une des fonctions d'accélération fournies à l'exécution pour créer des effets courants.

• BackEase : rétracte légèrement le mouvement d'une animation avant qu'elle ne commence à s'animer sur la trajectoire indiquée.

• BounceEase : crée un effet rebondissant.

• CircleEase : crée une animation qui accélère et/ou ralentit à l'aide d'une fonction circulaire.

• CubicEase : crée une animation qui accélère et/ou ralentit à l'aide de la formule f(t) = t3.

• ElasticEase : crée une animation qui ressemble à un ressort oscillant jusqu'à s'arrêter.

• ExponentialEase : crée une animation qui accélère et/ou ralentit à l'aide d'une formule exponentielle.

• PowerEase : crée une animation qui accélère et/ou ralentit à l'aide de la formule f(t) = tp où p est égal à la propriété Power.

• QuadraticEase : crée une animation qui accélère et/ou ralentit à l'aide de la formule f(t) = t2.

• QuarticEase : crée une animation qui accélère et/ou ralentit à l'aide de la formule f(t) = t4.

• QuinticEase : crée une animation qui accélère et/ou ralentit à l'aide de la formule f(t) = t5.

• SineEase : crée une animation qui accélère et/ou ralentit à l'aide d'une formule de sinus.

Vous pouvez explorer le comportement de ces fonctions d'accélération avec l'exemple suivant.

Exécuter cet exemple

Pour appliquer une fonction d'accélération à une animation, utilisez la propriété EasingFunction de l'animation et spécifiez la fonction d'accélération à appliquer. L'exemple suivant applique une fonction d'accélération BounceEase à une DoubleAnimation afin de créer un effet rebondissant.

Exécuter cet exemple

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

Dans l'exemple précédent, la fonction d'accélération a été appliquée à une animation From/To/By. Vous pouvez également appliquer ces fonctions d'accélération aux animations d'image clé. L'exemple suivant indique comment utiliser des images clés avec les fonctions d'accélération qui leur sont associées afin de créer l'animation d'un rectangle qui se contracte de bas en haut, ralentit, se développe vers le bas (comme s'il tombait), puis rebondit jusqu'à ce qu'il s'arrête.

Exécuter cet exemple

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

Vous pouvez utiliser la propriété EasingMode pour modifier le comportement de la fonction d'accélération, c'est-à-dire, changer l'interpolation de l'animation. Trois valeurs sont possibles pour EasingMode :

• EaseIn : l'interpolation suit la formule mathématique associée à la fonction d'accélération.

• EaseOut : l'interpolation suit 100% de l'interpolation moins le résultat de la formule associée à la fonction d'accélération.

• EaseInOut : l'interpolation utilise EaseIn pour la première moitié de l'animation et EaseOut pour la deuxième moitié.

Les graphiques suivants montrent les différentes valeurs de EasingMode où f(x) représente la progression de l'animation et t représente l'heure.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

SineEase

Remarque
Vous pouvez utiliser PowerEase pour créer le même comportement que CubicEase, QuadraticEase, QuarticEase et QuinticEase en utilisant la propriété Power.Par exemple, si vous voulez utiliser PowerEase à la place de CubicEase, spécifiez une valeur Power égale à 3.

Outre l'utilisation des fonctions d'accélération présentes à l'exécution, vous pouvez créer vos propres fonctions d'accélération personnalisées en héritant de EasingFunctionBase. L'exemple suivant montre comment créer une fonction d'accélération personnalisée simple. Vous pouvez ajouter votre propre logique mathématique pour le comportement de la fonction d'accélération en substituant la méthode EaseInCore.

Exécuter cet exemple

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>