저번 포스팅에서는 PaintCode 를 다루는 방법을 살펴보았습니다.
이 포스팅은 "사용성 최대로 올려보자!"의 Series 중 일부입니다.
1. iOS 사용성 최대로 올려보자! (Part1) - PaintCode
2. iOS 사용성 최대로 올려보자! (Part2) - ShapeShifter
3. iOS 사용성 최대로 올려보자! (Part3) - UIView Interactive Animation
4. iOS 사용성 최대로 올려보자! (Part4) - UIViewController Non Interactive Transition
5. iOS 사용성 최대로 올려보자! (Part5) - Easing function
6. iOS 사용성 최대로 올려보자! (Final) - UIViewController Interactive Transition
먼저, 이번 포스트에서 우리가 진행해야 할 데모를 먼저 소개합니다.
어떻게 구현해야할지 감이 오시나요?
우리는 개발하면서 항상 Library에 의존하면 안되겠죠?
아마 대부분은 개발자분들은 막막하실 것 같습니다.
PaintCode는 Code로 Generate 해주는 멋진 기능을 가지고 있지만 Animation의 Timeline을 확인하는데는 어려움이 있습니다.
우리는 여기서 Animation의 Timeline을 확인하고 실행해 볼 수 있는 다른 도구가 필요해 보입니다.
다른 멋진 도구들 (After Effect 등) 이 있지만 무료로 사용할 수 있는 Shape Shifter를 소개합니다.
Shape Shifter
Shape Shifter simplifies the process of creating SVG-based icon animations.
shapeshifter.design
하지만 아쉽게도 iOS는 Code geneate를 아직 지원하지 않는 것 같습니다.
ShapeShifter의 실행 화면입니다.
여기서 우리가 다뤄볼 예제는 Demo에 Search-to-close 입니다.
좌측 하단에 Demo를 클릭합니다.
Dialog 에서 Search-to-close 를 선택합니다.
환경설정은 끝났습니다.
한번 파란색의 Play 버튼을 클릭해 보세요!
정말 멋진 Search Icon이 탄생할 것 같은 기분이 듭니다!
iOS의 Code Geneate 를 지원하지 않기 때문에 PaintCode를 실행하고 Geneated 된 코드를 복사합니다.
https://gist.github.com/kimtaesu/ffdaca3eee9795a1447f5c549a650bc5
이제 Animation을 지정해주는 노가다 작업이 남았습니다.
좌측 하단에서 "oval" path 클릭합니다.
우측 패널에 속성들이 보여질 것입니다.
trimPathStart 는 strokeStart 와 매칭이 되며
trimPathEnd 는 strokeEnd 와 매칭이 됩니다.
trimPathOffset은 정확히 어떤 것인지 잘 모르겠습니다.
우측에 있는 속성들을 Swift 코드로 적용해 봐야겠죠?
https://gist.github.com/kimtaesu/50e21cd096e00a434e1b5668351cc43d
SearchCloseView.swift 입니다.
https://github.com/kimtaesu/ShapeShifter/blob/master/ShapeShifter/SearchCloseView.swift
kimtaesu/ShapeShifter
Contribute to kimtaesu/ShapeShifter development by creating an account on GitHub.
github.com
여기서 주의해야 할 것은
stopAnimation 에서 delay는 0으로 줘야 한다는 것입니다.
delay는 주게 된다면 removeAllAnimations에 의해서 Animation이 삭제되면서 원본 Layer가 보여지게 됩니다.
짜잔~ Animation "휘리릭~"
마무리
이제 사용성이 좋은 앱을 만들기 위해 두 발자국 걸었습니다.
앞으로 Serise를 다 읽으시고 경험하신다면 좋은 앱 개발자가 될 것입니다.
소중한 시간 내어서 읽어주셔서 감사합니다
