Day17- Tumblr動(dòng)畫效果

壓縮厲害

最終效果,壓縮厲害

<br />

1溯警、UI布局

ViewController上面部分包括一個(gè)CollectionView报账,下面是一張背景圖和一個(gè)Button

如圖

<br />
第二個(gè)界面:拖入一個(gè)VisualEffectView,然后在里面添加Button和Label济锄,完成如下圖的布局


<br />
<br />

2催训、實(shí)現(xiàn)

實(shí)現(xiàn)原理,修改系統(tǒng)默認(rèn)的動(dòng)畫彈出方式(設(shè)置代理偿衰,自己去實(shí)現(xiàn)代理方法)挂疆,然后把要顯示的ViewController中的控件做動(dòng)畫效果(分為左右兩邊,先移出到屏幕外下翎,在使用動(dòng)畫效果進(jìn)入屏幕)

在ViewController中創(chuàng)建數(shù)據(jù)源缤言,設(shè)置代理,實(shí)現(xiàn)代理方法

//
//  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
    }
}


在第二個(gè)ViewController中依次把每個(gè)控件都拖入到Controller中漏设,設(shè)置動(dòng)畫代理

//
//  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.
    }
    

}

<br />
創(chuàng)建一個(gè)類墨闲,用于實(shí)現(xiàn)動(dòng)畫效果

//
//  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
    
    /**
     監(jiān)聽(tīng)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
    }
    
    /**
     監(jiān)聽(tīng)dismiss
     
     - parameter dismissed: <#dismissed description#>
     
     - returns: <#return value description#>
     */
    func animationControllerForDismissedController(dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?{
        isPresent = false
        return self
    }
    
    /**
     設(shè)置動(dòng)畫時(shí)長(zhǎng)
     
     - parameter transitionContext: <#transitionContext description#>
     
     - returns: <#return value description#>
     */
    func transitionDuration(transitionContext: UIViewControllerContextTransitioning?) -> NSTimeInterval{
        return 0.75
    }
    
    /**
     設(shè)置動(dòng)畫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瞻离、把內(nèi)容添加到容器內(nèi)
        container?.addSubview(fromView)
        container?.addSubview(toView!)
        
        // 4、執(zhí)行動(dòng)畫
        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)
        }
    }
    
    //設(shè)置一開始的位置在屏幕外
    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
    }
}

end:

Demo - PresentTumblrAnimator

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末乒裆,一起剝皮案震驚了整個(gè)濱河市套利,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌鹤耍,老刑警劉巖肉迫,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異稿黄,居然都是意外死亡喊衫,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門杆怕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)族购,“玉大人,你說(shuō)我怎么就攤上這事陵珍∏拚龋” “怎么了?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵互纯,是天一觀的道長(zhǎng)瑟幕。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么收苏? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任亿卤,我火速辦了婚禮,結(jié)果婚禮上鹿霸,老公的妹妹穿的比我還像新娘。我一直安慰自己秆乳,他們只是感情好懦鼠,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著屹堰,像睡著了一般肛冶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扯键,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天睦袖,我揣著相機(jī)與錄音,去河邊找鬼荣刑。 笑死馅笙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的厉亏。 我是一名探鬼主播董习,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼爱只!你這毒婦竟也來(lái)了皿淋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤恬试,失蹤者是張志新(化名)和其女友劉穎窝趣,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體训柴,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡哑舒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了畦粮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片散址。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖宣赔,靈堂內(nèi)的尸體忽然破棺而出预麸,到底是詐尸還是另有隱情,我是刑警寧澤儒将,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布吏祸,位于F島的核電站,受9級(jí)特大地震影響钩蚊,放射性物質(zhì)發(fā)生泄漏贡翘。R本人自食惡果不足惜蹈矮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望鸣驱。 院中可真熱鬧泛鸟,春花似錦、人聲如沸踊东。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)闸翅。三九已至再芋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間坚冀,已是汗流浹背济赎。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留记某,地道東北人司训。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像辙纬,于是被迫代替她去往敵國(guó)和親豁遭。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)贺拣、插件蓖谢、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,059評(píng)論 4 62
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,756評(píng)論 25 707
  • 今天起床后,做了粥譬涡,炒了漲蛋闪幽,蒸了燉蛋,煮了蛋涡匀,還炒了個(gè)萵筍盯腌。對(duì)于三十年如一日,習(xí)慣了飯來(lái)張口的我來(lái)說(shuō)陨瘩,已經(jīng)非常難...
    三河散人閱讀 218評(píng)論 0 1
  • 也許腕够,在每扇窗戶的光影中,都有那么一個(gè)人舌劳,呈現(xiàn)出自己最喜歡的樣子帚湘。而后,奮不顧身甚淡。最后大诸,湮入紅塵。 1 水生初見(jiàn)林...
    蘇長(zhǎng)亭閱讀 855評(píng)論 35 21
  • 1 李小漁想死焙贷。 這個(gè)想法已經(jīng)在她腦海里徘徊了很久。她想到過(guò)很多種死法贿堰,吃藥辙芍、上吊、跳樓羹与、開煤氣沸手、被火車壓.......
    大錢小胖閱讀 1,507評(píng)論 40 37