728x90
728x170
■ DoubleAnimation 클래스를 사용해 동심원 애니메이션을 만드는 방법을 보여준다.
▶ 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 클래스 : 동심원 애니메이션 만들기"
FontFamily="나눔고딕코딩"
FontSize="16">
<Grid>
<Canvas Width="400" Height="400">
<Path Name="innerPath"
Stroke="Red"
StrokeThickness="12.5">
<Path.Data>
<EllipseGeometry x:Name="ellipseGeometry1"
Center="200 200"
RadiusX="0"
RadiusY="0" />
</Path.Data>
</Path>
<Path
Stroke="Red"
StrokeThickness="12.5">
<Path.Data>
<GeometryGroup>
<EllipseGeometry x:Name="ellipseGeometry2"
Center="200 200"
RadiusX="25"
RadiusY="25" />
<EllipseGeometry x:Name="ellipseGeometry3"
Center="200 200"
RadiusX="50"
RadiusY="50" />
<EllipseGeometry x:Name="ellipseGeometry4"
Center="200 200"
RadiusX="75"
RadiusY="75" />
</GeometryGroup>
</Path.Data>
</Path>
<Path Name="outerPath"
Stroke="Red"
StrokeThickness="12.5">
<Path.Data>
<EllipseGeometry x:Name="ellipseGeometry5"
Center="200 200"
RadiusX="100"
RadiusY="100" />
</Path.Data>
</Path>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation
Storyboard.TargetName="innerPath"
Storyboard.TargetProperty="StrokeThickness"
Duration="0:0:5"
From="0"
To="12.5" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry1"
Storyboard.TargetProperty="RadiusX"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry1"
Storyboard.TargetProperty="RadiusY"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry2"
Storyboard.TargetProperty="RadiusX"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry2"
Storyboard.TargetProperty="RadiusY"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry3"
Storyboard.TargetProperty="RadiusX"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry3"
Storyboard.TargetProperty="RadiusY"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry4"
Storyboard.TargetProperty="RadiusX"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry4"
Storyboard.TargetProperty="RadiusY"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry5"
Storyboard.TargetProperty="RadiusX"
IsAdditive="True"
Duration="0:0:5"
From="0"
To="25" />
<DoubleAnimation
Storyboard.TargetName="ellipseGeometry5"
Storyboard.TargetProperty="RadiusY"
IsAdditive="True"
From="0"
To="25"
Duration="0:0:5" />
<DoubleAnimation
Storyboard.TargetName="outerPath"
Storyboard.TargetProperty="Opacity"
Duration="0:0:5"
From="1"
To="0" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</Grid>
</Window>728x90
그리드형(광고전용)
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] TextBox 엘리먼트 : 한글 입력 모드 설정하기 (0) | 2015.10.02 |
|---|---|
| [C#/WPF] PolyBezierSegment 엘리먼트 : 무지개 색 무한대 기호 만들기 (0) | 2015.10.01 |
| [C#/WPF] DoubleAnimation 엘리먼트 : 브러시 애니메이션 만들기 (0) | 2015.10.01 |
| [C#/WPF] DoubleAnimation 엘리먼트 : 펄스 애니메이션 만들기 (0) | 2015.10.01 |
| [C#/WPF] 움직이는 사각형 애니메이션 만들기 (0) | 2015.10.01 |
| [C#/WPF] AnimationClock 클래스 사용하기 (0) | 2015.10.01 |
| [C#/WPF] ControllableStoryboardAction 엘리먼트 사용하기 (0) | 2015.10.01 |
| [C#/WPF] Storyboard 엘리먼트 : TargetProperty 속성 사용하기 (0) | 2015.10.01 |
| [C#/WPF] Trigger 엘리먼트 : EnterActions/ExitActions 속성 사용하기 (0) | 2015.10.01 |
| [C#/WPF] EventTrigger 엘리먼트 : 마우스 진입/이탈시 버튼 폰트 크기 변경하기 (0) | 2015.10.01 |
