소개

탭 게임 개발에서 점프 애니메이션은 필수적입니다.
자주 사용하는 애니메이션의 기본을 누리면서, 자신 취향에 어레인지 해 갑시다!

이 기사에서 다루지 않은 애니메이션은 여기에 알기 쉽게 정리되어 있으므로 추천합니다!
iOS 앱 개발로 애니메이션한다면 누르고 싶은 기초

구현

준비

Main.storyboard에 점프 기능이있는 버튼과 점프하는 플레이어 이미지를 배치하십시오.

ViewController.swift 에서 선언하면 연관도 잊지 마세요!

ViewController.swift

import UIKit

class GameDemoViewController: UIViewController {

    //使う部品をここに宣言！
    @IBOutlet var playerImageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    //ジャンプボタンを宣言！
    @IBAction func jump(){
        //ここにボタンを押したときにすることを書くよ

    }
}

애니메이션 구현

우선 애니메이션의 사용법을 간단하게 설명해 갑니다.

ViewController.swift

  //ジャンプボタンを宣言！
  @IBAction func jump(){

      UIView.animate(withDuration: 1.0, //アニメーションの継続時間
                     delay: 0.0, //ボタンを押してからアニメーションを開始するまでの時間
                     options: .autoreverse, //逆再生やタイミング曲線などのオプション指定
                     animations: { self.playerImageView.center.y -= 300.0 }, //アニメーションの内容
                     completion: nil //アニメーションが終わったときに何するか
      )
  }

duration에는 애니메이션을 원하는 시간delay에는 버튼을 누른 후 애니메이션이 시작될 때까지의 지연 시간options에서는 애니메이션 중에 사용할 타이밍 곡선의 종류 (애니메이션 중 가속도), 애니메이션의 역 재생 등을 지정할 수 있습니다. (.autoreverse에서 역 재생됨)animations 클로저 ({}) 안에는 애니메이션하고 싶은 내용을 씁니다.completion에는 애니메이션 재생이 끝난 후 원하는 내용을 씁니다. (nil 는 아무것도 하지 않는다.)

일단 이것으로 Run 해 보자!
지금은, 1초에 플레이어 화상이 위로 300pt 이동해, 역 재생할 뿐의 애니메이션입니다.
이런 느낌이 들었나요?


점프 할 수 있습니다!
그러나 플레이어는 점점 더 가고 있습니다. 이것은 애니메이션이 끝나면 초기 위치로 돌아가는 설정이 없기 때문입니다. competion 곳을 다음과 같이 바꾸어 봅시다!

ViewController.swift

  //ジャンプボタンを宣言！
  @IBAction func jump(){

      UIView.animate(withDuration: 1.0, //アニメーションの継続時間
                     delay: 0.0, //ボタンを押してからアニメーションを開始するまでの時間
                     options: .autoreverse, //逆再生やタイミング曲線などのオプション指定
                     animations: { self.playerImageView.center.y -= 300.0 } //アニメーションの内容
      ){ _ in
          self.playerImageView.center.y += 300.0 //アニメーション終了後にする内容
      }
  }

자, 이렇게 되었습니까?


좋은 느낌!
이것으로도 충분히 점프 할 수 있습니다만, 굉장히 기계적으로 느끼지 않습니까 ...?
원인은 애니메이션의 속도가 일정하다는 것입니다. 여기서 마치 중력을 느끼고 있는 것처럼 애니메이션하자! options에 하나 .curveEaseOut를 추가합니다!

ViewController.swift

  //ジャンプボタンを宣言！
  @IBAction func jump(){

      UIView.animate(withDuration: 1.0, //アニメーションの継続時間
                     delay: 0.0, //ボタンを押してからアニメーションを開始するまでの時間
                     options: [.curveEaseOut, .autoreverse], //逆再生やタイミング曲線などのオプション指定
                     animations: { self.playerImageView.center.y -= 300.0 } //アニメーションの内容
      ){ _ in
          self.playerImageView.center.y += 300.0 //アニメーション終了後にする内容
      }
  }

이렇게하면 ...


이봐! 위로 올라감에 따라 속도가 천천히 아래로 내려 오면 속도가 빨라지고 있습니다..curveEaseOut는 점차 속도를 낮추는 옵션입니다. 이와는 반대로 .curveEaseIn를 지정해 주면 서서히 속도가 빨라지는 애니메이션이 됩니다.

기본적인 점프 애니메이션의 설명은 여기까지! 수고하셨습니다^^

앞으로

withDuration, animations, options의 내용을 다양하게 바꾸어 플레이어가 움직이는 방향과 속도가 어떻게 될지 실제로 해보자!
시행착오해 가는 가운데, 자신이 만들고 싶은 게임 앱에 최적인 점프 애니메이션을 반드시 발견할 수 있어요.