如何围绕正确的中心旋转 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

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

@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()
        })

    }


}

结果

Answer 3

而不是使用

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

使用

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

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