遊戲示意

swift 版本

kotlin 版本

swift - 改寫小雞動畫

原本畫面是這樣

下一步我們要將其他Label與UIButton都刪除
只留下小雞動畫
並將它縮小到畫面右上角

1. 刪除 Label + Button + ggAction 方法

2. 將小雞移動到右上角
   

   屬性(小雞)	對齊	設定

   Width| 無 |80|
   Aspect Ratio(比例)| 小雞上 按住 control 拉到自己身上 |Constant:0, Multlpller:15:8|
   上| Safe Area |30|
   右| Safe Area |100|

3. 修改動畫程式
   有個改動是, 之前為了練習
   小雞上下跳動採用 centerY 屬性
   centerY 是屬於絕對位置
   現在改成 translationY 的相對位移
   未來不管小雞放在哪個位置
   都不需要再變更設定摟

   import UIKit
   
   struct KeyFrameOptionItem {
       let startTime: Double // 動畫開始時間
       let translationX: CGFloat // 左右位移
       let translationY: CGFloat // 上下跳動
       let rotated: CGFloat // 上下角度
       let scaledX: CGFloat // 水平翻轉
   
       init(startTime: Double, translationX: CGFloat, translationY: CGFloat, rotated: CGFloat, scaledX: CGFloat)  {
           let oneDegree = CGFloat.pi / 180 // 透過pi轉換rotated角度
           self.startTime = startTime
           self.translationX = translationX
           self.rotated = rotated * oneDegree
           self.translationY = translationY
           self.scaledX = scaledX
       }
   }
   
   
   
   class ViewController: UIViewController {
       //小雞 圖片 參照
       @IBOutlet weak var ggImg: UIImageView!
       //小雞 動畫參數
       var chickKeyFrameOptions: Array<KeyFrameOptionItem> = []
   
       override func viewDidLoad() {
           super.viewDidLoad()
   
           self.setChickKeyFrameOption()
           self.setChickAnimation()
       }
   
   
       func setChickAnimation() {
           UIView.animateKeyframes(
               withDuration: 4,
               delay: 0.0,
               options: [.repeat, .calculationModeLinear],
               animations: {
                   for option in self.chickKeyFrameOptions {
                       UIView.addKeyframe(
                           withRelativeStartTime: option.startTime,
                           relativeDuration: 0.1,
                           animations: {
                               self.ggImg.transform = CGAffineTransform(translationX: option.translationX, y: option.translationY)
                                   .rotated(by: option.rotated)
                                   .scaledBy(x: option.scaledX, y: 1.0)
                           }
                       )
                   }
               },
               completion: nil
           )
       }
   
   
       fileprivate func setChickKeyFrameOption() {
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.0, translationX: -17.0, translationY: 0.0, rotated: 10, scaledX: 1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.1, translationX: -33.0, translationY:  -10.0, rotated: -10, scaledX: 1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.2, translationX: -50.0, translationY:  0, rotated: 10, scaledX: 1.0))
           // 以上向左邊跳到底後轉身往回走
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.3, translationX: -33.0, translationY:  -10.0, rotated: -10, scaledX:  -1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.4, translationX: -27.0, translationY: 0.0, rotated: 10, scaledX:  -1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.5, translationX: 0.0,  translationY: -10.0, rotated: -10, scaledX: -1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.6, translationX: 30.0, translationY:  0.0, rotated: 10, scaledX:  -1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.7, translationX: 50.0, translationY:  -10.0, rotated: -10, scaledX: -1.0))
           //跳到最右邊後 轉身往原點走
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.8, translationX: 20.0, translationY:  0.0, rotated: 10, scaledX:  1.0))
           self.chickKeyFrameOptions.append(KeyFrameOptionItem(startTime: 0.9, translationX: 0.0, translationY:  -10.0, rotated: -10, scaledX: 1.0))
       }
   
   }
   

4. 背景小雞修改完成
   

kotlin - 改寫小雞動畫

原本畫面是這樣

kotlin這邊相對比較簡單

1. 刪除 textView + Button + ggAction 方法

2. 將小雞移動到右上角
   

   屬性(小雞)	對齊	設定

   layout_width| 無 |40dp|
   layout_height| 無 |40dp|
   End -> EndOf| parent |50dp|
   Top -> TopOf| parent |15dp|

3. 背景小雞修改完成
   

差異

到目前 不管是比較排版 或者動畫綁定
兩邊寫法都沒有太大差別

寫起來的感覺是 只要一邊想到辦法
另一邊就可以用同樣的思考方法做出來

小碎嘴時間 ヽ(ﾟ´Д`)ﾉﾟ

第20天了～(=￣ω￣=)
寫到現在認真覺得～鐵人賽不簡單啊～

難得是～要一邊學習
一邊將學到的東西記錄下來

好難啊～
有時候研究了兩三個小時 然後～
發現研究方向是錯的！！ 歸零！！！
＜( ￣︿￣)︵θ︵θ︵θ︵θ︵☆（＞口＜－） 流星拳攻擊

真難啊～～～