IOS Music Appと同じナビゲーションバーのトランジション

Question

どのようにしてこのナビゲーションバーのトランジション効果を得ることができますか？この画像で

IMAGE1

（同じAppleの音楽アプリとして）私たちは、ナビゲーションバーのボタンが表示されている完全に透明であるナビゲーションバーを持っている

IMAGE2

スクロールバーがぼやけて表示される スクロールバーがスクロールしてもぶれが少なくなります

画像3

と誰もが言及したトランジションエフェクト

の上にこれを達成するためにどのように私を導くことができる

ある点ナビゲーションバーはそれにタイトルとデフォルトのナビゲーションバーになり

後私は今何をしているのですか

func addBlurEffect() { 
    // Add blur view 
    var bounds = self.navigationController?.navigationBar.bounds as CGRect! 
    visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Dark)) 
    bounds.offsetInPlace(dx: 0.0, dy: -20.0) 
    bounds.size.height = bounds.height + 20.0 
    visualEffectView.frame = bounds 
    visualEffectView.autoresizingMask = [.FlexibleWidth, .FlexibleHeight] 
    self.navigationController?.navigationBar.addSubview(visualEffectView) 


    self.navigationController?.navigationBar.sendSubviewToBack(visualEffectView) 

} 

は私のバーをあいまいにすることが可能ですが、私はそれがiOSの

キーは画像がnavigationBarの高さからが続いたときに visualEffectView.のアルファを設定するには、スクロールオフセットを使用することです

Answer 1

で音楽アプリとしてそれをぼかしたいです透明なナビゲーションバーから通常の半透明のものに切り替えます。 UIScrollViewを使用してこれを行うビューコントローラクラスを作成しましたが、同じ原理がUITableViewまたはUICollectionViewに適用されます。

import UIKit 

class NavigationBlurViewController: UIViewController, UIScrollViewDelegate { 

    // Might not want to hard code the height of the navBar but YOLO 
    let navBarHeight: CGFloat = 66.0 

    lazy var scrollView: UIScrollView = { 
     let scrollView = UIScrollView() 
     scrollView.translatesAutoresizingMaskIntoConstraints = false 
     return scrollView 
    }() 

    let contentView = UIView() 

    let imageView: UIImageView = { 
     let imageView = UIImageView() 
     imageView.translatesAutoresizingMaskIntoConstraints = false 
     imageView.image = UIImage(named: "Swift") 
     imageView.clipsToBounds = true 
     imageView.contentMode = .ScaleAspectFill 
     return imageView 
    }() 

    lazy var visualEffectView: UIVisualEffectView = { 
     let blurEffect = UIBlurEffect(style: .Light) 
     let visualEffectView = UIVisualEffectView(effect: blurEffect) 
     visualEffectView.translatesAutoresizingMaskIntoConstraints = false 
     visualEffectView.alpha = 0.0 
     return visualEffectView 
    }() 

    override func viewDidLoad() 
    { 
     super.viewDidLoad() 
     self.view.addSubview(self.scrollView) 
     self.scrollView.addSubview(self.contentView) 
     self.contentView.addSubview(self.imageView) 
     self.contentView.addSubview(self.visualEffectView) 

     self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) 
     self.navigationController?.navigationBar.shadowImage = UIImage() 
     self.navigationController?.navigationBar.tintColor = UIColor.blackColor() 

    } 

    override func updateViewConstraints() 
    { 
     super.updateViewConstraints() 
     self.scrollView.topAnchor.constraintEqualToAnchor(self.view.topAnchor).active = true 
     self.scrollView.leadingAnchor.constraintEqualToAnchor(self.view.leadingAnchor).active = true 
     self.scrollView.trailingAnchor.constraintEqualToAnchor(self.view.trailingAnchor).active = true 
     self.scrollView.bottomAnchor.constraintEqualToAnchor(self.view.bottomAnchor).active = true 

     self.imageView.topAnchor.constraintEqualToAnchor(self.contentView.topAnchor, constant: -navBarHeight).active = true 
     self.imageView.leadingAnchor.constraintEqualToAnchor(self.contentView.leadingAnchor).active = true 
     self.imageView.trailingAnchor.constraintEqualToAnchor(self.contentView.trailingAnchor).active = true 
     // 150.0 or however tall you want your image 
     self.imageView.heightAnchor.constraintEqualToConstant(150.0 + navBarHeight).active = true 

     self.visualEffectView.centerXAnchor.constraintEqualToAnchor(self.imageView.centerXAnchor).active = true 
     self.visualEffectView.centerYAnchor.constraintEqualToAnchor(self.imageView.centerYAnchor).active = true 
     self.visualEffectView.widthAnchor.constraintEqualToAnchor(self.imageView.widthAnchor).active = true 
     self.visualEffectView.heightAnchor.constraintEqualToAnchor(self.imageView.heightAnchor).active = true 
    } 

    override func viewDidAppear(animated: Bool) { 
     super.viewDidAppear(animated) 
     scrollView.delegate = self 
    } 

    override func viewDidLayoutSubviews() 
    { 
     super.viewDidLayoutSubviews() 

     // Height just 1000 for example 
     self.scrollView.contentSize = CGSize(width: self.view.bounds.width, height: 1000.0) 
     self.contentView.frame = CGRect(x: 0.0, y: 0.0, width: self.scrollView.contentSize.width, height: self.scrollView.contentSize.height) 

    } 

    func scrollViewDidScroll(scrollView: UIScrollView) 
    { 
     // Decrease size of denominator to make it blur faster 
     self.visualEffectView.alpha = scrollView.contentOffset.y * 1.0/(self.imageView.frame.height - (2.0 * navBarHeight)) 

     if scrollView.contentOffset.y > (self.imageView.frame.height - (2.0 * navBarHeight)) && self.navigationController?.navigationBar.backgroundImageForBarMetrics(UIBarMetrics.Default) != nil 
     { 
      self.navigationController?.navigationBar.setBackgroundImage(nil, forBarMetrics: UIBarMetrics.Default) 
      self.navigationController?.navigationBar.shadowImage = nil 
     } 
     else if scrollView.contentOffset.y < (self.imageView.frame.height - (2.0 * navBarHeight)) && self.navigationController?.navigationBar.backgroundImageForBarMetrics(UIBarMetrics.Default) == nil 
     { 
      self.navigationController?.navigationBar.setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default) 
      self.navigationController?.navigationBar.shadowImage = UIImage() 
     } 
    } 
} 

ほとんどの効果ロジックはscrollViewDidScrollです。あなたは、イメージビュー上でエフェクトビューから始めますが、yオフセットが増加すると完全に透明になります。不透明度とその逆数が増加します。ポイントに達すると、画像のナビゲーションバーの高さだけがUINavigationBarのデフォルトの背景に切り替わります。それ以外の場合は、UIImage()を使用して透明にします。

結果は次のとおりです。

またはGIF here

はもちろん、Appleの音楽ソフトビネットを得るために、他の画像操作を行うと、あなたはおそらくする必要がありますあなたがそれを望む方法を得るために値で遊んでいますが、これはそこにあなたのほとんどを得るはずです。