Dynamic Mouse Move Animation

예전에 인터넷에서 플래시로 한번 봤었던 내용인데 실습용으로 괜찮을거 같아서 한번 구현해 보았습니다. 하나의 그림을 총 4부분으로 나누어서 출력하고 마우스의 움직임에 따라서 마우스와의 거리에 따라 영역이 따라오는 속도를 조절하는 내용입니다. 마땅히 떠오르는 제목이 없어서.. 다이나믹 마우스 무브 애니메이션이라고 했지만.. 그냥 마우스 따라다니는 그림 정도라 할수도 있겠습니다..

아래는 시연 동영상 입니다.



컴퓨터 화면을 촬영한것이라서 많이 버벅대는 느낌이 있어서 조금 아쉽습니다..

아래는 XAML 소스코드입니다.

view plaincopy to clipboardprint?

1. <WINDOW title="Mouse Move Here!! - WPF KOREA!!" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" ResizeMode="NoResize" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="MouseOver.Window1" Width="400" Height="450" Background="White">  
2.     <CANVAS Width="400" Height="400">  
3.   
4.         <CANVAS.RESOURCES>  
5.             <STYLE TargetType="Image">  
6.                 <Setter Property="Width" Value="400"/>  
7.                 <Setter Property="Height" Value="400"/>  
8.                 <Setter Property="Source" Value="character.JPG"/>  
9.             </STYLE>  
10.             <STYLE TargetType="Canvas">  
11.                 <Setter Property="Background" Value="White"/>  
12.                 <Setter Property="Width" Value="400"/>  
13.                 <Setter Property="Height" Value="400"/>  
14.             </STYLE>  
15.         </CANVAS.RESOURCES>  
16.            
17.         <CANVAS MouseMove="ImageTop_MouseMove">  
18.             <IMG x:Name="ImageTop">  
19.             <CANVAS.CLIP>  
20.                 <RECTANGLEGEOMETRY Rect="0,0,400,100" />  
21.             </CANVAS.CLIP>  
22.         </CANVAS>  
23.   
24.         <CANVAS MouseMove="ImageTopBottom_MouseMove">  
25.             <IMG x:Name="ImageTopBottom">  
26.             <CANVAS.CLIP>  
27.                 <RECTANGLEGEOMETRY Rect="0,100,400,100" />  
28.             </CANVAS.CLIP>  
29.         </CANVAS>  
30.         <CANVAS MouseMove="ImageBottomTop_MouseMove">  
31.             <IMG x:Name="ImageBottomTop">  
32.             <CANVAS.CLIP>  
33.                 <RECTANGLEGEOMETRY Rect="0,200,400,100" />  
34.             </CANVAS.CLIP>  
35.         </CANVAS>  
36.         <CANVAS MouseMove="ImageBottom_MouseMove">  
37.             <IMG x:Name="ImageBottom">  
38.             <CANVAS.CLIP>  
39.                 <RECTANGLEGEOMETRY Rect="0,300,400,100" />  
40.             </CANVAS.CLIP>  
41.         </CANVAS>  
42.            
43.     </CANVAS>  
44.   
45. </WINDOW>  

아래는 C# 소스코드입니다.

view plaincopy to clipboardprint?

1. public partial class Window1 : Window   
2. {   
3.     public Window1()   
4.     {   
5.         InitializeComponent();   
6.   
7.         Canvas.SetLeft(ImageTop, 0);   
8.         Canvas.SetLeft(ImageTopBottom, 0);   
9.         Canvas.SetLeft(ImageBottomTop, 0);   
10.         Canvas.SetLeft(ImageBottom, 0);   
11.   
12.     }   
13.   
14.     DoubleAnimation TopMoveAnimation = new DoubleAnimation();   
15.     DoubleAnimation TopBottomMoveAnimation = new DoubleAnimation();   
16.     DoubleAnimation BottomTopMoveAnimation = new DoubleAnimation();   
17.     DoubleAnimation BottomMoveAnimation = new DoubleAnimation();   
18.        
19.     private void ImageBottom_MouseMove(object sender, MouseEventArgs e)   
20.     {   
21.         SetAnimationPosition(e.GetPosition(this).X);   
22.   
23.         TopMoveAnimation.SpeedRatio = 0.5;   
24.         TopBottomMoveAnimation.SpeedRatio = 1;   
25.         BottomTopMoveAnimation.SpeedRatio = 2;   
26.         BottomMoveAnimation.SpeedRatio = 4;   
27.   
28.         BeginAnimation();   
29.     }   
30.   
31.     private void ImageBottomTop_MouseMove(object sender, MouseEventArgs e)   
32.     {   
33.         SetAnimationPosition(e.GetPosition(this).X);   
34.   
35.         TopMoveAnimation.SpeedRatio = 0.5;   
36.         TopBottomMoveAnimation.SpeedRatio = 2;   
37.         BottomTopMoveAnimation.SpeedRatio = 4;   
38.         BottomMoveAnimation.SpeedRatio = 1;   
39.   
40.         BeginAnimation();   
41.     }   
42.   
43.     private void ImageTopBottom_MouseMove(object sender, MouseEventArgs e)   
44.     {   
45.         SetAnimationPosition(e.GetPosition(this).X);   
46.   
47.         TopMoveAnimation.SpeedRatio = 2;   
48.         TopBottomMoveAnimation.SpeedRatio = 4;   
49.         BottomTopMoveAnimation.SpeedRatio = 1;   
50.         BottomMoveAnimation.SpeedRatio = 0.5;   
51.   
52.         BeginAnimation();   
53.     }   
54.   
55.     private void ImageTop_MouseMove(object sender, MouseEventArgs e)   
56.     {   
57.         SetAnimationPosition(e.GetPosition(this).X);   
58.   
59.         TopMoveAnimation.SpeedRatio = 4;   
60.         TopBottomMoveAnimation.SpeedRatio = 2;   
61.         BottomTopMoveAnimation.SpeedRatio = 1;   
62.         BottomMoveAnimation.SpeedRatio = 0.5;   
63.   
64.         BeginAnimation();   
65.     }   
66.   
67.     private void SetAnimationPosition(double LeftPosition)   
68.     {   
69.         LeftPosition -= 200;   
70.         TopMoveAnimation.To = LeftPosition;   
71.         TopBottomMoveAnimation.To = LeftPosition;   
72.         BottomTopMoveAnimation.To = LeftPosition;   
73.         BottomMoveAnimation.To = LeftPosition;   
74.     }   
75.   
76.     private void BeginAnimation()   
77.     {   
78.         ImageTop.BeginAnimation(Canvas.LeftProperty, TopMoveAnimation, HandoffBehavior.Compose);   
79.         ImageTopBottom.BeginAnimation(Canvas.LeftProperty, TopBottomMoveAnimation, HandoffBehavior.Compose);   
80.         ImageBottomTop.BeginAnimation(Canvas.LeftProperty, BottomTopMoveAnimation, HandoffBehavior.Compose);   
81.         ImageBottom.BeginAnimation(Canvas.LeftProperty, BottomMoveAnimation, HandoffBehavior.Compose);   
82.     }   
83. }  

public partial class Window1 : Window
{
    public Window1()
    {
        InitializeComponent();

        Canvas.SetLeft(ImageTop, 0);
        Canvas.SetLeft(ImageTopBottom, 0);
        Canvas.SetLeft(ImageBottomTop, 0);
        Canvas.SetLeft(ImageBottom, 0);

    }

    DoubleAnimation TopMoveAnimation = new DoubleAnimation();
    DoubleAnimation TopBottomMoveAnimation = new DoubleAnimation();
    DoubleAnimation BottomTopMoveAnimation = new DoubleAnimation();
    DoubleAnimation BottomMoveAnimation = new DoubleAnimation();
    
    private void ImageBottom_MouseMove(object sender, MouseEventArgs e)
    {
        SetAnimationPosition(e.GetPosition(this).X);

        TopMoveAnimation.SpeedRatio = 0.5;
        TopBottomMoveAnimation.SpeedRatio = 1;
        BottomTopMoveAnimation.SpeedRatio = 2;
        BottomMoveAnimation.SpeedRatio = 4;

        BeginAnimation();
    }

    private void ImageBottomTop_MouseMove(object sender, MouseEventArgs e)
    {
        SetAnimationPosition(e.GetPosition(this).X);

        TopMoveAnimation.SpeedRatio = 0.5;
        TopBottomMoveAnimation.SpeedRatio = 2;
        BottomTopMoveAnimation.SpeedRatio = 4;
        BottomMoveAnimation.SpeedRatio = 1;

        BeginAnimation();
    }

    private void ImageTopBottom_MouseMove(object sender, MouseEventArgs e)
    {
        SetAnimationPosition(e.GetPosition(this).X);

        TopMoveAnimation.SpeedRatio = 2;
        TopBottomMoveAnimation.SpeedRatio = 4;
        BottomTopMoveAnimation.SpeedRatio = 1;
        BottomMoveAnimation.SpeedRatio = 0.5;

        BeginAnimation();
    }

    private void ImageTop_MouseMove(object sender, MouseEventArgs e)
    {
        SetAnimationPosition(e.GetPosition(this).X);

        TopMoveAnimation.SpeedRatio = 4;
        TopBottomMoveAnimation.SpeedRatio = 2;
        BottomTopMoveAnimation.SpeedRatio = 1;
        BottomMoveAnimation.SpeedRatio = 0.5;

        BeginAnimation();
    }

    private void SetAnimationPosition(double LeftPosition)
    {
        LeftPosition -= 200;
        TopMoveAnimation.To = LeftPosition;
        TopBottomMoveAnimation.To = LeftPosition;
        BottomTopMoveAnimation.To = LeftPosition;
        BottomMoveAnimation.To = LeftPosition;
    }

    private void BeginAnimation()
    {
        ImageTop.BeginAnimation(Canvas.LeftProperty, TopMoveAnimation, HandoffBehavior.Compose);
        ImageTopBottom.BeginAnimation(Canvas.LeftProperty, TopBottomMoveAnimation, HandoffBehavior.Compose);
        ImageBottomTop.BeginAnimation(Canvas.LeftProperty, BottomTopMoveAnimation, HandoffBehavior.Compose);
        ImageBottom.BeginAnimation(Canvas.LeftProperty, BottomMoveAnimation, HandoffBehavior.Compose);
    }
}

간단하게 설명을 하자면, Canvas위에 Image를 영역별로 Clip해서 출력한 뒤 Canvas의 마우스 이벤트에 따라서 Animation을 적용한 것입니다. 수동으로 SpeedRatio를 수정해서 반응속도를 조절했습니다. 보다 자연스러운 Animation을 위해서 BeginAnimation을 호출할 때 HandoffBehavior를 주어서 약간의 관성을 주었습니다. 기타 궁금하신 사항은 리플이나 메일로 주시면 답변 해드리도록 하겠습니다.