[Expression Blend] Button에 따른 애니메이션 생성

계속된 예제 복습입니다. 이번 포스트에서 다룰 내용은 Button을 StackPanel상에 집어넣어서 애니메이션 효과를 줘보려고 합니다. 우선 애니메이션을 사용하려면 Storyboard를 잘 다룰줄 알아야 합니다.물론 이전 포스트들을 계속 지켜봤다면야 금방할 겁니다. 

 이번 시간의 주제는 버튼을 눌렀을 때 포인트가 되는 원이 자신이 원하는 방향으로 움직이게끔 하는겁니다. 하나씩 따라해봅시다.  일단 Wpf Applicaiton으로 Animation이란 프로젝트를 하나 생성합니다. 그리고 Grid를 하나 임의로 생성한 후 그 안에 Rectangle과 TextBlock을 하나 삽입해줍니다. 뭐 쉬운 방법으로 Rectangle과 TextBlock을 Grid로 묶는 방법이 되겠지요. Object 창에서는 다음과 같이 구성되면 되겠습니다.

그 후에 내용물을 1이라고 채운 후에 적당하게 꾸며주면 되겠습니다. 저 같은 경우는 아래와 같이 꾸몄습니다.

위를 복사해서 4개를 만든 후에 다음과 같이 배치해줍니다. 

이렇게 한다면 Grid로 쌓인 Rectangle과 TextBlock이 4개로 구성되고 있을 겁니다. 여기다가 가운데에 Ellipse를 하나 삽입해줍니다. 이건 버튼 애니메이션을 통해서 어느 버튼을 선택했는지를 상대적으로 보여줄 겁니다. 

자 그리고 구석에 StackPanel을 삽입한 후 그 안에 버튼을 4개 삽입합니다. StackPanel을 선택한 상태에서 Button버튼을 누르게 되면 자동으로 칸을 채우면서 쌓이게 됩니다. Vertical로 하던 Horizontal로 하던 상관없습니다. 단지 버튼만 넣고 다음과 같이 표현해주면 됩니다.

자 이제 버튼을 눌렀을 때 애니메이션이 동작하게끔 해줘야 하는데 이때 필요한 Asset이 바로 ControlStoryboardAction입니다. 아마 Assets창에서 Behavior창에 찾다보면 해당 Asset이 있을겁니다. 

이걸 각 버튼에 삽입해줍니다. 아마 Object창에서 각 버튼마다 삽입하면 다음과 같이 배열될 겁니다.

이 것이 바로 해당 요소와 StoryBoard를 연결시켜주는 매개체라고 할 수 있습니다. 

이제는 StoryBoard를 만들어야 합니다. 당연히 1을 눌렀을 때는 1로 가는 모션을, 각 버튼을 눌렀을 때는 해당 버튼의 숫자가 가리키는 쪽으로 원이 움직여야 하겠지요. 이를 위해서는 StoryBoard를 4개로 만들어서 버튼마다 다른 이벤트를 주게끔 해야 합니다. 일단 1이라는 Storyboard를 만듭니다. 만드는 방법은 Timeline창의 + 버튼을 삽입해주면 됩니다. 

1이라고 만들고 우선은 애니메이션을 조작해야 하니까 전체창을 Animation에 맞게 배치하는게 좋을 것 같습니다. 그건 Window메뉴의 WorkSpace에서 Animation을 선택해서 Timeline이 길게 된 형태를 취해주면 되겠지요.

일단 1의 Storyboard를 만드는거니 Timeline에서 원하는 시간을 선택하고 눌러줍니다. 그러면 해당칸에 있다는 노란색 줄이 표시되게 됩니다. 이때 원을 1쪽으로 끌게 되면 그것으로 하나의 애니메이션이 생성되는 겁니다.

해당 시간대에 원하는 위치를 지정해주면 Timeline쪽에서 위와 같이 하나의 키프레임이 생성되는 것을 볼수 있습니다. 이걸 확인하려면 재생 버튼을 눌러보면 되겠지요.

 너무 간단하지만 이걸로 애니메이션은 끝입니다. +버튼 옆에 있는 x버튼을 눌러줘서 애니메이션을 빠져나옵니다. 이와 같은 방식으로 2,3,4에 대한 Storyboard도 생성해줍니다. 그냥 원하는 시간을 선택한 후에 원의 위치를 바꿔줌으로써 키프레임이 생성되는 것만 확인하시면 됩니다.

이로써 여러분들은 4개의 애니메이션을 생성했습니다. 자 이제 아까 만든 ControlStoryboardAction을 건드려야 합니다. 버튼 1의 요소를 선택하면 Properties 창에 다음과 같이 뜨는데 해당 칸을 1로 채워주면 됩니다.

나머지 버튼에 대한 ControlStoryboardAction도 각각 설정해주면 그걸로써 끝나게 됩니다. 

겉보기에는 이게 다인 것 같지요? 그런데 이게 다가 아닙니다. 몇가지를 더 해줘야 합니다.  자 일단 하나의 StoryBoard를 열어봅니다. 

그러면 위와 같이 되있을 겁니다. 그런데 뭔가 이 상태로 실행시켜보면 이상한 결과가 나올겁니다. 1인 상태에서 2나 4를 누르면 그 쪽으로 가는게 아니라 제자리에서 움직입니다. 바로 이게 위와 같은 이유입니다. 

 실상 원하는 위치로 가기 위해서는 그 지점의 위치값을 알아야 합니다. 만약 기존의 값과 비교해서 x와 y가 다르다면 그점을 움직여서라도 이동하는게 하나의 translation이 되겠지요. 그런데 위와 같이 y만 변하게 된다는 건 그 값을 향해 이동하되 x값은 그대로 유지가 된다는 뜻입니다. 이는 결과 x도 동시에 이동시켜줘야 한다는 것이죠.

 실상 이걸 해결하려면 간단합니다. 위와 같은 경우에선 원을 선택한 상태에서 좌우 화살표를 한번씩 눌러주면 원은 원래 상태를 유지하지만 위의 Translation은 바뀌게 됩니다.

 

그런데 위와 같이 하면 0초 일때도 변한 생태를 유지하는 것이 되기 때문에 0초일때의 키프레임은 제거해주도록 합니다.

나머지 애니메이션도 동일하게 수정해줍니다. 만약 X만 나와있는 상태라면 상하 화살표를 한번씩만 눌러주면 되게끔 말이죠. 이로써 StoryBoard를 수정했습니다.

 마지막으로 한가지가 더 남아있습니다. 아마 실행시키면 처음부터 애니메이션이 실행되게 될겁니다. 하지만 저희가 원하는 건 처음에는 가운데에 원이 위치하게끔 하는 것이지요. 이를 위해서는 초기 상태에 대한 설정이 필요합니다. 

아마 Trigger라는 항목을 들어가게 되면 위와 같이 윈도우가 Load됬을때 각 Storyboard가 실행되는 걸로 되어 있습니다. 이게 기본 상태인 것이죠. 이걸 다 제거해줍니다. 옆의 -버튼만 눌러주면 됩니다. 

 이제 정말로 끝입니다. 한번 결과를 확인해보겠습니다. 

여기에 지난 시간에 잠깐 언급했던 버튼 인터렉션을 주게 된다면 조금더 멋진 컨트롤이 완성될 겁니다. 

여기까지 였습니다.