layer分組緩沖和常見動畫詳解

分組動畫

當知道怎樣把多個動畫單獨添加到layer層上面,通過控制它們的時間,來實現對動畫之間同步的工作。但這樣的代碼可讀性會稍差點,所以,今天的CAAnimationGroup可以簡單實現動畫之間的同步工作

通過對登錄界面,對登錄按鈕使用分組動畫來了解layer的分組動畫

思路: 創建了一個動畫分組,繼承CAAnimation。caanimation的屬性也可以使用于CAAnimationGroup,
為登錄按鈕添加動畫,將動畫添加到分組中

代碼如下:
let groupAnimation = CAAnimationGroup() groupAnimation.beginTime = CACurrentMediaTime() + 0.5 groupAnimation.duration = 0.5 groupAnimation.fillMode = kCAFillModeBackwards let scaleDown = CABasicAnimation(keyPath: "transform.scale") scaleDown.fromValue = 3.5 scaleDown.toValue = 1.0 let rotate = CABasicAnimation(keyPath: "transform.rotation") rotate.fromValue = CGFloat(M_PI_4) rotate.toValue = 1.0 let fade = CABasicAnimation(keyPath: "opacity") fade.fromValue = 0.0 fade.toValue = 1.0 groupAnimation.animations = [scaleDown, rotate, fade] loginButton.layer.addAnimation(groupAnimation, forKey: nil)

現在的動畫已經添加出來了,但為了讓這個動畫看上去順眼,需要給這個動畫添加緩沖

layer動畫的緩沖用到了一個CAMediaTimingFunction這樣一個屬性,CAMediaTimingFunction預定義了4種常量。li near勻速變化;easier開始慢,然后加速;ease out 開始塊,結束慢;easeinout開始和結束慢,中間快。

groupAnimation.fillMode = kCAFillModeBackwards

layer 動畫其他屬性的設置:

flyLeft.repeatCount = 2.5
flyLeft.autoreverses = true
flyLeft.speed = 2.0
info.layer.speed = 2.0

效果圖:

分組動畫.gif

demo下載地址

layer層面的彈簧效果實現

uikit創建的是一個簡單的彈簧動畫,而core animation是對物理體進行的渲染。
舉個例子:
在沒有摩擦的情況下,鐘擺會一直做左右運動。當有摩擦時,鐘擺每次的擺動都會逐漸減小。這是和阻尼,初始化的里決定的。在uikit動畫中,系統會根據時間自動調整這兩個因素。在core animation中可以通過CASpringAnimation創建出逼真的彈簧動畫效果

仍以登錄的輸入用戶名和密碼的textfield 動畫結束時,產生一個動畫的特效為例

let pulse = CASpringAnimation(keyPath: "transform.scale") pulse.damping = 7.5 pulse.fromValue = 1.25 pulse.toValue = 1.0 pulse.duration = pulse.settlingDuration layer?.addAnimation(pulse, forKey: nil)

實現一個當textfield輸入的字符過少時,讓textfield自動彈跳提示用戶

首先先了解一下CASpringAnimation的四個屬性:
用一張表給出:

CASpringAnimation屬性.png

核心動畫
func textFieldDidEndEditing(textField: UITextField) { if textField.text?.characters.count < 5 { let jump = CASpringAnimation(keyPath: "position.y") jump.fromValue = textField.layer.position.y + 1.0 jump.toValue = textField.layer.position.y jump.initialVelocity = 100.0//指定速度 jump.mass = 10.0//指定質量 jump.stiffness = 1500.0//設置引力 jump.damping = 50.0//設置阻尼 jump.duration = jump.settlingDuration textField.layer.addAnimation(jump, forKey: nil) } textField.layer.borderWidth = 3.0 textField.layer.borderColor = UIColor.clearColor().CGColor let flash = CASpringAnimation(keyPath: "borderColor") flash.damping = 7.0 flash.stiffness = 200.0 flash.fromValue = UIColor(red: 0.96, green: 0.27, blue: 0.0, alpha: 1.0).CGColor flash.toValue = UIColor.clearColor().CGColor flash.duration = flash.settlingDuration textField.layer.addAnimation(flash, forKey: nil) }

效果圖:

layer彈簧動畫.gif

layer層幀動畫

與視圖的關鍵幀動畫不同,視圖的關鍵幀動畫是將獨立的動畫混合在一起。la ye r層的幀動畫只能對單一屬性的動畫,可以創建多個點,但是不能有任何的重疊和間隔
CAKeyframeAnimation可以實現layer的關鍵幀動畫。

補充知識:層動畫是根據duration時間內,通過設置fromvalue和to value 改變指定layer的屬性。而CAKeyframeAnimation會使用一個數組values代替from value和to value ,values中存儲在動畫時間內每個時間點上的關鍵值。

使用關鍵幀動畫模仿登錄認證失敗時的動畫

核心代碼如下:
let wobble = CAKeyframeAnimation(keyPath: "transform.rotation") wobble.duration = 0.25 wobble.repeatCount = 4 wobble.values = [0.0, -M_PI_4/4, 0.0, M_PI_4/4, 0.0] wobble.keyTimes = [0.0, 0.25, 0.5, 0.75, 1.0] heading.layer.addAnimation(wobble, forKey: nil)

談論一下如何對結構類屬性做動畫,目前只是單純地為結構類的某個分量做的動畫

結構類屬性有常見的如:CGpoint,CATransform3D,所以要對結構體屬性做動畫,就需要封裝這個結構體,讓結構體轉變成對象。此時就需要借住nsvalue這個類,nsvalue有很多初始化方法,便于結構體轉變成對象。

用一張la ye r層上的圖片通過改變它在屏幕上的point來驗證結構體屬性的動畫

核心代碼如下:

let balloon = CALayer() balloon.contents = UIImage(named: "balloon")!.CGImage balloon.frame = CGRect(x: -50.0, y: 0.0, width: 50.0, height: 65.0) view.layer.insertSublayer(balloon, below: username.layer) let flight = CAKeyframeAnimation(keyPath: "position") flight.duration = 12.0 flight.values = [CGPoint(x: -50, y: 0.0),CGPoint(x: view.frame.width + 50.0, y: 160.0),CGPoint(x: -50.0, y: loginButton.center.y)].map{ NSValue(CGPoint:$0)}//通過map閉包可以將cgpont類型轉成nsvalue的對象 flight.keyTimes = [0.0, 0.5, 1.0] balloon.addAnimation(flight, forKey: nil) balloon.position = CGPoint(x: -50.0, y: loginButton.center.y)

效果展示:

幀動畫的實現.gif

下載地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • layer動畫的實現 layer動畫就是層動畫,工作原理和視圖動畫相同。在開始或者是結束時間改變la ye r的屬...
    shineDeveloper閱讀 836評論 1 4
  • 一、UIKit動畫 第一種寫法是利用屬性,結合beginAnimations、commitAnimations 第...
    Gary_Tseng閱讀 982評論 1 3
  • 顯式動畫 顯式動畫,它能夠對一些屬性做指定的自定義動畫,或者創建非線性動畫,比如沿著任意一條曲線移動。 屬性動畫 ...
    清風沐沐閱讀 1,975評論 1 5
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6 30
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,141評論 5 13