glycerine :: 서른의 시작 :: glycerine

Silverlight Animation Example #1.

Microsoft/Silverlight 2009. 1. 6. 09:35

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

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

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