Day15 - 遮罩效果

效果如圖:

實(shí)現(xiàn)效果如圖

1鸣驱、UI布局

1.1進(jìn)入LaunchScreen.storyboard中設(shè)置背景色為藍(lán)色
1.2拖入一個(gè)ImageView昼牛,設(shè)置大小100 81,并且垂直水平居中

效果如圖

2康聂、在AppDelegate.swift中實(shí)現(xiàn)效果

思路解析:

從效果上看是有一張背景圖片贰健,還有一張前景圖片(遮罩效果),然后前景圖片不斷擴(kuò)大恬汁,然后在取消遮罩效果伶椿。
所以需要一個(gè)背景圖,一個(gè)前景圖氓侧,一個(gè)動(dòng)畫擴(kuò)大的效果
OK代碼實(shí)現(xiàn)

<br />
2.1創(chuàng)建背景圖

//懶加載圖片
    private lazy var imageView : UIImageView = {
       let iv = UIImageView(frame: UIScreen.mainScreen().bounds)
        iv.image = UIImage(named: "7501334")
        return iv
    }()

<br />
2.2創(chuàng)建遮罩

//懶加載Layer
    private lazy var imageViewMask : CALayer = {
        let layer = CALayer()
        layer.contents = UIImage(named: "twitter logo mask")?.CGImage
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 81)
        layer.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        layer.contentsGravity = kCAGravityResizeAspect
        return layer
    }()

<br />
2.3在didFinishLaunchingWithOptions方法中脊另,創(chuàng)建Window,并設(shè)置好屬性约巷,以及開始動(dòng)畫

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        
        //創(chuàng)建window
        window = UIWindow(frame: UIScreen.mainScreen().bounds)
        //設(shè)置window根視圖
        window?.rootViewController = UIViewController()
        //添加圖片
        window?.addSubview(imageView)
        //設(shè)置遮罩
        imageView.layer.mask = imageViewMask
        //設(shè)置遮罩居中
        imageViewMask.position = (window?.center)!
        //開始動(dòng)畫
        startAnimationMask()
        //設(shè)置背景顏色
        window?.backgroundColor = UIColor(red:0.117, green:0.631, blue:0.949, alpha:1)
        //設(shè)置為可見
        window?.makeKeyAndVisible()
        
        return true
    }

<br />
2.4實(shí)現(xiàn)動(dòng)畫代碼偎痛,使用關(guān)鍵幀動(dòng)畫CAKeyframeAnimation

private func startAnimationMask(){
        //關(guān)鍵幀動(dòng)畫
        //1、創(chuàng)建keyFrameAnimation
        let keyFrameAnimation = CAKeyframeAnimation(keyPath: "bounds")
        //2独郎、設(shè)置時(shí)長
        keyFrameAnimation.duration = 0.6
        //3踩麦、設(shè)置代理
        keyFrameAnimation.delegate = self
        //3.1設(shè)置開始時(shí)間
        keyFrameAnimation.beginTime = CACurrentMediaTime() + 0.5
        //3.2設(shè)置動(dòng)畫模式
        keyFrameAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut), CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)]
        //4、設(shè)置幀
        let key1 = NSValue(CGRect: imageViewMask.bounds)
        let key2 = NSValue(CGRect: CGRect(x: 0, y: 0, width: 80, height: 65))
        let key3 = NSValue(CGRect: CGRect(x: 0, y: 0, width: 1600, height:  1300))
        keyFrameAnimation.values = [key1,key2,key3]
        //4.1氓癌、設(shè)置幀動(dòng)畫時(shí)長
        keyFrameAnimation.keyTimes = [0,0.3,1]
        //5谓谦、添加到mask上
        imageViewMask.addAnimation(keyFrameAnimation, forKey: "bounds")
    }

<br />
2.5在動(dòng)畫結(jié)束后,我們要把遮罩層移除

//動(dòng)畫結(jié)束后贪婉,把遮罩刪除
    override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
        imageView.layer.mask = nil
    }

<br />
到這里就完成效果了反粥,你們可以修改動(dòng)畫方式來完成更多的效果
<br />
<br />

Demo - ImageViewMask

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子才顿,更是在濱河造成了極大的恐慌莫湘,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,427評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件娜膘,死亡現(xiàn)場離奇詭異逊脯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)竣贪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門军洼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人演怎,你說我怎么就攤上這事匕争。” “怎么了爷耀?”我有些...
    開封第一講書人閱讀 165,747評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵甘桑,是天一觀的道長。 經(jīng)常有香客問我歹叮,道長跑杭,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,939評(píng)論 1 295
  • 正文 為了忘掉前任咆耿,我火速辦了婚禮德谅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘萨螺。我一直安慰自己窄做,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評(píng)論 6 392
  • 文/花漫 我一把揭開白布慰技。 她就那樣靜靜地躺著椭盏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪吻商。 梳的紋絲不亂的頭發(fā)上掏颊,一...
    開封第一講書人閱讀 51,737評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音艾帐,去河邊找鬼蚯舱。 笑死,一個(gè)胖子當(dāng)著我的面吹牛掩蛤,可吹牛的內(nèi)容都是我干的枉昏。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼揍鸟,長吁一口氣:“原來是場噩夢啊……” “哼兄裂!你這毒婦竟也來了句旱?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,352評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤晰奖,失蹤者是張志新(化名)和其女友劉穎谈撒,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體匾南,經(jīng)...
    沈念sama閱讀 45,834評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡啃匿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評(píng)論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蛆楞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片溯乒。...
    茶點(diǎn)故事閱讀 40,133評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖豹爹,靈堂內(nèi)的尸體忽然破棺而出裆悄,到底是詐尸還是另有隱情,我是刑警寧澤臂聋,帶...
    沈念sama閱讀 35,815評(píng)論 5 346
  • 正文 年R本政府宣布光稼,位于F島的核電站,受9級(jí)特大地震影響孩等,放射性物質(zhì)發(fā)生泄漏艾君。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評(píng)論 3 331
  • 文/蒙蒙 一肄方、第九天 我趴在偏房一處隱蔽的房頂上張望腻贰。 院中可真熱鬧,春花似錦扒秸、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至翼闽,卻和暖如春拾徙,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背感局。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評(píng)論 1 272
  • 我被黑心中介騙來泰國打工尼啡, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人询微。 一個(gè)月前我還...
    沈念sama閱讀 48,398評(píng)論 3 373
  • 正文 我出身青樓崖瞭,卻偏偏與公主長得像,于是被迫代替她去往敵國和親撑毛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子书聚,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評(píng)論 2 355

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