iOS 動(dòng)畫(huà)十一:Shapes and Masks

在我們創(chuàng)建想要的形狀之后,我們可以將這些屬性設(shè)置為 stroke color, ?ll color 和stroke dash pattern爹橱。

我們可以對(duì)這些屬性進(jìn)行動(dòng)畫(huà):
? path: 漸變 layer 的形狀為其它樣子萨螺。
? fillColor: 將 shape 的填充色改為不同的顏色。
? lineDashPhase: 在你的形狀周?chē)鷦?chuàng)建一個(gè) marquee 或 “marching ants” 效果
? lineWidth: 增加或縮小你的線條的線條尺寸。

現(xiàn)在我們實(shí)現(xiàn)一個(gè)小例子慰技,例子最后效果是這樣的:

代碼實(shí)現(xiàn)
avatar view

? photoLayer: avatar image layer
? circleLayer: 畫(huà)圓 layer
? maskLayer: mask layer
? label: player’s name label

bounce-off animation
bounce-off animation
func searchForOpponent() {
    let avatarSize = myAvatar.frame.size
    let bounceXOffset: CGFloat = avatarSize.width/1.9
    let morphSize = CGSize(
      width: avatarSize.width * 0.85,
      height: avatarSize.height * 1.1)

    let rightBouncePoint = CGPoint(
      x: view.frame.size.width/2.0 + bounceXOffset,
      y: myAvatar.center.y)

    let leftBouncePoint = CGPoint(
      x: view.frame.size.width/2.0 - bounceXOffset,
      y: myAvatar.center.y)

    myAvatar.bounceOff(point: rightBouncePoint, morphSize: morphSize)
    opponentAvatar.bounceOff(point: leftBouncePoint, morphSize: morphSize)

    delay(seconds: 4.0, completion: foundOpponent)
  }

  func foundOpponent() {
    status.text = "Connecting..."

    opponentAvatar.image = UIImage(named: "avatar-2")
    opponentAvatar.name = "Ray"

    delay(seconds: 4.0, completion: connectedToOpponent)
  }

  func connectedToOpponent() {
    myAvatar.shouldTransitionToFinishedState = true
    opponentAvatar.shouldTransitionToFinishedState = true

    delay(seconds: 1.0, completion: completed)
  }

  func completed() {
    status.text = "Ready to play"
    UIView.animate(withDuration: 0.2) {
      self.vs.alpha = 1.0
      self.searchAgain.alpha = 1.0
    }
  }
Morphing shapes 形狀漸變

當(dāng)兩個(gè) avatars 相撞時(shí)椭盏,它們應(yīng)該在這個(gè)完全彈性碰撞中稍微擠壓一下。視圖控制器將通過(guò)一個(gè) morph size惹盼,使頭像形狀變得稍高和稍窄的效果庸汗,如圖所示:

Morphing shapes

這樣,當(dāng)他們?cè)谄聊恢虚g相遇時(shí)手报,看起來(lái)頭像互相擠壓蚯舱。

核心代碼:

 func bounceOff(point: CGPoint, morphSize: CGSize) {
    let originalCenter = center

    UIView.animate(withDuration: animationDuration, delay: 0.0,
                   usingSpringWithDamping: 0.8, initialSpringVelocity: 0.0,
                   animations: {
                    self.center = point
    }, completion: { _ in
      //complete bounce to
      if self.shouldTransitionToFinishedState {
        self.animateToSquare()
      }
    })

    UIView.animate(withDuration: animationDuration,
                   delay: animationDuration,
                  usingSpringWithDamping: 0.7,
                   initialSpringVelocity: 1.0,
                   animations: {
        self.center = originalCenter
    }, completion: { _ in
      delay(seconds: 0.1) {
        if !self.isSquare {
          self.bounceOff(point: point, morphSize: morphSize)
        }
      }
    })

    let morphedFrame = (originalCenter.x > point.x) ?

      CGRect(x: 0.0, y: bounds.height - morphSize.height,
             width: morphSize.width, height: morphSize.height):

      CGRect(x: bounds.width - morphSize.width,
             y: bounds.height - morphSize.height,
             width: morphSize.width, height: morphSize.height)

    let morphAnimation = CABasicAnimation(keyPath: "path")
    morphAnimation.duration = animationDuration
    morphAnimation.toValue = UIBezierPath(ovalIn: morphedFrame).cgPath

    morphAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

    circleLayer.add(morphAnimation, forKey: nil)
    maskLayer.add(morphAnimation, forKey: nil)
  }

demo下載

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市掩蛤,隨后出現(xiàn)的幾起案子枉昏,更是在濱河造成了極大的恐慌,老刑警劉巖揍鸟,帶你破解...
    沈念sama閱讀 211,376評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件兄裂,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)恃泪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,126評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén)序目,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人匾南,你說(shuō)我怎么就攤上這事』淄猓” “怎么了蛆楞?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,966評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)夹厌。 經(jīng)常有香客問(wèn)我豹爹,道長(zhǎng),這世上最難降的妖魔是什么矛纹? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,432評(píng)論 1 283
  • 正文 為了忘掉前任臂聋,我火速辦了婚禮,結(jié)果婚禮上或南,老公的妹妹穿的比我還像新娘孩等。我一直安慰自己,他們只是感情好迎献,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,519評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布瞎访。 她就那樣靜靜地躺著,像睡著了一般吁恍。 火紅的嫁衣襯著肌膚如雪扒秸。 梳的紋絲不亂的頭發(fā)上播演,一...
    開(kāi)封第一講書(shū)人閱讀 49,792評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音伴奥,去河邊找鬼写烤。 笑死,一個(gè)胖子當(dāng)著我的面吹牛拾徙,可吹牛的內(nèi)容都是我干的洲炊。 我是一名探鬼主播,決...
    沈念sama閱讀 38,933評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼尼啡,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼暂衡!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起崖瞭,我...
    開(kāi)封第一講書(shū)人閱讀 37,701評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤狂巢,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后书聚,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體唧领,經(jīng)...
    沈念sama閱讀 44,143評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,488評(píng)論 2 327
  • 正文 我和宋清朗相戀三年雌续,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了斩个。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,626評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡驯杜,死狀恐怖受啥,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情艇肴,我是刑警寧澤腔呜,帶...
    沈念sama閱讀 34,292評(píng)論 4 329
  • 正文 年R本政府宣布叁温,位于F島的核電站再悼,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏膝但。R本人自食惡果不足惜冲九,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,896評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望跟束。 院中可真熱鬧莺奸,春花似錦、人聲如沸冀宴。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,742評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)略贮。三九已至甚疟,卻和暖如春仗岖,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背览妖。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工轧拄, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人讽膏。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓檩电,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親府树。 傳聞我的和親對(duì)象是個(gè)殘疾皇子俐末,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,494評(píng)論 2 348

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