Bagikan melalui

Meringankan Fungsi

Fungsi kemudahan memungkinkan Anda menerapkan rumus matematika kustom ke animasi Anda. Misalnya, Anda mungkin ingin objek terpental secara realistis atau bertingkah seolah-olah berada di atas pegas. Anda dapat menggunakan Key-Frame atau bahkan animasi Dari/Ke/Oleh untuk mendekati efek ini, tetapi itu akan membutuhkan jumlah pekerjaan yang signifikan dan animasinya akan kurang akurat daripada menggunakan rumus matematika.

Selain membuat fungsi pelonggaran kustom Anda sendiri dengan mewarisi dari EasingFunctionBase, Anda dapat menggunakan salah satu dari beberapa fungsi pelonggaran yang disediakan oleh runtime untuk membuat efek umum.

  • BackEase: Menarik kembali gerakan animasi sedikit sebelum mulai menganimasikan di jalur yang ditunjukkan.

  • BounceEase: Membuat efek pantulan.

  • CircleEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan fungsi lingkaran.

  • CubicEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan rumus f(t) = t3.

  • ElasticEase: Membuat animasi yang menyerupai pegas berayun bolak-balik hingga berhenti.

  • ExponentialEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan rumus eksponensial.

  • PowerEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan rumus f(t) = tp di mana p setara dengan properti Power.

  • QuadraticEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan rumus f(t) = t2.

  • QuarticEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan rumus f(t) = t4.

  • QuinticEase: Buat animasi yang mempercepat dan/atau memperlambat menggunakan rumus f(t) = t5.

  • SineEase: Membuat animasi yang mempercepat dan/atau memperlambat menggunakan rumus sinus.

Untuk menerapkan fungsi easing pada animasi, gunakan properti EasingFunction dari animasi tersebut untuk menentukan fungsi easing yang akan diterapkan. Contoh berikut menerapkan fungsi easing BounceEase pada DoubleAnimation untuk menghasilkan efek memantul.

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

Dalam contoh sebelumnya, fungsi pelingan diterapkan ke animasi Dari/Ke/Menurut. Anda juga dapat menerapkan fungsi easing ini ke animasi Key-Frame. Contoh berikut menunjukkan cara menggunakan key frame dengan fungsi pelonggaran yang terkait dengannya untuk membuat animasi persegi panjang yang berkontraksi ke atas, melambat, lalu meluas ke bawah (seolah-olah jatuh) dan kemudian memantul hingga berhenti.

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

Anda dapat menggunakan properti EasingMode untuk mengubah perilaku fungsi pelonggaran, yaitu mengubah bagaimana animasi menginterpolasikan. Ada tiga kemungkinan nilai yang dapat Anda berikan untuk EasingMode:

  • EaseIn: Interpolasi mengikuti rumus matematika yang terkait dengan fungsi pengurangan.

  • EaseOut: Interpolasi mengikuti interpolasi 100% dikurangi output rumus yang terkait dengan fungsi pengurangan.

  • EaseInOut: Interpolasi menggunakan EaseIn untuk paruh pertama animasi dan EaseOut untuk paruh kedua.

Grafik di bawah ini menunjukkan nilai EasingMode yang berbeda di mana f(x) mewakili kemajuan animasi dan t mewakili waktu.

BackEase

grafik BackEase EasingMode.

BounceEase

Grafik BounceEase EasingMode.

CircleEase

grafik CircleEase EasingMode.

CubicEase

grafik CubicEase EasingMode.

ElasticEase

ElasticEase dengan grafik mode pelonggaran yang berbeda.

ExponentialEase

Grafik ExponentialEase dari berbagai mode pelonggaran.

PowerEase

QuarticEase dengan grafik mode easing yang berbeda.

QuadraticEase

QuadraticEase dengan berbagai mode pelonggaran grafik

QuarticEase

QuarticEase dengan grafik mode easing yang berbeda.

QuinticEase

QuinticEase dengan grafik mode penghalusan yang berbeda.

SineEase

SineEase untuk nilai EasingMode yang berbeda

Nota

Anda dapat menggunakan PowerEase untuk membuat perilaku yang sama seperti CubicEase, QuadraticEase, QuarticEase, dan QuinticEase dengan menggunakan properti Power. Misalnya, jika Anda ingin menggunakan PowerEase untuk mengganti CubicEase, tentukan nilai Power 3.

Selain menggunakan fungsi pelinggihan yang disertakan dalam run-time, Anda dapat membuat fungsi pelinggihan kustom Anda sendiri dengan mewarisi dari EasingFunctionBase. Contoh berikut menunjukkan cara membuat fungsi pengurangan kustom sederhana. Anda dapat menambahkan logika matematika Anda sendiri tentang bagaimana fungsi easing berfungsi dengan mengganti metode EaseInCore.

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>
  • Last updated on