Übergänge in Navigationsleiste wie IOS Music App

Question

Wie können wir diese Navigationsleiste Übergangseffekte bekommen? (Das gleiche wie Apples Musik-App)

IMAGE1

in diesem Bild haben wir eine Navigationsleiste, die völlig transparent ist nur die Navigationsleiste Schaltflächen sichtbar sind

IMAGE2

wie Sie scrollen Bar wird verwischt gleich, wenn Sie nach unten scrollen Bar wird weniger verschwommen

image3

und nach einer bestimmten Punkt Navigationsleiste wird die Standardnavigationsleiste mit Titel in ihm

jemand kann mich führen, wie diese oben zu erreichen genannten Transitions Effekt

was ich jetzt haben, ist

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) 

} 

der Lage sind, meine Bar zu machen verwischen, aber ich will es als Musik-App in iOS ist

Answer 1

Der Schlüssel verwischen, das Buch zu verwenden versetzte die Alpha für die visualEffectView. dann einzustellen, wenn das Bild die Höhe von navigationbar ist aus Wenn Sie nicht mehr auf dem Bildschirm sind, wechseln Sie von der transparenten Navigationsleiste zur normalen durchsichtigen. Ich habe eine View-Controller-Klasse erstellt, die dies mit einem UIScrollView tun kann, aber das gleiche Prinzip gilt für UITableView oder 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() 
     } 
    } 
} 

Die meisten der Wirkungs-Logik ist in scrollViewDidScroll. Sie beginnen mit der Effektansicht über die Bildansicht, aber vollständig transparent, wenn Sie den y-Versatz erhöhen, erhöhen Sie die Deckkraft und umgekehrt. Sobald Sie einen Punkt erreichen, an dem nur die Höhe der Navigationsleiste für das Bild geändert wurde, wechseln Sie in den Standardhintergrund von UINavigationBar. Verwenden Sie andernfalls UIImage(), um es transparent zu machen.

Das Ergebnis ist:

Oder ein gif here

Offensichtlich Apple Music hat andere Bildmanipulation weichen Vignetten zu bekommen, und Sie werden wahrscheinlich müssen Spiel mit den Werten herum, um es so zu bekommen, wie du es willst, aber das sollte dich den größten Teil des Weges dorthin bringen.