1. 程式人生 > >[Xcode10 實際操作]九、實用進階-(20)建立位移關鍵幀動畫:通過新增運動關鍵點製作位移動畫

[Xcode10 實際操作]九、實用進階-(20)建立位移關鍵幀動畫:通過新增運動關鍵點製作位移動畫

本文將演示如何通過新增運動關鍵點的方式,來製作位移動畫

在專案導航區,開啟檢視控制器的程式碼檔案【ViewController.swift】

 1 import UIKit
 2  
 3  //新增一個代理協議CAAnimationDelegate
 4  class ViewController: UIViewController, CAAnimationDelegate {
 5     
 6     override func viewDidLoad() {
 7         super.viewDidLoad()
 8         // Do any additional setup after loading the view, typically from a nib.
9 10 //建立一個影象檢視,並設定位置在(40,80),尺寸為(64,64) 11 let imageView = UIImageView(frame: CGRect(x: 40, y: 80, width: 64, height: 64)) 12 //從專案資原始檔夾載入資源,並賦予影象檢視 13 imageView.image = UIImage(named: "star") 14 //將影象檢視,新增到當前檢視控制器的根檢視 15 self.view.addSubview(imageView)
16 17 //初始化一個關鍵幀動畫物件, 18 //該物件提供了對對關鍵幀動畫的支援 19 //可以為層屬性指定關鍵路徑,使其產生相應的動畫 20 let animation = CAKeyframeAnimation(keyPath: "position") 21 22 //新增一個路徑上的四個關鍵錨點 23 let point1 = CGPoint(x: 40, y: 80) 24 let point2 = CGPoint(x: 280, y: 80)
25 let point3 = CGPoint(x: 60, y: 300) 26 let point4 = CGPoint(x: 280, y: 300) 27 28 //建立幀動畫的值陣列,在動畫執行的時候, 29 //陣列中的每個值,就會被輪流進行插值使用 30 animation.values = [NSValue(cgPoint: point1), NSValue(cgPoint: point2), 31 NSValue(cgPoint: point3), NSValue(cgPoint: point4)] 32 //再建立一個數組,儲存幀動畫的關鍵時間點 33 animation.keyTimes = [NSNumber(value: 0.0), NSNumber(value: 0.4), 34 NSNumber(value: 0.6), NSNumber(value: 1.0)] 35 36 //設定關鍵幀動畫的代理物件,為當前檢視控制器 37 animation.delegate = self 38 //設定關鍵幀動畫時長為5秒鐘 39 animation.duration = 5.0 40 41 //給影象檢視的層,新增關鍵幀動畫,開始動畫的播放 42 imageView.layer.add(animation, forKey: "Move") 43 } 44 45 //新增一個代理方法,用來響應動畫開始的事件 46 func animationDidStart(_ anim: CAAnimation) { 47 //在控制檯列印輸出日誌 48 print("The animation starts") 49 } 50 51 //新增一個代理方法,用來響應動畫結束的事件 52 func animationDidStop(_ anim: CAAnimation, finished flag: Bool) { 53 //在控制檯列印輸出日誌 54 print("End of the animation") 55 } 56 57 override func didReceiveMemoryWarning() { 58 super.didReceiveMemoryWarning() 59 // Dispose of any resources that can be recreated. 60 } 61 }

留意動畫速度的變化。