[C#/WPF] DoubleAnimation 엘리먼트 : AccelerationRatio/DecelerationRatio 속성을 사용해 애니메이션 가속/감속하기

■ DoubleAnimation 엘리먼트의 AccelerationRatio/DecelerationRatio 속성을 사용해 애니메이션 가속/감속하는 방법을 보여준다.

▶ 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="TestProject"
    FontFamily="나눔고딕코딩"
    FontSize="16">
    <StackPanel
        VerticalAlignment="Center"
        Width="400">
        <Rectangle Name="rectangle1"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="10"
            Height="20"
            Fill="Gray" />
        <Rectangle Name="rectangle2"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="10"
            Height="20"
            Fill="Red" />
        <Rectangle Name="rectangle3"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="10"
            Height="20"
            Fill="Green" />
        <Rectangle Name="rectangle4"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="10"
            Height="20"
            Fill="Blue" />
        <Button
            HorizontalAlignment="Left"
            Margin="0 30 0 10"
            Width="150"
            Height="30"
            Content="애니메이션 시작">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="rectangle1"
                                Storyboard.TargetProperty="(Rectangle.Width)"
                                Duration="00:00:05"
                                From="20"
                                To="400" />
                            <DoubleAnimation
                                Storyboard.TargetName="rectangle2"
                                Storyboard.TargetProperty="(Rectangle.Width)"
                                Duration="00:00:05"
                                From="20"
                                To="400"
                                AccelerationRatio="0.4" />
                            <DoubleAnimation
                                Storyboard.TargetName="rectangle3"
                                Storyboard.TargetProperty="(Rectangle.Width)"
                                Duration="00:00:05"
                                From="20"
                                To="400"
                                DecelerationRatio="0.6" />
                            <DoubleAnimation
                                Storyboard.TargetName="rectangle4"
                                Storyboard.TargetProperty="(Rectangle.Width)"
                                Duration="00:00:05"
                                From="20"
                                To="400"
                                AccelerationRatio="0.4"
                                DecelerationRatio="0.6" />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </StackPanel>
</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="TestProject"

FontFamily="나눔고딕코딩"

FontSize="16">

<StackPanel

VerticalAlignment="Center"

Width="400">

<Rectangle Name="rectangle1"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="10"

Height="20"

Fill="Gray" />

<Rectangle Name="rectangle2"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="10"

Height="20"

Fill="Red" />

<Rectangle Name="rectangle3"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="10"

Height="20"

Fill="Green" />

<Rectangle Name="rectangle4"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="10"

Height="20"

Fill="Blue" />

<Button

HorizontalAlignment="Left"

Margin="0 30 0 10"

Width="150"

Height="30"

Content="애니메이션 시작">

<Button.Triggers>

<DoubleAnimation

Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="(Rectangle.Width)"

Duration="00:00:05"

From="20"

To="400" />

<DoubleAnimation

Storyboard.TargetName="rectangle2"

Storyboard.TargetProperty="(Rectangle.Width)"

Duration="00:00:05"

From="20"

To="400"

AccelerationRatio="0.4" />

<DoubleAnimation

Storyboard.TargetName="rectangle3"

Storyboard.TargetProperty="(Rectangle.Width)"

Duration="00:00:05"

From="20"

To="400"

DecelerationRatio="0.6" />

<DoubleAnimation

Storyboard.TargetName="rectangle4"

Storyboard.TargetProperty="(Rectangle.Width)"

Duration="00:00:05"

From="20"

To="400"

AccelerationRatio="0.4"

DecelerationRatio="0.6" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</StackPanel>

</Window>

TestProject.zip