본문 바로가기

Programming/WPF

Animation(복합 움직임 다양한 움직임), Path

zzarungna 2012. 3. 21. 17:04

<Window x:Class="WPFEx.Animation20"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Animation20" Height="300" Width="800">

<!--

애니메이션 객체(Timeline)

1. DoubleAnimation : 값 => 값(등속, 가속, 감속)

2. DoubleAnimationUsingKeyFrames : 구간별 값의 변화

3. DoubleAnimationUsingPath : Path값에 값의 변화

-->

<Canvas>

<Rectangle Width="30" Height="30" Fill="Red">

<Rectangle.Triggers>

<EventTrigger RoutedEvent="Rectangle.MouseDown">

<BeginStoryboard>

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="(Canvas.Left)" From="0" To="760" Duration="0:0:10" RepeatBehavior="Forever" AutoReverse="True" />

<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Canvas.Top)" Duration="0:0:2" RepeatBehavior="Forever" AutoReverse="True">

<LinearDoubleKeyFrame KeyTime="0:0:0" Value="0" />

<LinearDoubleKeyFrame KeyTime="0:0:0.5" Value="50" />

<LinearDoubleKeyFrame KeyTime="0:0:1" Value="245" />

<LinearDoubleKeyFrame KeyTime="0:0:1.5" Value="50" />

<LinearDoubleKeyFrame KeyTime="0:0:2.0" Value="0" />

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Rectangle.Triggers>

</Rectangle>

</Canvas>

</Window>

<Window x:Class="WPFEx.Animation21"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Animation21" Height="300" Width="300">

<Window.Resources>

<PathGeometry x:Key="path1" Figures="M 0, 30 A 30,30 180 0 1 60, 30 30,30 180 0 1 0 ,30" />

</Window.Resources>

<Canvas>

<!--

패스 : 좌표의 집합

=> 직선, 도형, 곡선 등

-->

<Path Stroke="Yellow" StrokeThickness="5" Data="{StaticResource path1}">

<Path.RenderTransform>

<TranslateTransform X="100" Y="150" />

</Path.RenderTransform>

</Path>

<Path Stroke="Red" StrokeThickness="2" Data="{StaticResource path1}" />

</Canvas>

</Window>

Path = 포인터 배열 첫번쨰 값을 x좌표에 대입 두번째 점 가져오서 x좌표에 대입 모든 점을 연결해주는 속성은 : DoubleAnimationUsingPath

<Window x:Class="WPFEx.Animation23"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Animation23" Height="800" Width="500">

<Window.Resources>

<PathGeometry x:Key="path1" Figures="M30,53 C35.136359,44.211119 27.42993,46.428028 41,41 46.957307,38.617077 51.938414,36.65316 58,35 68.685001,32.085909 74.632603,30.11366 85,39 109.06847,59.630121 110.36418,59.674628 79,100 68.767747,113.15575 60.394744,128.00657 50,141 45.159602,147.0505 43,150.49029 43,159 43,164.96601 42.557929,166.21623 47,171 56.731964,181.48058 70.575944,174.35759
87,176 112.43744,178.54374 129.75155,182.46817 155,173 179.85091,163.68091 203.18153,151 231,151 252.63423,151 261.64783,132.83045 266,172 268.26779,192.41014 267.27129,204.42019 254,223 235.94141,248.28203 215.66829,267.3322 189,286 173.8926,296.57518 147.37162,288.74324 162,318 172.35952,338.71904 170.28172,333 199,333 206.32772,333
222.13284,344.43358 195,358 183.36839,363.8158 180.9794,364 168,364 158.76567,364 158.44383,370.66295 156,356 151.60796,329.64777 179.3151,323.64041 223,320 254.2845,317.39296 257.11318,312.00466 274,350 290.88418,387.98941 228.39953,413 150,413 129.89716,413 103.57746,425.78873 84,416 58.462608,403.2313 58.894869,375.63079 65,339
70.324615,307.05231 88.551803,295.04016 115,273 151.16167,242.86527 196.05385,209.42596 224,171 235.58592,155.06936 259.76929,150.50551 216,138 198.24002,132.92572 182.20395,123.5921 169,150 155.98512,176.02976 143.51815,187.62119 191,214 224.43195,232.57331 232.06519,231.20926 274,205 292.87617,193.20239 312.2373,182.73161 323,163 332.44044,145.69252 338,134.90289
338,114 338,103.72165 321.93013,76.559959 301,83 286.93839,87.326648 284,87.891629 284,107 284,135.00136 289.3678,145.01599 335,147 416.51143,150.54398 471.25104,107.87448 547,70 499.92255,70 483.73989,82.612715 439,102 405.7629,116.40275 372.40553,124.59447 346,151 424.9484,151 496.69256,136.81394 575,124 604.7982,119.12393
644.93289,119.55033 671,100 597.33099,100 566.8559,130.21383 501,168 475.4493,182.66024 436.73208,190.26792 416,211 453.03183,211 483.8769,197.9915 520,188 550.11972,179.66901 585.81699,175.0915 614,161 613,161 611.99251,160.87782 611,161 604.17964,161.83962 597.61158,164.12672 591,166 517.97862,186.68939 440.24204,206.49267 368,230
347.45805,236.68429 310.94261,249.05739 294,266 313.96714,266 334.05772,266.90647 354,266 369.0409,265.31632 390.03128,258.53692 403,255 452.17942,241.58743 509.99504,234.80198 557,216 495.79586,216 440.35888,232.54704 382,252 418.89427,252 455.50785,247.96192 492,240 532.84163,231.0891 576.7259,212 619,212 607.52481,200.52481 522.84878,261.23966
505,269 485.48262,277.48582 469.83277,280.90785 453,294 446.92118,298.72797 441.45616,300.26303 440,309 438.50996,317.94024 498.54779,320.25137 512,319 550.52333,315.41643 589.85998,303.33392 625,285 632.52468,281.07408 639.10448,281.13431 642,271 643.85022,264.52425 641.73106,264.92144 627,263 575.77781,256.31885 544.23884,265.61871 495,288 477.48895,295.95957
461.96393,305.03607 448,319 480.77307,319 511.67465,307.44178 543,297 516.94816,297 489.53212,303 465,303 493.73654,308.74731 525.95507,292 556,292 554,292.66667 552.03262,293.44062 550,294 528.94498,299.79439 507.18576,302.70356 486,308 479.14768,309.71308 472.61349,312.51994 466,315 464.6042,315.52342 462.78371,315.73192 462,317
461.64951,317.5671 462,318.33333 462,319 478.75613,319 504.35885,325.82057 520,318 511.13669,318 509.5023,316.4977 502,324 510.30613,332.30613 534.5281,326 548,326 566.45477,326 586.86183,329.53454 605,325 572.9348,325 549.14831,337.95056 519,348 535.26344,364.26344 581.48389,343 606,343 593.28018,343 581.97566,343.01217
570,349 577.66667,349 585.33333,349 593,349 581.81331,349 571.10914,358 616,358 612.59069,359.02279 553.11658,371.37219 585,382 596.73005,385.91002 605.58993,387 618,387 607.83527,387 602.2498,385.10008 595,388 612.1254,393.70847 626.57294,395 645,395 636.34669,399.32665 626.77848,401.61076 618,406 627.69547,415.69547
645.04856,412 660,412 659.66667,412.33333 659.33333,412.66667 659,413 675.23864,421.11932 671.16257,421 694,421 688.68774,421 684.20309,420.26564 679,422 681.33333,422 683.66667,422 686,422 684,422.66667 681.94771,423.19323 680,424 678.62276,424.57047 677.33333,425.33333 676,426 677,426 678,426 679,426
678.36086,426.38348 677.60466,426.56418 677,427 676.61758,427.27564 676.29448,427.63189 676,428 691.08197,428 704.0128,436 720,436 719.66667,436.33333 719.33333,436.66667 719,437" />

</Window.Resources>

<Canvas>

<Path Stroke="Black" StrokeThickness="3" Data="{StaticResource path1}" />

<Button Content="슈웅~" Width="80" Height="30" RenderTransformOrigin="0.5,0.5">

<Button.RenderTransform>

<TransformGroup>

<TranslateTransform x:Name="tTrans" />

<RotateTransform x:Name="rTrans" />

<TranslateTransform X="-40" Y="-15" />

</TransformGroup>

</Button.RenderTransform>

<Button.Triggers>

<EventTrigger RoutedEvent="Button.Click">

<BeginStoryboard>

<Storyboard>

<DoubleAnimationUsingPath

Storyboard.TargetProperty="(Canvas.Left)"

Duration="0:0:10" AutoReverse="True"

RepeatBehavior="10x"

PathGeometry="{StaticResource path1}"

Source="X"

/>

<DoubleAnimationUsingPath

Storyboard.TargetProperty="(Canvas.Top)"

Duration="0:0:10" AutoReverse="True"

RepeatBehavior="10x"

PathGeometry="{StaticResource path1}"

Source="Y"

/>

<DoubleAnimationUsingPath

Storyboard.TargetName="rTrans"

Storyboard.TargetProperty="Angle"

Duration="0:0:10" AutoReverse="True"

RepeatBehavior="10x"

PathGeometry="{StaticResource path1}"

Source="Angle"

/>

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</Canvas>

</Window>

저작자표시

티스토리툴바