[C#/WPF] DoubleAnimation 엘리먼트 : EasingFunction 속성에서 BackEase 객체 사용하기

■ DoubleAnimation 엘리먼트의 EasingFunction 속성에서 BackEase 객체를 사용하는 방법을 보여준다.

▶ MainWindow.xaml


<Window x:Class="TestProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="800"
    Height="600"
    Title="DoubleAnimation 엘리먼트 : EasingFunction 속성에서 BackEase 객체 사용하기"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <Grid>
        <Rectangle
            Width="100"
            Height="100"
            Fill="Blue">
            <Rectangle.Triggers>
                <EventTrigger RoutedEvent="Rectangle.MouseDown">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="scaleTransform"
                                Storyboard.TargetProperty="ScaleX"
                                From="1"
                                To="2"
                                Duration="00:00:01"
                                AutoReverse="True">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase
                                        Amplitude="0.3"
                                        EasingMode="EaseInOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation
                                Storyboard.TargetName="scaleTransform"
                                Storyboard.TargetProperty="ScaleY"
                                From="1"
                                To="2"
                                Duration="00:00:1"
                                AutoReverse="True">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase
                                        Amplitude="0.3"
                                        EasingMode="EaseInOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Rectangle.Triggers>
            <Rectangle.RenderTransform>
                <ScaleTransform x:Name="scaleTransform" />
            </Rectangle.RenderTransform>
        </Rectangle>
    </Grid>
</Window>

<Window x:Class="TestProject.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Width="800"

Height="600"

Title="DoubleAnimation 엘리먼트 : EasingFunction 속성에서 BackEase 객체 사용하기"

FontFamily="나눔고딕코딩"

FontSize="16">

<Grid>

<Rectangle

Width="100"

Height="100"

Fill="Blue">

<Rectangle.Triggers>

<DoubleAnimation

Storyboard.TargetName="scaleTransform"

Storyboard.TargetProperty="ScaleX"

From="1"

To="2"

Duration="00:00:01"

AutoReverse="True">

<DoubleAnimation.EasingFunction>

<BackEase

Amplitude="0.3"

EasingMode="EaseInOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

<DoubleAnimation

Storyboard.TargetName="scaleTransform"

Storyboard.TargetProperty="ScaleY"

From="1"

To="2"

Duration="00:00:1"

AutoReverse="True">

<DoubleAnimation.EasingFunction>

<BackEase

Amplitude="0.3"

EasingMode="EaseInOut" />

</DoubleAnimation.EasingFunction>

</DoubleAnimation>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

<Rectangle.RenderTransform>

</Rectangle.RenderTransform>

</Rectangle>

</Grid>

</Window>

TestProject.zip