UIView自动旋转问题 [英] UIView autorotation issue

问题描述

我在UIView的自动旋转中遇到了问题，它只是宽4的红线和横向模式下超级视图高度的一半，而在纵向模式下，高度是4点，宽度是超级视图宽度的一半.您可以在gif中看到该问题.当我从横向旋转到纵向时，自动旋转的效果并不平滑且会变形.

I am getting issues in autorotation of a UIView which is nothing but a red line of width 4 and height half of superview's height in landscape mode, and in portrait mode the height is 4 points and width is half of superview width. You can see the issue in the gif. As I rotate from landscape to portrait, the effect of autorotation is not smooth and with distortions.

这是代码.我在做什么错了?

Here is the code. What am I doing wrong?

private var myView:UIView!

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    myView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.width/2, height: 4))
    myView.backgroundColor = UIColor.red
    view.addSubview(myView)

    myView.center = CGPoint(x: view.bounds.width/2, y: view.bounds.height/2)


}

private func layoutMyView() {

    let orientation = UIApplication.shared.statusBarOrientation

    if orientation == .landscapeLeft || orientation == .landscapeRight {
        myView.frame = CGRect(x: 0, y: 0, width: view.bounds.width/2, height: 4)
    } else {
        myView.frame = CGRect(x: 0, y: 0, width: 4, height: view.bounds.height/2)
    }

    myView.center = CGPoint(x: view.bounds.width/2, y: view.bounds.height/2)
}


override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {

    let orientation = UIApplication.shared.statusBarOrientation

    NSLog("View will transition to \(size), \(orientation.rawValue)")

    if size.width < size.height {
        NSLog("Portrait mode")
    } else {
        NSLog("Landscape mode")
    }

    super.viewWillTransition(to: size, with: coordinator)

    coordinator.animate(alongsideTransition: { [unowned self] (_) in

        let orient = UIApplication.shared.statusBarOrientation

         self.layoutMyView()

        }, completion: { [unowned self] (UIViewControllerTransitionCoordinatorContext) -> Void in

            let orient = UIApplication.shared.statusBarOrientation
            self.layoutMyView()
            NSLog("rotation completed to \(orient.rawValue), \(self.myView.frame)")
    })
}

推荐答案

有一些潜在的选择:

1. 在animate(alongsideTransition:completion:)中，进行关键帧动画以设置中间动画点，这样您就不会以那种好奇的四方形感觉为中间动画了.例如.缩小到4x4的盒子

1. In animate(alongsideTransition:completion:), do a keyframe animation to set mid animation point so you don’t end up with that curious boxy feel mid animation. E.g. this shrink it down to a 4x4 box

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    super.viewWillTransition(to: size, with: coordinator)

    let origin = CGPoint(x: (view.bounds.midX + view.bounds.midY) / 2 - 2,
                         y: (view.bounds.midX + view.bounds.midY) / 2 - 2)

    coordinator.animate(alongsideTransition: { _ in
        UIView.animateKeyframes(withDuration: coordinator.transitionDuration, delay: 0, animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.5) {
                self.myView.frame = CGRect(origin: origin, size: CGSize(width: 4, height: 4))
            }

            UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
                self.layoutMyView()
            }
        })
    })
}

此主题有很多可能的变体.这仍然使视图具有生气勃勃的效果，但是却赋予了它一种蓄意"的氛围，并且不会失去其线条"感.

There are many possible variations on this theme. This still animates the view, but gives it a more "deliberate" sort of vibe and doesn’t lose the "line" feel of it.

使用 CAShapeLayer而不是用UIView渲染线". 并更新其 path .

Rather than rendering a "line" with UIView, use CAShapeLayer and update its path.

在过渡过程中，您可以运行 CADisplayLink ，然后随着动画的进行将帧更新为所需的帧.

You could run a CADisplayLink while transition is in progress, and then update the frame to whatever you want as the animation progresses.

您可以为该视图的transform设置动画，而不是为frame设置动画，而可以沿与视图旋转相反的方向对其进行旋转.

Instead of animating the frame, you could animate the transform of this view, possibly rotating it in the opposite direction that the view is rotating.

这篇关于UIView自动旋转问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！