Silverlight Animation Example #1.

매우 간단한 애니메이션 예제입니다.
조그마한 Rectangle이 클릭한 위치로 움직이는 모션이에요.


일단 간단하게 Xaml 코드는 Canvas 만 있고 영역 밖을 넘어가면 숨기게 Clip을 설정했습니다.

<Canvas x:Name="LayoutRoot" Width="800" Height="600" Background="Black">         <Canvas.Clip>             <RectangleGeometry Rect="0, 0, 800, 600" />         </Canvas.Clip>     </Canvas>

LayoutRoot 가 로드하고 나면 Rectangle을 하나 만들어 보겠습니다.

Rectangle rec = null;         int keyNum = 0;         void LayoutRoot_Loaded(object sender, RoutedEventArgs e)         {             rec = new Rectangle();             rec.Width = 100;             rec.Height = 100;             Color col = Color.FromArgb(255, 255, 0, 0);             SolidColorBrush brush = new SolidColorBrush();             brush.Color = col;             rec.Fill = brush;             rec.VerticalAlignment = VerticalAlignment.Top;             rec.HorizontalAlignment = HorizontalAlignment.Left;             LayoutRoot.Children.Add(rec);         }

Canvas 에 클릭할 때 마다 움직이게 이벤트를 걸겠습니다.

void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)         {             double tmpX = e.GetPosition(this).X;             double tmpY = e.GetPosition(this).Y;             CreateAndRunAnimation(tmpX, tmpY);         }

CreateAndRunAnimation() 메소드는 다음과 같습니다.
좌표값을 던져주면 그 좌표로 이동하는 것입니다.
포인트는 변화하는 속성마다 DoubleAnimation 개체를 만들고 정의해 두어야 하는것입니다.

private void CreateAndRunAnimation(double moveX, double moveY)         {             Duration duration = new Duration(TimeSpan.FromMilliseconds(500));             DoubleAnimation myDoubleAnimation1 = new DoubleAnimation();             DoubleAnimation myDoubleAnimation2 = new DoubleAnimation();             myDoubleAnimation1.Duration = duration;             myDoubleAnimation2.Duration = duration;             Storyboard sb = new Storyboard();             sb.Duration = duration;             sb.Children.Add(myDoubleAnimation1);             sb.Children.Add(myDoubleAnimation2);             Storyboard.SetTarget(myDoubleAnimation1, rec);             Storyboard.SetTarget(myDoubleAnimation2, rec);                         Storyboard.SetTargetProperty(myDoubleAnimation1, new PropertyPath("(Canvas.Left)"));             Storyboard.SetTargetProperty(myDoubleAnimation2, new PropertyPath("(Canvas.Top)"));             myDoubleAnimation1.To = moveX;             myDoubleAnimation2.To = moveY;             LayoutRoot.Resources.Add("move_id" + keyNum++, sb);             sb.Completed += new EventHandler(sb_Completed);             sb.Begin();         }

애니메이션이 끝나면 꼭 리소스를 해제해야 합니다.

void sb_Completed(object sender, EventArgs e)         {             LayoutRoot.Resources.Clear();             keyNum = 0;         }

keyNum 변수는 애니메이션이 동작 중일때 클릭 이벤트가 또 발생하면 중복 리소스를 방지하기 위한 변수입니다.

정리.
LayoutRoot.Resource 자식에 Storyboard를 붙인뒤에, Storyboard.duration을 설정 하고, 그 자식으로 DoubleAnimiation을 붙입니다. DoubleAnimation 역시 duration 값을 설정하고, Target과 TargetProperty을 설정합니다.

SLAnimation.xap