twitter profile header animation by using swift
TRANSCRIPT
自己紹介
• @naoyashiga
• iOS Dev, Web Markup
• https://github.com/naoyashiga
• 趣味でiOSアプリ個人開発
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
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