如何旋转UIView绕它正确的中心而不失真/倾斜

Question

我已经构建了自己的动画引擎，我想在我渲染的每个帧上设置UI视图的旋转（60fps）

我现在制作了一个视频，展示了当前的问题。

它相当接近，但它仍然以一种奇怪的方式旋转：

https://www.youtube.com/watch?v=1ZKK4r0-6i4

我已经实现了一个自定义的CustomUIView类，它继承自UI视图。这具有平移，缩放和旋转属性，因此当我转换矩阵时，所有3个都发生在同一个动作中。

var t = CGAffineTransform( translationX: self.translation.x, y: 
self.translation.y );
// Apply scaling
t = t.scaledBy( x: self.scaling.x, y: self.scaling.y );
// Apply rotation
t = t.rotated(by:self.rotation)
self.transform = t

，大小和宽度设置如下：

view.frame.size.width = parseSize(value, axis: "width")
view.layer.bounds.size.width = parseSize(value, axis: "width")    

我正在尝试设置这两个属性，但我不确定这是否正确。

我已经设置了很多锚点，并且还尝试了视图的整体中心点。

Answer 1

问题在于我每个动画帧多次设置变换。这导致具有不同值的复合效果。您需要组织变量，以便仅在属性修改期间设置变换一次。

Answer 2

而不是使用

var t = CGAffineTransform( translationX: self.translation.x, y: 
self.translation.y );

使用

var t = CGAffineTransform(rotationAngle: CGFloat(Double.pi*self.rotation/180.0))

这会在不改变位置的情况下从中心旋转视图。

Answer 3

这可以帮助您根据您的要求使其工作：

@IBOutlet var scaleRotateImage: UIImageView!
func scaleNTransform() -> Void {

    scaleRotateImage.layer.cornerRadius = scaleRotateImage.frame.size.height/2.0
    scaleRotateImage.clipsToBounds = true

    let scaleTransform = CGAffineTransform(scaleX: 3.0, y: 3.0)  // Scale
    let rotateTransform = CGAffineTransform(rotationAngle: CGFloat.pi) // Rotation
    let hybridTransform = scaleTransform.concatenating(rotateTransform) // Both Scale + Rotation

    // Outer block of animation
    UIView.animate(withDuration: 5.0, animations: {
        self.scaleRotateImage.transform = scaleTransform
        self.view.layoutIfNeeded()
    }) { (isCompleted) in

        // Nested block of animation
        UIView.animate(withDuration: 5.0, animations: {
            self.scaleRotateImage.transform = hybridTransform
            self.view.layoutIfNeeded()
        })

    }


}

的结果