4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

対象(ImageView)の回転について

Last updated at Posted at 2020-09-17

#はじめに
iPhoneアプリ開発における目標物の回転についての記事です。
ImageViewの回転について実装したので、自分で思い出すためにも記事にしておきます。

#実装
回転を実装するにはanimateプロパティにおいて、*"CGAffineTransform"*を用います。CGAffineTransform(rotationAngle:CGFloat.回転角)とすることで実装できます。

viewController.swift
import UIKit
   
class ViewController: UIViewController {

    @IBOutlet weak var rouletteView: UIImageView!
    @IBOutlet weak var button: UIButton!
    
    func rotation() {
        UIView.animate(withDuration: 1, animations: {
            
            self.rouletteView.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
            
            })
            
    }
    
    @IBAction func go(_ sender: Any) {
        rotation()
    }

}

以上のように記述すると、回転角が pi = 180°となっているので半回転します。
ezgif.com-gif-maker.gif
※ここで注意したいのが、角度の指定にはpiを用いなければならないので、

viewController.swift
    self.rouletteView.transform = CGAffineTransform(rotationAngle: CGFloat.45)

などとするとエラーが返されます。
なので、細かい角度まで調整したいときは、

viewController.swift
    self.rouletteView.transform = CGAffineTransform(rotationAngle: CGFloat.pi/4)
    self.rouletteView.transform = CGAffineTransform(rotationAngle: 45*CGFloat.pi/180)//などでも正常に動作します

と記述すれば動作します。
ezgif.com-gif-maker (1).gif

もう一つ問題があります。
例えば、以下のように240°回転させるような記述をしたとします。

viewController.swift
    self.rouletteView.transform = CGAffineTransform(rotationAngle: 240*CGFloat.pi/180)

すると...
ezgif.com-gif-maker (2).gif
このように、120°逆回転しています。
この記述は、確かに240°回転するように書かれています。ただ、機械からすると240°回転したときの"到達点"への回転移動を行っていることになります。したがって、240°右回転するよりも120°左に回ってしまった方が、速く処理できますから左回転してしまうわけです。

ということはもちろん以下の記述をしたときは...

viewController.swift
    self.rouletteView.transform = CGAffineTransform(rotationAngle: 360*CGFloat.pi/180)

sample.png
見事ですね!微動だにしません笑

###解決方法
では、181°~360°での右回転はどのようにしたらいいのかというと...

viewController.swift
    self.rouletteView.transform = CGAffineTransform(rotationAngle: 180*CGFloat.pi/180)
    self.rouletteView.transform = CGAffineTransform(rotationAngle: 240*CGFloat.pi/180)

このように、2回に分けて処理を行えば動作します。1行目の
self.rouletteView.transform = CGAffineTransform(rotationAngle: 180*CGFloat.pi/180)で
半回転させてしまえば、そこ(180°)の地点から181°~360°の地点は右回転が最短ルートになるので、そのまま右回転を続けるというわけです。
ezgif.com-gif-maker (3).gif

また、ルーレットのように複数回回転するような場合は、以下のように制御構文を用いてあげれば問題ないです。

viewController.swift
    func rotation() {
        UIView.animate(withDuration: 1.5, animations: {
            
            let number = Int.random(in: 1..<360)
            for _ in 0...2{
                self.rouletteView.transform = CGAffineTransform(rotationAngle: 180*CGFloat.pi/180)
                self.rouletteView.transform = CGAffineTransform(rotationAngle: 360*CGFloat.pi/180)//360で1回転
            }
            
            self.rouletteView.transform = CGAffineTransform(rotationAngle: CGFloat.pi/180*CGFloat(number))
            
        })
         
    }

ezgif.com-gif-maker (4).gif

#まとめ
今回、初めてのQiita投稿になったので思っていたよりも時間がかかってしまいましたが、なんとか投稿できてよかったです。文章やコードなど、おかしい点などありましたらコメントいただけると助かります。

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?