在其中心旋转NSImageView以使其旋转

时间:2017-10-22 06:15:03

标签: cocoa cabasicanimation nsimageview

Swift 4,macOS 10.13

我已经在SO上阅读了各种答案,仍然无法让NSImageView在其中心而不是其中一个角落旋转。

目前,图片看起来像这样(视频):http://d.pr/v/kwiuwS

这是我的代码:

//`loader` is an NSImageView on my storyboard positioned with auto layout

loader.wantsLayer = true

let oldFrame = loader.layer?.frame
loader.layer?.anchorPoint = CGPoint(x: 0.5, y: 0.5)
loader.layer?.position = CGPoint(x: 0.5, y: 0.5)
loader.layer?.frame = oldFrame!

let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0.0
rotateAnimation.toValue = CGFloat(-1 * .pi * 2.0)
rotateAnimation.duration = 2
rotateAnimation.repeatCount = .infinity

loader.layer?.add(rotateAnimation, forKey: nil)

我还缺少什么想法?

3 个答案:

答案 0 :(得分:4)

我刚创建了一个简单的演示,其中包含所有视图的便捷setAnchorPoint扩展名。

从角落看旋转的主要原因是你的锚点以某种方式重置为0,0。

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

@IBOutlet weak var window: NSWindow!
var imageView: NSImageView!

func applicationDidFinishLaunching(_ aNotification: Notification) {
    // Insert code here to initialize your application

    // Create red NSImageView
    imageView = NSImageView(frame: NSRect(x: 100, y: 100, width: 100, height: 100))
    imageView.wantsLayer = true
    imageView.layer?.backgroundColor = NSColor.red.cgColor

    window.contentView?.addSubview(imageView)
}

func applicationWillTerminate(_ aNotification: Notification) {
    // Insert code here to tear down your application
}

func applicationDidBecomeActive(_ notification: Notification) {
    // Before animate, reset the anchor point
    imageView.setAnchorPoint(anchorPoint: CGPoint(x: 0.5, y: 0.5))
    // Start animation
    if imageView.layer?.animationKeys()?.count == 0 || imageView.layer?.animationKeys() == nil {
        let rotate = CABasicAnimation(keyPath: "transform.rotation")
        rotate.fromValue = 0
        rotate.toValue = CGFloat(-1 * .pi * 2.0)
        rotate.duration = 2
        rotate.repeatCount = Float.infinity

        imageView.layer?.add(rotate, forKey: "rotation")
    }
}
}

extension NSView {
    func setAnchorPoint(anchorPoint:CGPoint) {
        if let layer = self.layer {
            var newPoint = NSPoint(x: self.bounds.size.width * anchorPoint.x, y: self.bounds.size.height * anchorPoint.y)
            var oldPoint = NSPoint(x: self.bounds.size.width * layer.anchorPoint.x, y: self.bounds.size.height * layer.anchorPoint.y)

        newPoint = newPoint.applying(layer.affineTransform())
        oldPoint = oldPoint.applying(layer.affineTransform())

        var position = layer.position

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

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


        layer.anchorPoint = anchorPoint
        layer.position = position
    }
}
}

enter image description here

答案 1 :(得分:0)

这是布局过程将视图图层重置为默认属性的结果。例如,如果您检查图层的anchorPoint,则会发现它可能会重置为0, 0

如果您在视图控制器中,一个简单的解决方案是在viewDidLayout()中不断设置所需的图层属性。基本上在每个布局过程中执行初始设置中执行的frame,anchorPoint和位置舞蹈。如果您将NSImageView子类化,则可能在该视图中包含该逻辑,这比将该逻辑放在包含视图控制器中要好得多。

可能有一个更好的解决方案,即覆盖后备层或滚动自己使用updateLayer的NSView子类,但我必须在那里进行实验以给出明确的答案。

答案 2 :(得分:0)

正如我自己多次想知道这个问题一样,这是我自己旋转任何NSView的简单方法。我也将其发布为自我提醒。如果需要,可以在类别中定义它。

这是一个简单的旋转,而不是连续的动画。应该应用到wantLayer = YES的NSView实例。

- (void)rotateByNumber:(NSNumber*)angle {
    self.layer.position = CGPointMake(NSMidX(self.frame), NSMidY(self.frame));
    self.layer.anchorPoint = CGPointMake(.5, .5);
    self.layer.affineTransform = CGAffineTransformMakeRotation(angle.floatValue);
}