'2008/10/28 글 목록

2008/10/28에 해당되는 글 2건

2008.10.28 :: VPL 기본 1. Hello World! 띄워보기!

2008.10.28 :: Dynamic Mouse Move Animation

2008. 10. 28. 22:00 :: MSRDS

아.. 이거 벌금의 압박으로 무조건 쓰게 되네요..-ㅁ-a;;;

ㄷㄷㄷㄷ

무서운 시그장님.. ㄷㄷ

오늘은 VPL로 C언어나 새로운 언어들을 배울때 가장 많이 시작하는 Hello World 를 화면에 표시하는 것을 할 것입니다.

VPL로 간단하게 어떻게 되는지.. 보시죵~

VPL 실행 방법은 다들 아시라 믿습니다만...-ㅁ-;; 설마.. 모르시는분은.. 설마.. -ㅁ-a

저번에도 올렸듯이... 비스타에서는 관리자권한으로 실행하시구요~~

File 메뉴에서 새로만들기 혹은 New를 선택하셔서 새 프로젝트를 만드시구요.

왼쪽 상단에 있는 Basic Activities에 있는 "Data" toolbox를 마우스로 끌어서 오른쪽의 빈 Diagram에 아무데나 원하는 곳에 놓으세요~

그리고 그 activity의 int 옆에 있는 드롭다운 리스트에서 string을 선택하시면 됩니다. 왜 그걸 선택하냐는... 설마..-ㅁ-aa

Hello World가 문자열이라서.. 설마..-ㅁ-aa

data avtivity의 텍스트 상자를 클릭하시면 입력 하실수 있는데 거기에 Hello World! 를 입력하시면 됩니다.

현재 까지 한 data activity 모습..-ㅁ-aa

그 다음에는...... 다음에는.....

화면에 표시할 다이얼로그 창을 가져와야..-ㅁ-a

왼쪽 아래의 Services 에서 아래로 쭈우우우우욱 내리시면 SimpleDialog 가 있습니다. 혹시 못 찾으시겠으면.. 아니면 내리는게 귀찮다거나 하시면~~ Services의 아래에 Find service ... 에 입력을 해서 검색 하시면 됩니다. 찾으시면~~! 그 것을 오른쪽 Diagram창에 끌어 오세요~

그 위치는 어디에 있어도 상관 없습니다. 그리고 data activity와 SimpleDialog를 연결합니다.

아 어떻게 연결하시는지 모르시겠으면... Data activity의 오른쪽에 보면 주황색 네모가 있습니다. 그 네모를 클릭해서 SimpleDialog의 왼쪽 네모에 붙이시면 자동으로 연결이 됩니다...!! 참.. 쉽죠.. 라고 말해야 하나.-ㅁ-a 설마...

그러면 Connections 라는 Dialog 창이 뜹니다. 거기서~~!

첫번째 항목... 즉, From에서 DaraValue를 선택하시고.. 그거 하나 밖에 없지만...

두번째 항목에서는 AlertDialog를 선택합니다. 왜냐구요??

그냥 뭐 알람 창 같은 모양에 Hello World!를 띄우기 위해서~~

ConfirmDialog도 실행하면 똑같습니다만... -ㅁ-;;; PromptDialog는 뭔가 입력을 받을때 쓰구요~!

Connections Dialog의 모습입니다.

일단 여기서 OK하시면~~! Data Connections Dialog창이 뜹니다.

그러면 Value 드롭다운하는 리스트에서 value를 선택합니다.

그렇게 함으로써~~ Data Activity에 있는 값이 Alert Form에 띄울 메시지 텍스트로 보내집니다.

현재 단계 까지 실행한 다이어그램의 모습입니다.

이렇게 되셨다면!!!!!!!!!!!! 실행을 실행을 실행을~~~!!

실행방법은 Run메뉴에 있는 Start 를 실행하거나 아니면 Help 메뉴 아래에 위치한 화살표 모양을 실행시켜도 되고... 그것마저.. 귀찮으시다면.. F5누르셔도 됩니다..;;;;-ㅁ-;;

프로젝트 저장을 안했을 것인데요.. 안했으면 저장 다이얼로그를 열어줘서 거기서 프로젟트 이름을 원하는대로 하시고 save하시면 됩니다.

그러고 나서 어플리케이션을 실행시키는데...! 그 과정이 끝나면..!

Hello World! 가 쓰여저 있는 simple alert dialog 상자가 뜹니다.

바로 이렇게요!

이렇게 떳으면 완성!!

종료 하고 싶으시면 Run dialog에 있는 stop을 실행시키면 됩니다 -ㅁ-a

우후후훗.. 오늘은 여기까지!!!

너무 쉬워서 글쎄 너무 뭐 한것도 없어서.. 에휴...

욕먹지 않으려나.. 에라잇 ..-_-;

Dynamic Mouse Move Animation

2008. 10. 28. 00:00 :: Advanced WPF

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

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

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

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

view plain copy to clipboard print ?

<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">
<CANVAS Width="400" Height="400">
<CANVAS.RESOURCES>
<STYLE TargetType="Image">
<Setter Property="Width" Value="400"/>
<Setter Property="Height" Value="400"/>
<Setter Property="Source" Value="character.JPG"/>
</STYLE>
<STYLE TargetType="Canvas">
<Setter Property="Background" Value="White"/>
<Setter Property="Width" Value="400"/>
<Setter Property="Height" Value="400"/>
</STYLE>
</CANVAS.RESOURCES>
<CANVAS MouseMove="ImageTop_MouseMove">
<IMG x:Name="ImageTop">
<CANVAS.CLIP>
<RECTANGLEGEOMETRY Rect="0,0,400,100" />
</CANVAS.CLIP>
</CANVAS>
<CANVAS MouseMove="ImageTopBottom_MouseMove">
<IMG x:Name="ImageTopBottom">
<CANVAS.CLIP>
<RECTANGLEGEOMETRY Rect="0,100,400,100" />
</CANVAS.CLIP>
</CANVAS>
<CANVAS MouseMove="ImageBottomTop_MouseMove">
<IMG x:Name="ImageBottomTop">
<CANVAS.CLIP>
<RECTANGLEGEOMETRY Rect="0,200,400,100" />
</CANVAS.CLIP>
</CANVAS>
<CANVAS MouseMove="ImageBottom_MouseMove">
<IMG x:Name="ImageBottom">
<CANVAS.CLIP>
<RECTANGLEGEOMETRY Rect="0,300,400,100" />
</CANVAS.CLIP>
</CANVAS>
</CANVAS>
</WINDOW>

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

view plain copy to clipboard print ?

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);
}
}

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를 주어서 약간의 관성을 주었습니다. 기타 궁금하신 사항은 리플이나 메일로 주시면 답변 해드리도록 하겠습니다.

Notice*

Calendar

Category

Recently Article

Tag

Recently reply

Recently Trackbacks

Link

Search

티스토리툴바