Swift3で時計の針をドラッグで回したいです

Question

###全く謎の挙動

http://qiita.com/Ryosuke-Hujisawa/items/f460a565a300d65a36a5

下記のURLではUIViewを二枚重ねて時計の針をクルクル回すように実装しているのですが、これをUIImageで実装することができません。

また、驚くことにUIViewの実装でも、原点となる場所をちょうど「９時」の部分に合わせるとうまくドラッグできるのですが、何故か原点となる場所をちょうど「０時」の部分に合わせるとうまくドラッグで回転しなくなります。原点の合わせ方は、UIViewのframeのwidthとheightで作っており、詳しくは下記の実装コードを見ていただきたいのですが、anchorPointを

CGPoint(x: 1.0, y: 1.0)

のようにすればうまく回ると思ったのです。

原点を9時に合わせる

myView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 20))

原点を０時に合わせる

myView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 20))

なぜ、そのような挙動になるのか全く謎で知恵をお貸しください。下記のURLでは正しく開店したgifアニメを貼り付けてあります。この質問状では、うまく回転していない状態のgifアニメを貼り付けます。ぜひアドバイスいただければ幸いです。

実装全コード

import UIKit

class ViewController: UIViewController {
    
    var myView: UIView!
    override func viewDidLoad() {
        super.viewDidLoad()
        myView = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 100))
        myView.center = self.view.center
        myView.backgroundColor = UIColor.red;
        self.view.addSubview(myView)
        myView.layer.anchorPoint = CGPoint(x: 1.0, y: 1.0)
        
        let box = UIView(frame: CGRect(x: 0, y: 0, width: 20, height: 20))
        box.backgroundColor = UIColor.blue
        myView.addSubview(box)
        
        myView.transform = CGAffineTransform(rotationAngle: 0)
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent!) {
        
        let touch = touches.first!
        if touch.view === myView.subviews[0] {
            let position = touch.location(in: self.view)
            let target = myView.center
            let angle = atan2(target.y-position.y, target.x-position.x)
            myView.transform = CGAffineTransform(rotationAngle: angle)
            print(angle)
            print(CGAffineTransform(rotationAngle: angle))
        }
    }
    
}

###試したこと

初期の状態では、針の原点が9時を指しているのですが、その際anchorPointは下記のように実装されています。下記のように書くことで、秒針の一番右側(x)を中心として針が回るようになります。

(x: 1.0, y: 0.5)

針の原点を0時に指した場合、時計の針は縦にまっすぐ伸びることになりますから、xの位置を0.5にしてyの位置を0.0もしくは1.0にすればうまく回るはずですが、0.0にした場合原点が下になり、1.0にした場合問題のコードのように何故か、選択した位置よりも90度向こう側へ瞬間移動してしまいます。

Answer 1

(target.y-position.y, target.x-position.x)はpositionから見たtargetの方角を意味するので、0時の地点でそのアークタンジェントを求めると90°になる...ということかと思います。一方9時の場合は0°ですので、正しい回転角が得られているのではないでしょうか。そのため、9時以外の初期角度の場合はangleを初期角度のずれの分だけ補正してやる必要があるかと思います。

Comments

[Bongo]

より新しい時刻の別のご質問がありましたね。拝見しましたが、既にご解決されたようで余計な投稿になってしまいすみません。