iOS動畫程式設計-Layer動畫[ 2 ] Getting Started with Layer Animations

Hydrogen發表於2015-12-20
iOS動畫程式設計

本節將介紹CALayer與Core Animation基礎，找找通過Layer操作動畫的感覺，你將學到如何移動、隱藏顯示Layer的方法

animation properties

Layer中很多動畫屬性的使用方法與View類似，例如frame、position、opacity等，另外還提供了border、shadow等新屬性，接下來我們來看看Layer中給了我們什麼可以動畫變化的屬性

Position and size

  • bound
    Layer的範圍

  • position
    Layer在父Layer中的的位置，可以分別修改x、y
    -transform
    改變中國屬性可以移動、縮放、旋轉Layer，甚至可以加入3D動畫

Border

  • borderColor
    邊框顏色

  • borderWidth
    邊框寬度

  • cornerRadius
    角的弧度,可以實現圓角

Shadow

  • shadowOffset
    改變這個屬性可以改變陰影與Layer的遠近

  • shadowOpacity
    改變這個屬性可以改變陰影的顯示

  • shadowPath
    改變Layer shadow的形狀，可以加入各種各樣的3D效果

  • shadowRadius
    改變陰影的模糊程度，在模擬物體朝向螢幕運動或遠離螢幕的動畫中使用較多

Contents

  • content
    改變這個屬性可以改變Layer內含的TIFF、PNG原始資料

  • mask
    改變這個屬性可以改變影像上的遮蓋

  • opacity
    改變內容的透明度

以上的屬性就已經足夠你實現一些基於Layer的動畫了，下面我們通過Demo練習一下

First Layer Animation

這次我們的Demo利用Layer Animation替換之前登入頁面Demo中的View Animation
我們從heading開始，在viewWillAppear及viewDidAppear方法中刪除有關程式碼（對於控制元件初位置的設定在動畫中實現）

建立動畫

我們在在viewDidAppear方法中新增動畫

    let flyRight = CABasicAnimation(keyPath: "position.x") 
    flyRight.fromValue = -view.bounds.size.width/2 
    flyRight.toValue = view.bounds.size.width/2 
    flyRight.duration = 0.5

CoreAnimation中的物件都是一些簡單的資料模型，我們只需例項化並設定相應的資料即可
一個CA例項描述了具體的Layer動畫，你可以隨時使用這個動畫
這些動畫例項並不急於具體的Layer，你可以在需要的時候重用程式碼，每次新增動畫時都會建立它的一份拷貝
對於一個CA物件，你可以很方便的通過keypath引數具體說明動畫的屬性
隨後我們設定了fromValue、toValue屬性調整了動畫的開始與結束
最後我們設定了動畫進行的時間

把動畫新增到layer上

通過上面的程式碼我們已經建立了動畫，現在我們來把動畫新增到具體的layer上

    heading.layer.addAnimation(flyRight, forKey: nil)

我們這裡呼叫的addAnimation(_: forKey:)方法用於將CA物件建立一個拷貝並且應用在layer上，第二個引數forKey僅僅用於動畫的使用者，通過這個引數可以實現改變、停止這個動畫等操作。

相關文章