创建对象的中心锚点

Question

我下面的swift代码试图围绕另一个imageeview旋转一个imageeview。我希望旋转能像游戏旋转器一样工作。与我所寻找的东西相近的链接是 https:/www.orientaltrading.comlarge-spinner-wheel-stand-up-a2-13846120.fltr. 现在我的代码没有做到这一点，你可以在下面的gif中看到代码目前在做什么。gif没有做我想做的事情。我希望粉色方框的底部锚点是它的中心底部锚点，它连接到uiviewcontroller的中心。这样单向旋转180度。就像上面链接中的游戏旋转器一样。

import UIKit

class ViewController: UIViewController {
    var box = UIImageView()
    var box1 = UIImageView()
    override func viewDidLoad() {
        super.viewDidLoad()

        box.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(box)
        box.backgroundColor = .systemPink
        box1.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(box1)
        box1.backgroundColor = .purple

        self.box.setAnchorPoint(anchorPoint: CGPoint(x: 0.5, y: 0.5))

        Rotate()

        NSLayoutConstraint.activate([
            box.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.25),
            box.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.25),
            box.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            box.bottomAnchor.constraint(equalTo: view.centerYAnchor),

            box1.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.05),
            box1.widthAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.05),
            box1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            box1.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        // Do any additional setup after loading the view.
    }


    func Rotate(){

        let   rotation = UIViewPropertyAnimator(duration: 25, curve: .linear, animations: {

            self.box.transform = self.box.transform.rotated(by: CGFloat.pi/0.94)

        })
        rotation.startAnimation()

    }





}

extension UIView{
    func setAnchorPoint(anchorPoint: CGPoint) {

        var newPoint = CGPoint(x: self.bounds.size.width * anchorPoint.x, y: self.bounds.size.height * anchorPoint.y)
        var oldPoint = CGPoint(x: self.bounds.size.width * self.layer.anchorPoint.x, y: self.bounds.size.height * self.layer.anchorPoint.y)

        newPoint = newPoint.applying(self.transform)
        oldPoint = oldPoint.applying(self.transform)

        var position : CGPoint = self.layer.position

        position.x -= oldPoint.x
        position.x += newPoint.x;

        position.y -= oldPoint.y;
        position.y += newPoint.y;

        self.layer.position = position;
        self.layer.anchorPoint = anchorPoint;
    }
}

Answer 1

你的代码有两个问题。

1. 锚点应该等于(0. 5, 1)： (底部中心)。
2. 你设置锚点的时间不合适。你的转换位置的代码是正确的，但是......你的代码有两个问题：锚点应该是相等的（0.5，1）。bounds 是（0，0，0，0）。

删除 setAnchorPoint 和 Rotate 从视图中调用确实加载和添加了这样的方法。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    view.setNeedsLayout()
    view.layoutIfNeeded()

    self.box.setAnchorPoint(anchorPoint: CGPoint(x: 0.5, y: 1))
    Rotate()
}

In viewWillAppear 控制器视图的大小已经设置好了。而调用 view.setNeedsLayout() 和 view.layoutIfNeeded() 布局你的箱子。你可以检查 box 这些调用前后的帧。

Answer 2

经过测试，它在本地工作。

    // No need for a seperate extension
    self.box.layer.anchorPoint = CGPoint(x: 0.5, y: 1)

    // Start Animation
    Rotate()

    NSLayoutConstraint.activate([
        box.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.25),
        box.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.25),
        box.centerXAnchor.constraint(equalTo: view.centerXAnchor),

        // Use centerYAnchor instead of bottomAnchor
        box.centerYAnchor.constraint(equalTo: view.centerYAnchor),

        box1.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.05),
        box1.widthAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.05),
        box1.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        box1.centerYAnchor.constraint(equalTo: view.centerYAnchor)
    ])
    // Do any additional setup after loading the view.
}

// Use simple UIView animation
func Rotate(){
    UIView.animate(withDuration: 25) {
        self.box.transform = CGAffineTransform(rotationAngle: CGFloat.pi/0.94)
    }
}