■ SizeAnimationUsingKeyFrames 엘리먼트에서 키 프레임을 사용해 크기 값에 애니메이션 효과를 주는 방법을 보여준다.
▶ MainWindow.xaml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<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"> <Path HorizontalAlignment="Center" VerticalAlignment="Center" StrokeThickness="3" Stroke="Black"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigureCollection> <PathFigure StartPoint="100 200"> <PathFigure.Segments> <PathSegmentCollection> <ArcSegment x:Name="arcSegment" SweepDirection="Clockwise" Point="500 200" Size="90 80" /> </PathSegmentCollection> </PathFigure.Segments> </PathFigure> </PathFigureCollection> </PathGeometry.Figures> </PathGeometry> </Path.Data> <Path.Triggers> <EventTrigger RoutedEvent="Path.Loaded"> <BeginStoryboard> <Storyboard> <SizeAnimationUsingKeyFrames Storyboard.TargetName="arcSegment" Storyboard.TargetProperty="Size" RepeatBehavior="Forever" AutoReverse="True"> <SizeAnimationUsingKeyFrames.KeyFrames> <LinearSizeKeyFrame KeyTime="00:00:00.5" Value="120 120" /> <DiscreteSizeKeyFrame KeyTime="00:00:01" Value="150 150" /> <SplineSizeKeyFrame KeyTime="00:00:03" Value="300 300" KeySpline="0.6 0.0 0.9 0.00" /> </SizeAnimationUsingKeyFrames.KeyFrames> </SizeAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </Path.Triggers> </Path> </Window> |