[C#/WPF] DoubleAnimation 엘리먼트 : IsCumulative 속성을 사용해 애니메이션 값 누적하기

■ DoubleAnimation 엘리먼트의 IsCumulative 속성을 사용해 애니메이션 값을 누적하는 방법을 보여준다.

▶ 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"
            Width="100"
            Height="20"
            Fill="#aa3333ff" />
        <Rectangle Name="rectangle2"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="100"
            Height="20"
            Fill="#aa3333ff" />
        <Rectangle Name="rectangle3"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="100"
            Height="20"
            Fill="#aa3333ff" />
        <Rectangle Name="rectangle4"
            HorizontalAlignment="Left"
            Margin="0 10 0 0"
            Width="100"
            Height="20"
            Fill="#aa3333ff" />
        <Button
            HorizontalAlignment="Left"
            Width="150"
            Height="30"
            Margin="0 30 0 0">
            애니메이션 재시작
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation
                                Storyboard.TargetName="rectangle1"
                                Storyboard.TargetProperty="Width"
                                Duration="00:00:03"
                                From="100"
                                To="200"
                                RepeatBehavior="4x"
                                AutoReverse="True"
                                IsCumulative="True" />
                            <DoubleAnimation
                                Storyboard.TargetName="rectangle2"
                                Storyboard.TargetProperty="Width"
                                IsCumulative="False"
                                From="100"
                                To="200"
                                Duration="00:00:03"
                                RepeatBehavior="4x"
                                AutoReverse="True" />
                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetName="rectangle3"
                                Storyboard.TargetProperty="Width"
                                RepeatBehavior="4x"
                                AutoReverse="True"
                                IsCumulative="True">
                                <DoubleAnimationUsingKeyFrames.KeyFrames>
                                    <LinearDoubleKeyFrame KeyTime="00:00:00" Value="100" />
                                    <LinearDoubleKeyFrame KeyTime="00:00:01" Value="130" />
                                    <SplineDoubleKeyFrame KeyTime="00:00:30" Value="200" KeySpline="0.6 0.0 0.9 0.0" />
                                </DoubleAnimationUsingKeyFrames.KeyFrames>
                            </DoubleAnimationUsingKeyFrames>
                            <DoubleAnimationUsingKeyFrames
                                Storyboard.TargetName="rectangle4"
                                Storyboard.TargetProperty="Width"
                                RepeatBehavior="4x"
                                AutoReverse="True"
                                IsCumulative="False">
                                <DoubleAnimationUsingKeyFrames.KeyFrames>
                                    <LinearDoubleKeyFrame KeyTime="00:00:00" Value="100" />
                                    <LinearDoubleKeyFrame KeyTime="00:00:01" Value="130" />
                                    <SplineDoubleKeyFrame KeyTime="00:00:03" Value="200" KeySpline="0.6 0.0 0.9 0.0" />
                                </DoubleAnimationUsingKeyFrames.KeyFrames>
                            </DoubleAnimationUsingKeyFrames>
                        </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"

Width="100"

Height="20"

Fill="#aa3333ff" />

<Rectangle Name="rectangle2"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="100"

Height="20"

Fill="#aa3333ff" />

<Rectangle Name="rectangle3"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="100"

Height="20"

Fill="#aa3333ff" />

<Rectangle Name="rectangle4"

HorizontalAlignment="Left"

Margin="0 10 0 0"

Width="100"

Height="20"

Fill="#aa3333ff" />

<Button

HorizontalAlignment="Left"

Width="150"

Height="30"

Margin="0 30 0 0">

애니메이션 재시작

<Button.Triggers>

<DoubleAnimation

Storyboard.TargetName="rectangle1"

Storyboard.TargetProperty="Width"

Duration="00:00:03"

From="100"

To="200"

RepeatBehavior="4x"

AutoReverse="True"

IsCumulative="True" />

<DoubleAnimation

Storyboard.TargetName="rectangle2"

Storyboard.TargetProperty="Width"

IsCumulative="False"

From="100"

To="200"

Duration="00:00:03"

RepeatBehavior="4x"

AutoReverse="True" />

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle3"

Storyboard.TargetProperty="Width"

RepeatBehavior="4x"

AutoReverse="True"

IsCumulative="True">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames

Storyboard.TargetName="rectangle4"

Storyboard.TargetProperty="Width"

RepeatBehavior="4x"

AutoReverse="True"

IsCumulative="False">

<DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames.KeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</StackPanel>

</Window>

TestProject.zip

.NETFRAMEWORK 2D ANIMATION C# GRAPHICS MICROSOFT WPF

icodebroker

[C#/WPF] DoubleAnimation 엘리먼트 : IsCumulative 속성을 사용해 애니메이션 값 누적하기