动画导航栏颜色
Animating a navigation bar color
我正在尝试在弹出回上一个控制器时为导航栏的颜色变化设置动画。为了给它一些上下文，我有一个控制器 A，它是一个 collectionView 控制器，并且有一个不透明的导航栏颜色设置为：
self.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self.navigationController?.navigationBar.tintColor = .white
self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
self.navigationController?.navigationBar.isTranslucent = false
选择 collectionViewCell 后，我将推送到下一个控制器 B，其中导航栏更改为透明：
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
当用户点击后退箭头时，我希望导航栏 return 恢复到它的原始颜色。我在控制器 B 的 viewWillDissappear 函数、willMove(toParentViewController) 和控制器 A 的 viewWillAppear 函数上尝试了一个简单的 UIView 动画：
这是动画：
UIView.animate(withDuration: 0.5) {
self.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.layoutIfNeeded()
}
完成此操作后，我尝试使用过渡协调器但得到了相同的结果：
guard let coordinator = self.transitionCoordinator else {
return
}
coordinator.animate(alongsideTransition: {
[weak self] context in
self?.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self?.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self?.navigationController?.navigationBar.shadowImage = nil
self?.navigationController?.navigationBar.isTranslucent = false
self?.navigationController?.navigationBar.layoutIfNeeded()
}, completion: nil)
似乎无论我尝试什么，或者我把代码放在哪里，我总是得到相同的结果。我知道代码是重复的，但我只是想弄清楚为什么，所以发生了很多复制和粘贴。
据我所知，我认为这与以前的控制器的背景视图有关，但我很难过，我似乎在导航栏下的动画之前看到了黑屏。任何帮助将不胜感激。
谢谢
详情
xCode8.3.2，swift3.1
解决方案
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.backgroundColor = .blue
}
}
完整样本
ViewController
import UIKit
class ViewController: UIViewController {
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.barTintColor = UIColor(red: 244/255, green: 67/255, blue: 54/255, alpha: 1.0)
navigationBar.tintColor = .white
navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
navigationBar.isTranslucent = false
}
}
}
ViewController2
import UIKit
class ViewController2: UIViewController {
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
let color = UIColor(red: 1, green: 153/255, blue: 0, alpha: 1.0)
navigationBar.setBackgroundImage(UIImage.imageWithColor(color: color), for: .default)
navigationBar.shadowImage = UIImage()
navigationBar.isTranslucent = true
}
}
override func viewWillDisappear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.setBackgroundImage(nil, for: .default)
navigationBar.shadowImage = nil
navigationBar.isTranslucent = false
}
}
}
extension UIImage
import UIKit
extension UIImage {
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(CGSize(width: 1, height: 1), false, 0)
color.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
Main.storyboard
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Tzy-ol-uu0">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="stackowerflow_44343355" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="eIC-Nm-Ex7">
<rect key="frame" x="164" y="318" width="46" height="30"/>
<state key="normal" title="Button"/>
<connections>
<segue destination="QHs-H4-fAS" kind="show" id="Rff-Eq-K6g"/>
</connections>
</button>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="eIC-Nm-Ex7" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="G1g-VM-MAn"/>
<constraint firstItem="eIC-Nm-Ex7" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="mdZ-GP-EQw"/>
</constraints>
</view>
<navigationItem key="navigationItem" id="hq3-zt-U4K"/>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="977" y="791"/>
</scene>
<!--View Controller2-->
<scene sceneID="F9C-Nz-6dd">
<objects>
<viewController id="QHs-H4-fAS" customClass="ViewController2" customModule="stackowerflow_44343355" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="AV0-X8-nhX"/>
<viewControllerLayoutGuide type="bottom" id="AsY-Gl-67v"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="1fA-pX-rzR">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="Uzd-Tb-KRO" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1770" y="789"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="Jff-OO-3e7">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="Tzy-ol-uu0" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" id="804-YF-T6T">
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="BYZ-38-t0r" kind="relationship" relationship="rootViewController" id="BRB-ym-7I2"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="M6i-ib-61I" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="140" y="791.15442278860576"/>
</scene>
</scenes>
</document>
我正在尝试在弹出回上一个控制器时为导航栏的颜色变化设置动画。为了给它一些上下文，我有一个控制器 A，它是一个 collectionView 控制器，并且有一个不透明的导航栏颜色设置为：
self.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self.navigationController?.navigationBar.tintColor = .white
self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
self.navigationController?.navigationBar.isTranslucent = false
选择 collectionViewCell 后，我将推送到下一个控制器 B，其中导航栏更改为透明：
self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true
当用户点击后退箭头时，我希望导航栏 return 恢复到它的原始颜色。我在控制器 B 的 viewWillDissappear 函数、willMove(toParentViewController) 和控制器 A 的 viewWillAppear 函数上尝试了一个简单的 UIView 动画：
这是动画：
UIView.animate(withDuration: 0.5) {
self.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self.navigationController?.navigationBar.shadowImage = nil
self.navigationController?.navigationBar.isTranslucent = false
self.navigationController?.navigationBar.layoutIfNeeded()
}
完成此操作后，我尝试使用过渡协调器但得到了相同的结果：
guard let coordinator = self.transitionCoordinator else {
return
}
coordinator.animate(alongsideTransition: {
[weak self] context in
self?.navigationController?.navigationBar.barTintColor = UIColor.rgb(red: 244, green: 67, blue: 54)
self?.navigationController?.navigationBar.setBackgroundImage(nil, for: .default)
self?.navigationController?.navigationBar.shadowImage = nil
self?.navigationController?.navigationBar.isTranslucent = false
self?.navigationController?.navigationBar.layoutIfNeeded()
}, completion: nil)
似乎无论我尝试什么，或者我把代码放在哪里，我总是得到相同的结果。我知道代码是重复的，但我只是想弄清楚为什么，所以发生了很多复制和粘贴。
据我所知，我认为这与以前的控制器的背景视图有关，但我很难过，我似乎在导航栏下的动画之前看到了黑屏。任何帮助将不胜感激。
谢谢
详情
xCode8.3.2，swift3.1
解决方案
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.backgroundColor = .blue
}
}
完整样本
ViewController
import UIKit
class ViewController: UIViewController {
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.barTintColor = UIColor(red: 244/255, green: 67/255, blue: 54/255, alpha: 1.0)
navigationBar.tintColor = .white
navigationBar.titleTextAttributes = [NSForegroundColorAttributeName : UIColor.white]
navigationBar.isTranslucent = false
}
}
}
ViewController2
import UIKit
class ViewController2: UIViewController {
override func viewWillAppear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
let color = UIColor(red: 1, green: 153/255, blue: 0, alpha: 1.0)
navigationBar.setBackgroundImage(UIImage.imageWithColor(color: color), for: .default)
navigationBar.shadowImage = UIImage()
navigationBar.isTranslucent = true
}
}
override func viewWillDisappear(_ animated: Bool) {
if let navigationBar = self.navigationController?.navigationBar {
navigationBar.setBackgroundImage(nil, for: .default)
navigationBar.shadowImage = nil
navigationBar.isTranslucent = false
}
}
}
extension UIImage
import UIKit
extension UIImage {
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: 1, height: 1)
UIGraphicsBeginImageContextWithOptions(CGSize(width: 1, height: 1), false, 0)
color.setFill()
UIRectFill(rect)
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
Main.storyboard
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="12120" systemVersion="16F73" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="Tzy-ol-uu0">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="12088"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="stackowerflow_44343355" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="eIC-Nm-Ex7">
<rect key="frame" x="164" y="318" width="46" height="30"/>
<state key="normal" title="Button"/>
<connections>
<segue destination="QHs-H4-fAS" kind="show" id="Rff-Eq-K6g"/>
</connections>
</button>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="eIC-Nm-Ex7" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="G1g-VM-MAn"/>
<constraint firstItem="eIC-Nm-Ex7" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="mdZ-GP-EQw"/>
</constraints>
</view>
<navigationItem key="navigationItem" id="hq3-zt-U4K"/>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="977" y="791"/>
</scene>
<!--View Controller2-->
<scene sceneID="F9C-Nz-6dd">
<objects>
<viewController id="QHs-H4-fAS" customClass="ViewController2" customModule="stackowerflow_44343355" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="AV0-X8-nhX"/>
<viewControllerLayoutGuide type="bottom" id="AsY-Gl-67v"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="1fA-pX-rzR">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="Uzd-Tb-KRO" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1770" y="789"/>
</scene>
<!--Navigation Controller-->
<scene sceneID="Jff-OO-3e7">
<objects>
<navigationController automaticallyAdjustsScrollViewInsets="NO" id="Tzy-ol-uu0" sceneMemberID="viewController">
<toolbarItems/>
<navigationBar key="navigationBar" contentMode="scaleToFill" id="804-YF-T6T">
<rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
<autoresizingMask key="autoresizingMask"/>
</navigationBar>
<nil name="viewControllers"/>
<connections>
<segue destination="BYZ-38-t0r" kind="relationship" relationship="rootViewController" id="BRB-ym-7I2"/>
</connections>
</navigationController>
<placeholder placeholderIdentifier="IBFirstResponder" id="M6i-ib-61I" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="140" y="791.15442278860576"/>
</scene>
</scenes>
</document>