Kolaylaştırıcı İşlevler

Kolay işlevler, animasyonlarınıza özel matematik formülleri uygulamanıza olanak sağlar. Örneğin, bir nesnenin gerçekçi bir şekilde sıçraması veya bir spring üzerinde olduğu gibi davranması istiyor olabilir. Bu etkileri Key-Frame için Key-Frame veya From/To/By animasyonlarını kullanabilirsiniz, ancak bu önemli miktarda iş alır ve animasyon matematiksel formül kullanmaya göre daha az doğru olur.

'den devralarak kendi özel easing işlevinizi oluşturmanın yanı sıra, yaygın etkileri oluşturmak için çalışma zamanı tarafından sağlanan birkaç kolay kullanım EasingFunctionBase işlevinden birini kullanabilirsiniz.

  • BackEase: Bir animasyonun hareketini belirtilen yolda animasyonu canlandırmaya başlamadan önce biraz geri çekebilirsiniz.

  • BounceEase: Bir yayma etkisi oluşturur.

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

  • CubicEase: CubicEase( t ) = t 3 formülünü kullanarak hızlandıranve/veyahızlandıran bir animasyonoluşturur.

  • ElasticEase: Geri kalana kadar ileri ve geri hareket eden bir spring'e benzeyen bir animasyon oluşturur.

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

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

  • QuadraticEase: QuadraticEase( t ) = t 2 formülünü kullanarak hızlandıranve/veyahızlandıran bir animasyonoluşturur.

  • QuarticEase: QuarticEase( t ) = t 4 formülünü kullanarak hızlandıranve/veyahızlandıran bir animasyonoluşturur.

  • QuinticEase: QuinticEase( t ) = t 5 formülünü kullanarak hızlandıranve/veyahızlandıran bir animasyonoluşturun.

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

Animasyona kolay bir işlev uygulamak için animasyonun özelliğini kullanarak animasyona uygulanacak EasingFunction kolaylama işlevini belirtin. Aşağıdaki örnek, bir BounceEase geçerlilik etkisi oluşturmak için bir DoubleAnimation easing işlevini uygular.

<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, easing işlevi bir From/To/By animasyonuna uygulanmıştır. Ayrıca bu kolaylama işlevlerini animasyonlara Key-Frame uygulayabilirsiniz. Aşağıdaki örnekte, yukarı doğru ilerlene bir dikdörtgenin animasyonunu oluşturmak için, anahtar çerçeveleri ile ilişkili easing işlevleriyle birlikte nasıl kullanabileceğiniz ve sonra aşağı doğru genişleyen (düşüyor gibi) ve sonra durmaya geri dönen bir dikdörtgenin animasyonunu nasıl kullanabileceğiniz açıklanmıştır.

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

özelliğini kullanarak kolaylama işlevinin nasıl davranacağını değiştirebilir, başka bir şekilde animasyonun EasingMode ilişkilendirmesini değiştirebilirsiniz. için verebilirsiniz üç olası değer EasingMode vardır:

  • EaseIn: İlişkileme, easing işleviyle ilişkili matematiksel formülü izler.

  • EaseOut: İlişkileme, easing işleviyle ilişkili formülün çıktısını %100 ilişkilendirmeden eksi olarak izler.

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

Aşağıdaki grafiklerde f ( x ) ile animasyonun ilerleme durumu, t ise saati EasingMode temsil eden farklı EasingModedeğerler gösterilmiştir.

BackEase

BackEase EasingMode graphs.

BounceEase

BounceEase EasingMode graphs.

CircleEase

CircleEase EasingMode graphs.

CubicEase

CubicEase EasingMode graphs.

ElasticEase

ElasticEase with graphs of different easingmodes.

ExponentialEase

ExponentialEase graphs of different easingmodes.

PowerEase

QuarticEase with graphs of different easingmodes.

QuadraticEase

QuadraticEase with graphs of different easingmodes

QuarticEase

QuarticEase with graphs of different easingmodes.

QuinticEase

QuinticEase with graphs of different easingmodes.

SineEase

SineEase for different EasingMode values

Not

özelliğini kullanarak PowerEase , , ve ile aynı davranışı oluşturmak için CubicEaseQuadraticEaseQuarticEaseQuinticEasePower kullanabilirsiniz. Örneğin, yerine kullanmak istediğiniz PowerEaseCubicEase 3 değerini Power belirtin.

Çalışma zamanına dahil edilen kolaylama işlevlerini kullanmaya ek olarak, 'den devralarak kendi özel kolaylık işlevlerinizi EasingFunctionBase oluşturabilirsiniz. Aşağıdaki örnekte basit bir özel kolaylama işlevinin nasıl oluşturularak ilgili bilgiler ve bilgiler yer almaktadır. Yöntemi geçersiz karak kolaylama işlevinin nasıl davranacağını kendi matematiksel mantığınızı EaseInCore 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>