왜 파워포인트 같은 데에서 애니메이션 만들다 보면 시계방향으로 보여주기 같은 거 있죠?
한번 실버라이트로 만들어봤는데 스토리보드만으로 만드는 것은 영 마음에 들지 않더군요.

우선 작동 완구와 소스 코드 부터…

시계 방향으로 회전하는 클리핑 애니메이션을 구현 하는 방법은 여러가지가 있는데요, 그 중에서 저는 삼각형 4개를 사용하여 순차적으로 삼각형의 한 꼭지점이 이동하는 방식을 사용했어요.

Clip 속성을 PathGemetry로 설정하고 그 안에 4개의 삼각형 Path를 통해 목표 엘리먼트를 사분면으로 분할했죠. 만약 특정 사분면을 완전히 보이지 않게 하려면 삼각형의 한 꼭지점을 다른 꼭지점과 겹쳐놓으면 되고 완전히 보이게 하려면 한 꼭지점을 두 선분이 직각을 이루도록 옮기면 되죠.

위의 작동 완구를 보시면 알 수 있듯이 왼쪽의 애니메이션은 클리핑의 진행속도가 일정하지 않은 것을 알 수 있어요. 왼쪽의 애니메이션은 다음과 같은 방법으로 작동해요.

1사분면에 있는 삼각형이 단순하게 첫번째 꼭지점에서 두번째 꼭지점으로 직선적으로 이동을 하는거죠.

이 방법의 장점은 오직 블렌드만 가지고도 비교적 간단하면서도 효과적으로 시계 방향 회전 애니메이션을 구현할 수 있다는 것이고요, 단점은 앞서 얘기한 것처럼 중앙부분에서 가장 빠르고 양 끝에서 살짝 느려지는 현상이에요.

이 문제를 해결하려면 다음과 같이 삼각형의 꼭지점이 원궤도를 따라서 이동하게 해야 하죠.

OnEnterFrame, Gameloop와 같은 FPS엔진을 하나 돌리고 매 프레임 마다 특정 좌표(중심점)를 기준으로 회전하는 좌표를 계산하여 각 삼각형을 이루는 클리핑 Path의 점을 이동하면 되죠. 공식은… 솔직히 수학에 젬병이라 모르겠고 ‘회전 좌표 계산’등으로 검색하면 공식과 함께 매우 간단한 소스코드도 널려 있어요. 허접하지만 제 코드를 참고할 수도 있겠고요.

물론 후자가 정확한 속도로 움직이므로 더 완벽하다고 할 수 있겠지만 추가적인 코드 작업이 필요하다는 단점이 있죠. 그래서 간단하게 ContentControl로 시계 방향으로 회전하면서 클리핑하는 패널을 만들어 봤어요. 사용 법도 간단해서 XAML에서도 사용 가능하죠.

<CircularClipper Duration="00:00:04" IsActivated="True">
    <Grid>
        <!—넣고 싶은 모든 종류의 비주얼 -->
    </Grid>
</CircularClipper>

그렇지만 딱 한번 쓰고 말거라면 그냥 스토리보드로 만드는 것도 나쁘지 않을 것 같아요. 무엇보다 머리 안쓰고 금방 만들 수도 있으니까요.

언제나 그렇지만, 테스트 해 보시고 더 좋은 방법이 있다면 공유해보아요~ ^^

저작자 표시 동일 조건 변경 허락
신고
Posted by gongdo


티스토리 툴바