2015.07.29 iOSすいすいもくもく会@Livesense #6 https://github.com/naoyashiga/TwitterProfileHeaderAnimation

1. Twitter Profile
Header Animation
iOSすいすいもくもく会@Livesense
2015.07.29 Tokyo
@naoyashiga

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

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

4. 100万個のアワビ

5. Thank you!!!!!!!!

6. 今日のLTは

7. Twitter Profile
Header Animation

8. Twitterプロフィール画面
を引っ張るとズームするやつ

9. 完璧に再現するのは難しいの
で何となく似たようなやつを
作ってみました

10. Demo

11. How to Blur

12. Layer

13. UIVisualEffect View
• UIVisualEffect View
• Available iOS7
• 透明度の変更は非推奨
• チラつく
• <UIVisualEffectView 0x7fd1d0440a20> is being
asked to animate its opacity. This will cause the
effect to appear broken until opacity returns to 1.

14. Blur Image Effect
• Swift UIImage Effect
• Apple公式のUIImageEffectをSwiftで書いたやつ
• Apple非公式
• https://github.com/globchastyy/SwiftUIImageEffects
• GPUImage
• 試していないけど処理が速そう
• https://github.com/BradLarson/GPUImage

15. Scroll Animation

16. UIScrollViewDelegate
• UITableViewDelegate
• UIScrollViewDelegate
• UITableViewDelegateに移譲済み
• scrollViewDidScroll
• スクロールしたら実行される

17. Get ScrollY
func scrollViewDidScroll(scrollView: UIScrollView) {
let scrollY = scrollView.contentOffset.y
}

18. scrollY < 0
if scrollY < 0 {
let pullDownOffsetY: CGFloat = 150
let scaleRatio = 1 - scrollY / pullDownOffsetY
headerImageView.transform =
CGAffineTransformMakeScale(scaleRatio, scaleRatio)
blurredImageView.transform =
CGAffineTransformMakeScale(scaleRatio, scaleRatio)
let blurRatio = -scrollY / pullDownOffsetY
blurredImageView.alpha = min(1.0, blurRatio)
}

19. scrollY > 0
if scrollY > 0 {
let headerHeightMovingSpeed = -scrollY / 2
let minHeight: CGFloat = view.frame.height *
headerImageViewHeightConstraint.multiplier / 2
let constant: CGFloat = view.frame.height *
headerImageViewHeightConstraint.multiplier -
minHeight
headerImageViewHeightConstraint.constant =
max(-constant, headerHeightMovingSpeed)
view.layoutIfNeeded()
}

20. Set Image
var headerBackgroundImage: UIImage? {
didSet {
let blurRadius: CGFloat = 20.0
headerImageView.image = headerBackgroundImage
blurredImageView.image =
headerImageView.image?.applyBlurWithRadius(blurRadi
us, tintColor: nil, saturationDeltaFactor: 1.0,
maskImage: nil)
}
}

21. Referrence
• Implementing the Twitter iOS App UI - Think &
Build
• http://www.thinkandbuild.it/implementing-the-
twitter-ios-app-ui/
• How to create an interactive blur effect in iOS8 •
Five
• http://five.agency/how-to-create-an-interactive-
blur-effect-in-ios8/

22. GitHub Repository
• https://github.com/naoyashiga/
TwitterProfileHeaderAnimation

23. Thank you!