참조: http://sparcs.kaist.ac.kr/~airlover/wpfe/Clock/
Tistory라서 왼쪽 Sidebar에 넣지 못하는 것을 안타깝게 생각합니다.
맨 위는 그냥 이미지고, 위의 링크를 타고 들어가시면 보실 수 있습니다.
WPF/E가 설치되지 않으신 분은 2007 Feb CTP 버전으로 설치하셔야 합니다.
다양한 예제가 많지만 시계가 재미있는 이유는.. WPF/E 애니매이션을 멋지게 넣을 있어서 입니다.
시계 바늘이 움직이는 것을 만들려면 보통의 방식대로 한다면 .. n초에 한번씩 초침, 분침, 시침의 위치를 조금씩 움직이는 것을 계산하여서 화면에 다시 그리기를 해야합니다.
WPF/E에서 애니메이션 기능을 쓰면 다음과 같이 구현할 수 있습니다.
시작 시각에 각 바늘의 위치를 지정해주고,
초침은 1분에 한 바퀴씩
분침은 1시간에 한바퀴씩
시침은 12시간에 한바퀴씩 돌도록 애니메이션을 구성하고,
Animation Start!를 하면 시계 제작이 끝납니다. 간단하죠?
<DoubleAnimation Storyboard.TargetName="Sec" Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:1:0" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="Min" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="1:0:0" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="Hour" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="12:0:0" RepeatBehavior="Forever"/>
- 위는 핵심 코드 중 일부From="0" To="360" Duration="0:1:0" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="Min" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="1:0:0" RepeatBehavior="Forever" />
<DoubleAnimation Storyboard.TargetName="Hour" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="12:0:0" RepeatBehavior="Forever"/>
만약 Javascript로만으로 시계를 구현했다면 (지금 Vista Sidebar Gadget이 그렇게 하고 있음)
1초보다 빠른 시간에 한번씩 Event를 발생시켜서 초침을 움직여야 해서 코드가 엄청 지저분 해졌겠지요.
(위험요소가 다분한) Timer Event가 하나도 쓰지 않고 구현한 WPF/E 시계 ... 재밌지 않은 가요?
( 나만 재밌나 -_- )
'내 생산물' 카테고리의 다른 글
| Silverlight로 만든 Tistory Clock Widget (0) | 2007/04/22 |
|---|---|
| 삼성경제연구소 북리뷰와 독서로그 (0) | 2007/04/12 |
| 네이버 미니 사전 북마크릿(Bookmarklet) (16) | 2007/03/27 |
| WPF/E로 만든 Clock Widget (2) | 2007/02/07 |
| PS Project 우승 (0) | 2006/08/29 |
| 제4회 카포전 AI(뿌요뿌요) 대회 1등 - Team 뽀셔뽀셔 (1) | 2006/08/15 |
| [TatterTools] 태그로 만드는 갤러리 (3) | 2006/08/12 |
