supports the information hierarchy by animation transition

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

Upload: naoya-sugimoto

Post on 18-Aug-2015

300 views

Category:

Technology


0 download

TRANSCRIPT

SwiftでTableViewを かっこよく登場させる

第7回【フリースタイル】もくもく会 2015.08.08 Tokyo

@naoyashiga

自己紹介• @naoyashiga

• 社会人2年目

• iOS Dev, Web Markup

• https://github.com/naoyashiga

• 趣味でiOSアプリ個人開発

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

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

100万個のアワビ

Thank you!!!!!!!!

ダウンロードしてね

• https://itunes.apple.com/jp/app/100wan-genoawabi-wu-ransaretaawabiwo/id954944521?mt=8

今日のLTは

TableView Animation

Demo

Hierarchical timing• Hierarchical timing

• 重要度の順番を決める

• Meaningful transitions - Animation - Google design guidelines

• http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing

When Animation Start?

• viewWillAppear

• 画面が表示される直前に実行

Spring

Spring before animation

animatedCell.transform = CGAffineTransformMakeTranslation(0, tableHeight)

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 )

FadeIn

FadeIn before animation

animatedCell.transform = CGAffineTransformMakeTranslation(0, animatedCell.frame.size.height / 3)

animatedCell.layer.opacity = 0

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 )

Referrence

• Creating Simple View Animations in Swift | iOS Tutorial

• http://www.appcoda.com/view-animation-in-swift/

GitHub Repository

• https://github.com/naoyashiga/RPAnimatedTable

Thank you!