Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Twitter Profile
Header Animation
iOSすいすいもくもく会@Livesense
2015.07.29 Tokyo
@naoyashiga
自己紹介
• @naoyashiga
• iOS Dev, Web Markup
• https://github.com/naoyashiga
• 趣味でiOSアプリ個人開発
作ったアプリを
少しだけ紹介
100万個のアワビ
Thank you!!!!!!!!
今日のLTは
Twitter Profile
Header Animation
Twitterプロフィール画面
を引っ張るとズームするやつ
完璧に再現するのは難しいの
で何となく似たようなやつを
作ってみました
Demo
How to Blur
Layer
UIVisualEffect View
• UIVisualEffect View
• Available iOS7
• 透明度の変更は非推奨
• チラつく
• <UIVisualEffectView 0x7fd1d0440a20> is bein...
Blur Image Effect
• Swift UIImage Effect
• Apple公式のUIImageEffectをSwiftで書いたやつ
• Apple非公式
• https://github.com/globchastyy/Swi...
Scroll Animation
UIScrollViewDelegate
• UITableViewDelegate
• UIScrollViewDelegate
• UITableViewDelegateに移譲済み
• scrollViewDidScroll
• スクロール...
Get ScrollY
func scrollViewDidScroll(scrollView: UIScrollView) {
let scrollY = scrollView.contentOffset.y
}
scrollY < 0
if scrollY < 0 {
let pullDownOffsetY: CGFloat = 150
let scaleRatio = 1 - scrollY / pullDownOffsetY
headerImage...
scrollY > 0
if scrollY > 0 {
let headerHeightMovingSpeed = -scrollY / 2
let minHeight: CGFloat = view.frame.height *
heade...
Set Image
var headerBackgroundImage: UIImage? {
didSet {
let blurRadius: CGFloat = 20.0
headerImageView.image = headerBack...
Referrence
• Implementing the Twitter iOS App UI - Think &
Build
• http://www.thinkandbuild.it/implementing-the-
twitter-i...
GitHub Repository
• https://github.com/naoyashiga/
TwitterProfileHeaderAnimation
Thank you!
Upcoming SlideShare
Loading in …5
×

Twitter Profile Header Animation by using Swift

1,668 views

Published on

2015.07.29 iOSすいすいもくもく会@Livesense #6

https://github.com/naoyashiga/TwitterProfileHeaderAnimation

Published in: Technology
  • Be the first to comment

Twitter Profile Header Animation by using Swift

  1. 1. Twitter Profile Header Animation iOSすいすいもくもく会@Livesense 2015.07.29 Tokyo @naoyashiga
  2. 2. 自己紹介 • @naoyashiga • iOS Dev, Web Markup • https://github.com/naoyashiga • 趣味でiOSアプリ個人開発
  3. 3. 作ったアプリを 少しだけ紹介
  4. 4. 100万個のアワビ
  5. 5. Thank you!!!!!!!!
  6. 6. 今日のLTは
  7. 7. Twitter Profile Header Animation
  8. 8. Twitterプロフィール画面 を引っ張るとズームするやつ
  9. 9. 完璧に再現するのは難しいの で何となく似たようなやつを 作ってみました
  10. 10. Demo
  11. 11. How to Blur
  12. 12. Layer
  13. 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. 14. Blur Image Effect • Swift UIImage Effect • Apple公式のUIImageEffectをSwiftで書いたやつ • Apple非公式 • https://github.com/globchastyy/SwiftUIImageEffects • GPUImage • 試していないけど処理が速そう • https://github.com/BradLarson/GPUImage
  15. 15. Scroll Animation
  16. 16. UIScrollViewDelegate • UITableViewDelegate • UIScrollViewDelegate • UITableViewDelegateに移譲済み • scrollViewDidScroll • スクロールしたら実行される
  17. 17. Get ScrollY func scrollViewDidScroll(scrollView: UIScrollView) { let scrollY = scrollView.contentOffset.y }
  18. 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. 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. 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. 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. 22. GitHub Repository • https://github.com/naoyashiga/ TwitterProfileHeaderAnimation
  23. 23. Thank you!

×