Supports the information hierarchy by animation transition

1. SwiftでTableViewを
かっこよく登場させる
第7回【フリースタイル】もくもく会
2015.08.08 Tokyo
@naoyashiga

2. 自己紹介
• @naoyashiga
• 社会人2年目
• iOS Dev, Web Markup
• https://github.com/naoyashiga
• 趣味でiOSアプリ個人開発

3. 作ったアプリを
少しだけ紹介

4. しょうもないアプリを
作っています

5. 100万個のアワビ

6. Thank you!!!!!!!!

7. ダウンロードしてね
• https://itunes.apple.com/jp/app/100wan-
genoawabi-wu-ransaretaawabiwo/
id954944521?mt=8

8. 今日のLTは

9. TableView
Animation

10. Demo

12. Hierarchical timing
• Hierarchical timing
• 重要度の順番を決める
• Meaningful transitions - Animation - Google
design guidelines
• http://www.google.com/design/spec/animation/
meaningful-transitions.html#meaningful-
transitions-hierarchical-timing

13. When Animation Start?
• viewWillAppear
• 画面が表示される直前に実行

14. Spring

15. Spring
before animation
animatedCell.transform =
CGAffineTransformMakeTra
nslation(0, tableHeight)

16. Spring
after animation
UIView.animateWithDuration(
1.5,
delay: 0.05 * Double(index),
usingSpringWithDamping: 0.8,
initialSpringVelocity: 0,
options: nil,
animations: {
animatedCell.transform =
CGAffineTransformMakeTranslation(0, 0)
},
completion: nil
)

17. FadeIn

18. FadeIn
before animation
animatedCell.transform =
CGAffineTransformMakeTranslation(0,
animatedCell.frame.size.height / 3)
animatedCell.layer.opacity = 0

19. FadeIn
after animation
UIView.animateWithDuration(
0.5,
delay: 0.05 * Double(index),
usingSpringWithDamping: 0.8,
initialSpringVelocity: 0,
options: nil,
animations: {
animatedCell.transform =
CGAffineTransformMakeTranslation(0, 0)
animatedCell.layer.opacity = 1.0
},
completion: nil
)

20. Referrence
• Creating Simple View Animations in Swift ¦
iOS Tutorial
• http://www.appcoda.com/view-animation-in-
swift/

21. GitHub Repository
• https://github.com/naoyashiga/
RPAnimatedTable

22. Thank you!