Kolaylaştırıcı İşlevler

Kolaylaştırma işlevleri, animasyonlarınıza özel matematiksel formüller uygulamanıza olanak sağlar. Örneğin, bir nesnenin gerçekçi bir şekilde sıçramasını veya bir yaydaymış gibi davranmasını isteyebilirsiniz. Bu efektleri yaklaşık olarak ayarlamak için Anahtar Çerçeve ve hatta Başlangıç/Hedef/Son animasyonlarını kullanabilirsiniz, ancak bu önemli miktarda çalışma gerektirebilir ve animasyon matematiksel formül kullanmaktan daha az doğru olacaktır.

'den EasingFunctionBasedevralarak kendi özel kolaylaştırma işlevinizi oluşturmanın yanı sıra, ortak efektler oluşturmak için çalışma zamanı tarafından sağlanan çeşitli kolaylaştırma işlevlerinden birini kullanabilirsiniz.

• BackEase: Gösterilen yolda animasyon eklemeye başlamadan önce animasyonun hareketini biraz geri çekin.

• BounceEase: Sıçrayan bir efekt oluşturur.

• CircleEase: Döngüsel bir işlev kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur.

• CubicEase: f(t) = t3 formülünü kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur.

• ElasticEase: Dinlenmeye gelene kadar ileri geri salınan bir yay gibi bir animasyon oluşturur.

• ExponentialEase: Üstel formül kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur.

• PowerEase: f(t) = tp formülünü kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur; burada p özelliğine Power eşittir.

• QuadraticEase: f(t) = t2 formülünü kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur.

• QuarticEase: f(t) = t4 formülünü kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur.

• QuinticEase: f(t) = t5 formülünü kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturun.

• SineEase: Sinüs formülü kullanarak hızlandıran ve/veya yavaşlatan bir animasyon oluşturur.

Animasyona bir kolaylaştırma işlevi uygulamak için animasyonun özelliğini kullanarak EasingFunction animasyona uygulanacak kolaylaştırma işlevini belirtin. Aşağıdaki örnek, bir easing işlevini bir bouncing efekti oluşturmak için öğesine DoubleAnimation uygularBounceEase.

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

Önceki örnekte, bir From/To/By animasyona kolaylaştırma işlevi uygulanmıştı. Bu kolaylaştırma işlevlerini Key-Frame animasyonlarına da uygulayabilirsiniz. Aşağıdaki örnekte, yukarı doğru dalar, yavaşlar, sonra aşağı doğru genişletir (düşüyormuş gibi) ve ardından bir durağına geri dönen bir dikdörtgen animasyonu oluşturmak için bunlarla ilişkili kolaylaştırma işlevleriyle anahtar çerçevelerin nasıl kullanılacağı gösterilmektedir.

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

EasingMode özelliğini kullanarak kolaylaştırma işlevinin davranışını değiştirebilir, başka bir ifadeyle animasyonu ilişkilendirme şeklini değiştirebilirsiniz. için EasingModeverebileceğiniz üç olası değer vardır:

• EaseIn: İlişkilendirme, kolaylaştırma işleviyle ilişkili matematiksel formülü izler.

• EaseOut: İlişkilendirme, kolaylaştırma işleviyle ilişkili formülün çıkışından %100 ilişkilendirmeyi izler.

• EaseInOut: İlişkilendirme, animasyonun ilk yarısı ve EaseOut ikinci yarısı için kullanırEaseIn.

Aşağıdaki grafiklerde f(x) animasyon ilerleme durumunu EasingModetemsil ederken t saati temsil eden farklı değerler gösterilmektedir.

BackEase

BounceEase

CircleEase

CubicEase

ElasticEase

ExponentialEase

PowerEase

QuadraticEase

QuarticEase

QuinticEase

SineEase

Dekont

özelliğini kullanarak , , ve ile aynı davranışı CubicEaseoluşturmak için kullanabilirsinizPowerEase.QuinticEaseQuarticEaseQuadraticEasePower Örneğin, yerine CubicEasekullanmak PowerEase istiyorsanız 3 değerini belirtinPower.

Çalışma zamanına dahil edilen kolaylaştırma işlevlerini kullanmaya ek olarak, öğesinden EasingFunctionBasedevralarak kendi özel kolaylaştırma işlevlerinizi oluşturabilirsiniz. Aşağıdaki örnekte basit bir özel kolaylaştırma işlevinin nasıl oluşturulacağı gösterilmektedir. Yöntemini geçersiz kılarak EaseInCore kolaylaştırma işlevinin nasıl davrandığı için kendi matematiksel mantığınızı ekleyebilirsiniz.

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>