Twitter Profile Header Animation by using Swift

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 being asked to animate its opacity. This will cause the effect to appear broken until opacity returns to 1.

Blur Image Effect• Swift UIImage Effect

• Apple公式のUIImageEffectをSwiftで書いたやつ

• Apple非公式

• https://github.com/globchastyy/SwiftUIImageEffects

• GPUImage

• 試していないけど処理が速そう

• https://github.com/BradLarson/GPUImage

Scroll Animation

UIScrollViewDelegate• UITableViewDelegate

• UIScrollViewDelegate

• UITableViewDelegateに移譲済み

• scrollViewDidScroll

• スクロールしたら実行される

Get ScrollY

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

scrollY < 0if 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) }

scrollY > 0if 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() }

Set Imagevar headerBackgroundImage: UIImage? { didSet { let blurRadius: CGFloat = 20.0 headerImageView.image = headerBackgroundImage

blurredImageView.image = headerImageView.image?.applyBlurWithRadius(blurRadius, tintColor: nil, saturationDeltaFactor: 1.0, maskImage: nil)

} }

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/

GitHub Repository

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

Thank you!