压缩厉害
最终效果，压缩厉害
1、UI布局
ViewController上面部分包括一个CollectionView，下面是一张背景图和一个Button
如图
第二个界面:拖入一个VisualEffectView，然后在里面添加Button和Label，完成如下图的布局
2、实现
实现原理，修改系统默认的动画弹出方式（设置代理，自己去实现代理方法），然后把要显示的ViewController中的控件做动画效果（分为左右两边，先移出到屏幕外，在使用动画效果进入屏幕）
在ViewController中创建数据源，设置代理，实现代理方法
//
// ViewController.swift
// PresentTumblrAnimator
//
// Created by ios on 16/9/23.
// Copyright © 2016年 ios. All rights reserved.
//
import UIKit
struct model {
var icon = "animator1.jpg"
var name = "default"
var backImage = "animator1.jpg"
}
class ViewController: UIViewController ,UICollectionViewDelegate,UICollectionViewDataSource{
@IBOutlet weak var collectionView: UICollectionView!
let data = [
model(icon: "Chat", name: "小明", backImage: "animator1.jpg"),
model(icon: "Quote", name: "老王", backImage: "animator2.jpg"),
model(icon: "Audio", name: "隔壁大叔", backImage: "animator3.jpg"),
model(icon: "Link", name: "邻家淑女", backImage: "animator4.jpg")
]
override func viewDidLoad() {
super.viewDidLoad()
collectionView.delegate = self
collectionView.dataSource = self
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func preferredStatusBarStyle() -> UIStatusBarStyle {
return .LightContent
}
@IBAction func unwindToMainViewController (sender: UIStoryboardSegue){
self.dismissViewControllerAnimated(true, completion: nil)
}
}
extension ViewController {
func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int{
return 10
}
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell{
let cell = collectionView.dequeueReusableCellWithReuseIdentifier("collCell", forIndexPath: indexPath) as! CollectionViewCell
let model = data[indexPath.row % 4]
cell.backImage.image = UIImage(named: model.backImage)
cell.icon.image = UIImage(named:model.icon)
cell.nameLabel.text = model.name
return cell
}
}
在第二个ViewController中依次把每个控件都拖入到Controller中，设置动画代理
//
// MenuViewController.swift
// PresentTumblrAnimator
//
// Created by ios on 16/9/23.
// Copyright © 2016年 ios. All rights reserved.
//
import UIKit
class MenuViewController: UIViewController {
@IBOutlet weak var audioLab: UILabel!
@IBOutlet weak var audioBtn: UIButton!
@IBOutlet weak var charBtn: UIButton!
@IBOutlet weak var chatLab: UILabel!
@IBOutlet weak var photoBtn: UIButton!
@IBOutlet weak var photoLab: UILabel!
@IBOutlet weak var messageBtn: UIButton!
@IBOutlet weak var messageLab: UILabel!
@IBOutlet weak var textBtn: UIButton!
@IBOutlet weak var textLab: UILabel!
@IBOutlet weak var linkBtn: UIButton!
@IBOutlet weak var linkLab: UILabel!
@IBOutlet weak var visualView: UIVisualEffectView!
private let animator = TumblrAnimator()
override func viewDidLoad() {
super.viewDidLoad()
transitioningDelegate = animator
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
创建一个类，用于实现动画效果
//
// TumblrAnimator.swift
// PresentTumblrAnimator
//
// Created by ios on 16/9/23.
// Copyright © 2016年 ios. All rights reserved.
//
import UIKit
class TumblrAnimator: NSObject,UIViewControllerTransitioningDelegate ,UIViewControllerAnimatedTransitioning{
//用于判断是否是present
var isPresent : Bool = true
/**
监听present
- parameter presented: <#presented description#>
- parameter presenting: <#presenting description#>
- parameter source: <#source description#>
- returns: <#return value description#>
*/
func animationControllerForPresentedController(presented: UIViewController, presentingController presenting: UIViewController, sourceController source: UIViewController) -> UIViewControllerAnimatedTransitioning?{
isPresent = true
return self
}
/**
监听dismiss
- parameter dismissed: <#dismissed description#>
- returns: <#return value description#>
*/
func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?{
isPresent = false
return self
}
/**
设置动画时长
- parameter transitionContext: <#transitionContext description#>
- returns: <#return value description#>
*/
func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval{
return 0.75
}
/**
设置动画present/dismiss效果
- parameter transitionContext: <#transitionContext description#>
*/
func animateTransition(transitionContext: UIViewControllerContextTransitioning){
// 1、得到VC
let screens : (from:UIViewController, to:UIViewController) = (transitionContext.viewControllerForKey(UITransitionContextFromViewControllerKey)!, transitionContext.viewControllerForKey(UITransitionContextToViewControllerKey)!)
let menuViewController = !isPresent ? screens.from as! MenuViewController : screens.to as! MenuViewController
let bottomViewController = !isPresent ? screens.to as UIViewController : screens.from as UIViewController
// 2、得到View
let toView = menuViewController.view
let fromView = bottomViewController.view
//判断是不是present，如果是，先把控件移到屏幕外
if isPresent {
closeVC(menuViewController)
}
// 3、获取容器
let container = transitionContext.containerView()
// 3.1、把内容添加到容器内
container?.addSubview(fromView)
container?.addSubview(toView!)
// 4、执行动画
UIView.animateWithDuration(transitionDuration(transitionContext), delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0, options: [], animations: {
if self.isPresent{
self.showVC(menuViewController)
}
else{
self.closeVC(menuViewController)
}
}) { (_) in
transitionContext.completeTransition(true)
UIApplication.sharedApplication().keyWindow!.insertSubview(fromView, atIndex: 0)
}
}
//设置一开始的位置在屏幕外
private func closeVC(controller : MenuViewController){
controller.view.alpha = 0
//left
controller.audioBtn.transform = CGAffineTransformMakeTranslation(-300, 0)
controller.audioLab.transform = controller.audioBtn.transform
controller.photoBtn.transform = CGAffineTransformMakeTranslation(-150, 0)
controller.photoLab.transform = controller.photoBtn.transform
controller.textBtn.transform = CGAffineTransformMakeTranslation(-50, 0)
controller.textLab.transform = controller.textBtn.transform
//right
controller.charBtn.transform = CGAffineTransformMakeTranslation(300, 0)
controller.chatLab.transform = controller.charBtn.transform
controller.messageBtn.transform = CGAffineTransformMakeTranslation(150, 0)
controller.messageLab.transform = controller.messageBtn.transform
controller.linkBtn.transform = CGAffineTransformMakeTranslation(50, 0)
controller.linkLab.transform = controller.linkBtn.transform
}
//还原原始位置
private func showVC(controller : MenuViewController){
controller.view.alpha = 1
//left
controller.audioBtn.transform = CGAffineTransformIdentity
controller.audioLab.transform = CGAffineTransformIdentity
controller.photoBtn.transform = CGAffineTransformIdentity
controller.photoLab.transform = CGAffineTransformIdentity
controller.textBtn.transform = CGAffineTransformIdentity
controller.textLab.transform = CGAffineTransformIdentity
//right
controller.charBtn.transform = CGAffineTransformIdentity
controller.chatLab.transform = CGAffineTransformIdentity
controller.messageBtn.transform = CGAffineTransformIdentity
controller.messageLab.transform = CGAffineTransformIdentity
controller.linkBtn.transform = CGAffineTransformIdentity
controller.linkLab.transform = CGAffineTransformIdentity
}
}