WPF(XAML) - Animation

Animation

• UI를 좀더 화려하고 유용하게 동작을 적용하는 효과

Property	Basic Animation	Keyframe Animation	Description
Color	ColorAnimation	ColorAnimationUsingKeyFrames	단색, 그라데이션의 색상에 애니메이션 효과 적용
Double	DoubleAnimation	DoubleAnimationUsingKeyFrames	Button등 Control의 크기,투명도, 회전 등 속성에 애니메이션 효과 적용
Point	PointAnimation	PointAnimationUsingKeyFrames	EllipseGeometry 등의 위치에 애니메이션 효과 적용
String	None	StringAnimationUsingKeyFrames	Textblock, button등의 Content/Text에 애니메이션 효과 적용

 

Storyboard

• 애니매이션을 구성하고 적용하는 방법
• 개체에 애니매이션을 적용하려면, StoryBoard를 만들고 TargetName및 속성을 TargetProtperty로 연결하여 애니메이션 효과를 적용

<Storyboard x:Key="test">
    <DoubleAnimation
        Storyboard.TargetName="MyRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5"
        AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
 
<EventTrigger RoutedEvent="Rectangle.Loaded" SourceName="MyRectangle">
    <BeginStoryboard Storyboard="{DynamicResource test}"/>
</EventTrigger>

• StoryBoard 종류

BeginStroryboard	Storyboard를 시작하는 Trigger Action
PauseStroryboard	BeginStoryboard를 일시정지하는 Trigger Action
ResumeStroryboard	일시정지한 BeginStoryboard를 다시 시작하는 Trigger Action
SeekStroryboard	BeginStoryboard의 활성시간 내 지정된 시간으로 건너뛰는 기능을 제공하는 Trigger Action
SkipStroryboardToFill	BeginStoryboard의 끝으로 채우는 Trigger Action
StopStroryboard	BeginStoryboard를 정지하는 Trigger Action
SetStoryboardSpeedRatio	Storyboard의 속도를 제어하는 Trigger Action

<Grid Background="Black">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <!-- This rectangle is animated. -->
            <Grid HorizontalAlignment="Center" Width="500">
                <Rectangle Name="myRectangle" Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
            </Grid>
            <!-- This StackPanel contains all the Buttons. -->
            <Grid Margin="0,0,0,0" Grid.Row="1">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>                   
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Button Name="BeginButton" Grid.Column="0" >Begin</Button>
                <Button Name="PauseButton" Grid.Column="1">Pause</Button>
                <Button Name="ResumeButton" Grid.Column="2">Resume</Button>
                <Button Name="SeekButton" Grid.Column="3">Seek</Button>
                <Button Name="SkipToFillButton" Grid.Column="4">Skip To Fill</Button>
                <Button Name="SetSpeedRatioButton" Grid.Column="5">Triple Speed</Button>
                <Button Name="StopButton" Grid.Column="6">Stop</Button>
                <Grid.Triggers>
 
                    <!-- Begin the Storyboard -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton">
                        <BeginStoryboard Name="MyBeginStoryboard">
                            <Storyboard >
                                <DoubleAnimation Storyboard.TargetName="myRectangle" Storyboard.TargetProperty="Width" Duration="0:0:5" From="100" To="700" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
 
                    <!-- Pause the Storyboard -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="PauseButton">
                        <PauseStoryboard BeginStoryboardName="MyBeginStoryboard" />
                    </EventTrigger>
 
                    <!-- Resume the Storyboard -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="ResumeButton">
                        <ResumeStoryboard BeginStoryboardName="MyBeginStoryboard" />
                    </EventTrigger>
 
                    <!-- Seek one second into the storyboard’s active period. -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="SeekButton">
                        <SeekStoryboard  BeginStoryboardName="MyBeginStoryboard" Offset="0:0:1" Origin="BeginTime" />
                    </EventTrigger>
 
                    <!-- Skip to Fill -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="SkipToFillButton">
                        <SkipStoryboardToFill BeginStoryboardName="MyBeginStoryboard" />
                    </EventTrigger>
 
                    <!-- Stop the Storyboard -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="StopButton">
                        <StopStoryboard BeginStoryboardName="MyBeginStoryboard" />
                    </EventTrigger>
 
                    <!-- Triple the speed of the Storyboard -->
                    <EventTrigger RoutedEvent="Button.Click" SourceName="SetSpeedRatioButton">
                        <SetStoryboardSpeedRatio SpeedRatio="3" BeginStoryboardName="MyBeginStoryboard" />
                    </EventTrigger>
                </Grid.Triggers>
            </Grid>           
        </Grid>