创建对象的中心锚点

create center anchor point of object

我下面的 swift 代码试图围绕另一个图像视图旋转一个图像视图。我希望旋转像游戏旋转器一样工作。 link 接近我正在寻找的东西是 https://www.orientaltrading.com/large-spinner-wheel-stand-up-a2-13846120.fltr。现在我的代码没有这样做,您可以在下面的 gif 中看到代码当前正在做什么。 gif 没有按照我的意愿进行。我希望粉红色框的底部锚点是它的中心底部锚点,它连接到 uiviewcontroller 的中心。以一种方式旋转 180 度。就像上面 link 中的游戏微调器一样。

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;
    }
}

您的代码有两个问题:

  1. 锚点应等于 (0.5, 1)。 (底部中心)。
  2. 您设置锚点的时间不当。您的位置转换代码是正确的,但是 bounds 是 (0, 0, 0, 0).

从视图中删除 setAnchorPointRotate 调用确实加载并添加了这样的方法:

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

    view.setNeedsLayout()
    view.layoutIfNeeded()

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

viewWillAppear 中控制器视图的大小已经设置。并调用 view.setNeedsLayout()view.layoutIfNeeded() 布置您的盒子。您可以在这些调用前后检查 box 帧。

已测试,可在本地使用。

    // 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)
    }
}