iOS動畫(二):核心動畫中的基礎(chǔ)移動(Swift)

參考:

Core Animation中類繼承關(guān)系

簡單的移動

  • 新建一個CALayer英染。

      lazy var redLayer: CALayer = {
          return self.createLayer()
      }()
    
    
      func createLayer() -> CALayer {
          let redLayer = CALayer()
          
          redLayer.position = CGPoint(x: 200, y: 200)
          redLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
          redLayer.backgroundColor = UIColor.red.cgColor
          return redLayer
      }
    
  • 把新建的CALayer添加的viewlayer中。

    view.layer.addSublayer(redLayer)
    
  • 遵守協(xié)議CAAnimationDelegate

      class BasicPostionViewController: UIViewController, CAAnimationDelegate {
    
  • 創(chuàng)建動畫CABasicAnimation,并添加的CALayer中秋忙。

      func createCABasicAnimation() -> CABasicAnimation {
          let basicAni = CABasicAnimation()
          // 設(shè)置動畫屬性
          basicAni.keyPath = "position"
          
          basicAni.fromValue = NSValue.init(cgPoint: CGPoint(x: 0, y: 0))
          
          basicAni.toValue = NSValue.init(cgPoint: CGPoint(x: 300, y: 300))
          
          basicAni.duration = 2
          
          basicAni.fillMode = kCAFillModeForwards
          
          basicAni.isRemovedOnCompletion = false
          
          basicAni.delegate = self
    
          return basicAni
      }
    
          let basicAni = createCABasicAnimation()
          self.redLayer.add(basicAni, forKey: "basicPosition")    
    
    • forKey 是動畫對象的名字,只是用來標(biāo)識构舟,沒有特殊意義灰追。

稍微復(fù)雜的移動

原理和上面相同,都是先創(chuàng)建CALayer狗超,然后添加CABasicAnimation弹澎。

class BasicPostion2ViewController: UIViewController, CAAnimationDelegate{

    lazy var redLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)
    }()
    
    lazy var greenLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 250), backgroundColor: UIColor.green)
    }()
    
    lazy var cyanLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 350), backgroundColor: UIColor.cyan)
    }()
    
    lazy var blueLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 450), backgroundColor: UIColor.blue)
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        redLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 150), toValue: CGPoint(x: 300, y: 150), timingFunction: kCAMediaTimingFunctionLinear), forKey: "basicAnimation")
        view.layer.addSublayer(redLayer)
        
        greenLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 250), toValue: CGPoint(x: 300, y: 250), timingFunction: kCAMediaTimingFunctionEaseIn), forKey: "basicAnimation")
        view.layer.addSublayer(greenLayer)
        
        cyanLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 350), toValue: CGPoint(x: 300, y: 350), timingFunction: kCAMediaTimingFunctionEaseOut), forKey: "basicAnimation")
        view.layer.addSublayer(cyanLayer)
        
        blueLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 450), toValue: CGPoint(x: 300, y: 450), timingFunction: kCAMediaTimingFunctionEaseInEaseOut), forKey: "basicAnimation")
        view.layer.addSublayer(blueLayer)
    }

    func createLayer(postion: CGPoint, backgroundColor: UIColor) -> CALayer {
        let layer = CALayer()
        layer.position = postion
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
        layer.backgroundColor = backgroundColor.cgColor
        return layer
    }
    
    func createBasicAnimation (fromValue: CGPoint, toValue: CGPoint, timingFunction: String) -> CABasicAnimation {
        let basicAni = CABasicAnimation()
        
        basicAni.keyPath = "position"
        
        basicAni.fromValue = fromValue
        
        basicAni.toValue = toValue
        
        basicAni.duration = 2
        
//        basicAni.fillMode = kCAFillModeForwards
        
//        basicAni.isRemovedOnCompletion = false
        // 1
        basicAni.timingFunction = CAMediaTimingFunction(name: timingFunction)
        
        basicAni.delegate = self

        return basicAni
    }

}
  • 1 timingFunction代表移動模式:
    • kCAMediaTimingFunctionLinear(線性):勻速,給你一個相對靜態(tài)的感覺
    • kCAMediaTimingFunctionEaseIn(漸進(jìn)):動畫緩慢進(jìn)入努咐,然后加速離開
    • kCAMediaTimingFunctionEaseOut(漸出):動畫全速進(jìn)入苦蒿,然后減速的到達(dá)目的地
    • kCAMediaTimingFunctionEaseInEaseOut(漸進(jìn)漸出):動畫緩慢的進(jìn)入,中間加速渗稍,然后減速的到達(dá)目的地佩迟。

代碼: 89-Animation/CABasic Animation

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市免胃,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌惫撰,老刑警劉巖羔沙,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異厨钻,居然都是意外死亡扼雏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進(jìn)店門夯膀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诗充,“玉大人,你說我怎么就攤上這事诱建『眩” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵俺猿,是天一觀的道長茎匠。 經(jīng)常有香客問我,道長押袍,這世上最難降的妖魔是什么诵冒? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮谊惭,結(jié)果婚禮上汽馋,老公的妹妹穿的比我還像新娘侮东。我一直安慰自己,他們只是感情好豹芯,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布悄雅。 她就那樣靜靜地躺著,像睡著了一般告组。 火紅的嫁衣襯著肌膚如雪煤伟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天木缝,我揣著相機(jī)與錄音便锨,去河邊找鬼。 笑死我碟,一個胖子當(dāng)著我的面吹牛放案,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播矫俺,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼吱殉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了厘托?” 一聲冷哼從身側(cè)響起友雳,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎铅匹,沒想到半個月后押赊,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡包斑,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年流礁,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罗丰。...
    茶點(diǎn)故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡神帅,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出萌抵,到底是詐尸還是另有隱情找御,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布绍填,位于F島的核電站萎坷,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏沐兰。R本人自食惡果不足惜哆档,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望住闯。 院中可真熱鬧瓜浸,春花似錦澳淑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至雇寇,卻和暖如春氢拥,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锨侯。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工嫩海, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人囚痴。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓叁怪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親深滚。 傳聞我的和親對象是個殘疾皇子奕谭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評論 2 345

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

  • 在iOS中隨處都可以看到絢麗的動畫效果,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜痴荐,今天將帶大家一窺ios動畫全貌血柳。在這里你可以看...
    每天刷兩次牙閱讀 8,465評論 6 30
  • Core Animation Core Animation,中文翻譯為核心動畫生兆,它是一組非常強(qiáng)大的動畫處理API难捌,...
    45b645c5912e閱讀 3,016評論 0 21
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫皂贩,幀動畫栖榨,自定義轉(zhuǎn)場動畫昆汹。 1.UIView...
    請叫我周小帥閱讀 3,078評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果明刷,實(shí)現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺iOS動畫全貌满粗。在這里你可以看...
    F麥子閱讀 5,094評論 5 13
  • 先看看CAAnimation動畫的繼承結(jié)構(gòu) CAAnimation{ CAPropertyAnimation { ...
    時間不會倒著走閱讀 1,638評論 0 1