머리카락 애니메이션 in iOS

블로그라기보다는 그냥 메모지 용도의 블로그였는데, ‘콩엄마’ 님의 궁금증에 답하는 용도로 쓰게 되네요..

일단 제가 한달 경험한 바로는 애플의 코어애니메이션은 매우 강력하고, 쉬운 툴이라는 것입니다.

제가 궁극적으로 만들려는 앱도 애니메이션이고, 만화책을 살짝 움직여보면 어떨까 하는 생각에서 애니메이션에 관심을 둔지 어언 5개월 이네요. ㅋㅋ

그동안 코로나 SDK 로도 머리카락 애니메이션을 테스트 해 보았습니다.

그런데, 코로나에는 직선은 있지만 (원도 있습니다만), 베지어 곡선은 없습니다. (제가 현재까지 아는 한) 그래서, 올 1월부터 코어 애니메이션을 파기 시작했죠.

암튼, 머리카락 애니는 ‘베지어 곡선’ 을 이용하면 됩니다. 코어애니메이션에는 베지어곡선이 두 종류 있는데요 (컨트롤 포인트가 1개/2개) 저는 그냥 2개짜리 썼습니다.

간단히 애니메이션 구현을 설명드리자면..

” 시점/종점/시점의 컨트롤포인트/종점의 컨트롤포인트  이 4점의 좌표를 정해서 path 를 정의하고, 애니메이션 할 위치의 4점 역시 정해서 path 를 정의한 후, 애니메이션의 fromValue, toValue 로 넘기면 됩니다. ”

간단하죠..  실제로도 간단합니다.

아래는 코드..

CABasicAnimation *connectorAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
// 곡선 애니메이션 "path" 으로 생성합니다.
connectorAnimation.duration = 2.0;  // 2초
connectorAnimation.autoreverses = YES; // 되돌아오는 옵션을 줌. 안그러면 한 쪽으로 계속 진행하니까..
connectorAnimation.fromValue = (__bridge id)manPath; // 시작 위치의 CGMutablePathRef 객체 전달. __bridge 는 ARC에서만 필요.
connectorAnimation.toValue = (__bridge id)manPathAni; // 끝 위치의 객체..
connectorAnimation.removedOnCompletion = YES; // 애니메이션 끝나면 없어지는 옵션
connectorAnimation.repeatCount = 8; //HUGE_VAL;  // 반복 회수. HUGE_VAL은 아시죠?..
[connectorAnimation setDelegate:self]; // animationDidStop 기동시키기위해서.. 끝난 후 뭔가 처리할 때. 투명하게 혹은 레이어 삭제 등.
[mlaBase addAnimation:connectorAnimation forKey:@"AnimaDelegate"]; // 레이어에 애니메이션 추가.

어때요.. 쉽죠?.. 궁금하신 점이 있다면 댓글 달아 주세요..

Advertisements

머리카락 애니메이션 in iOS”에 대한 2개의 생각

  1. 공부중인 학생인데요. 좋은 자료 감사합니다 (__)
    질문이 있는데요.
    (__bridge id)manPath 이게 시작되는 패스선
    (__bridge id)manPathAni 요게 끝나느 패스선 이자나요.
    위의 선에서 아래선으로 변형이되는건가요?

    아직 실행도 못해봐서요 ㅠㅠ.
    위의 manPath 는 어떻게 만드나요? 예시 부탁드립니다.
    검색을 CGMutablePathRef 로 해서 다른 걸 넣어봤는데 죄다 에러가 나서 말이죵 ㅠㅠ

    • 답변이 늦었네요..
      말씀하신게 맞습니다. manPath(곡선1)와 manPathAni(곡선2) 가 다르다면.. 곡선1에서 곡선2로 서서히 애니메이션이 됩니다. 길이가 다르다면 늘어나고, 두께가 다르면 변화하고..
      만약 두 곡선의 시점/종점을 바꿔 넣으면 끝점이 왕복하면서 애니메이션되겠죠.
      여러 가지를 테스트해보시면 재미있을 겁니다.
      그럼 멋진 프로그램 만드세요..

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중