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

【问题标题】：Rotate NSImageView at its Center to Make it Spin在其中心旋转 NSImageView 以使其旋转
【发布时间】：2018-04-02 22:08:15
【问题描述】：

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)

任何想法我仍然缺少什么？

【问题讨论】：

您找到解决方案了吗？
@Roee84 不，我想我最终放弃了。 :)
LOL :) 如果我找到什么我会更新
@CliftonLabrum 我更新了我的答案，现在应该可以了。
我说我会更新 - @CliftonLabrum 答案效果很好，只需确保在“ViewWill...”或“ViewDid...”函数之外编写此内容

标签： cocoa cabasicanimation nsimageview

【解决方案1】：

我刚刚创建了一个简单的演示，其中包含适用于所有视图的方便的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
    }
}
}

【讨论】：

@Roee84 只需创建新项目并复制我的代码，它应该就像从 gif 中看到的那样工作。
@Roee84 我更新了如何使用扩展的代码。现在它应该工作了。我不知道这里发生了什么，它之前工作过......但无论如何，扩展名是正确的并且在我的软件中使用没有任何问题。谢谢
@Roee84 我不确定...较新的版本只是将图像初始化代码和旋转代码分开，但仍使用相同的扩展名。如果您初始化视图，有时图层的锚点会重置为 0,0，即使您将其设置为 0.5,0.5。所以我们需要在整个布局安定下来后使用扩展代码。
太棒了！我猜您对视图布局的评论是正确的，因为当我将它移到另一个函数时它可以工作。谢谢！！！
谢谢！这有很大帮助。所以设置锚点必须在动画之前发生。

【解决方案2】：

正如我在这个问题上多次思考过的那样，这是我自己旋转任何 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);
}

【讨论】：

谢谢！这确实是一个简单且非常有用的解决方案！

【解决方案3】：

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

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

可能有更好的解决方案覆盖支持层或滚动您自己的使用 updateLayer 的 NSView 子类，但我必须在那里进行试验才能给出明确的答案。

【讨论】：