ios - 为什么我的CAReplicatorLayer旋转时会有偏移

Question

很抱歉给的是静态图片，而不是gif图片，所以无法显示问题。

但我在下面给出了演示的代码，因此您可以在 xcode 中进行测试。

 import UIKit

class ViewController: UIViewController {

    var circelWidth:CGFloat = 0.0
    var circle_r_y:CGFloat = 316
    let apear_circle_duration:CFTimeInterval = 1.5

    let turn_ani_repeat_count:Float = 1 // times
    let turn_ani_duration:Float = 0.4 // one circle, how many time, you can change the proerty to look more detail.

    override func viewDidLoad() {
        super.viewDidLoad()

        initData()

        initUI()
    }

    func initData() {

        // 2.圆圈⭕️
        if (Display.typeIsLike == .iphone6 || Display.typeIsLike == .iphone6plus) {

            self.circelWidth = 260 // must set, then animate the circel
        }else {

            self.circelWidth = 230 // must set, then animate the circel
        }
    }

    func initUI() {

        self.view.backgroundColor = UIColor.brown

        self.animateCircle()
    }

    func animateCircle() {

        let r = CAReplicatorLayer()
        r.bounds = CGRect.init(x: 0.0, y: 0.0, width: circelWidth, height: circelWidth)
        r.cornerRadius = 10.0  // 10
        r.backgroundColor = UIColor.clear.cgColor

        // var circle_r_y:CGFloat = 160.0
        circle_r_y = (UIScreen.main.bounds.size.height - 64) / 2.0 + 64

        r.position = CGPoint.init(x: self.view.bounds.width / 2.0, y: circle_r_y)

        //r.anchorPoint = CGPoint.init(x: 0.5, y: circle_r_y! / r.bounds.height)  // 锚点设置
        r.anchorPoint = CGPoint.init(x: 0.5, y: 0.5)
        self.view.layer.addSublayer(r)

        // dot
        let dot = CALayer()
        dot.bounds = CGRect(x:0.0, y :0.0, width:6.0, height:6.0)
        dot.position = CGPoint(x:100.0, y:10.0)
        dot.backgroundColor = UIColor(white:1, alpha:1.0).cgColor
        dot.cornerRadius = 3.0 // half of dot width 一半

        r.addSublayer(dot)

        let nrDots: Int = 32
        r.instanceCount = nrDots
        let angle = CGFloat(2*M_PI) / CGFloat(nrDots)
        r.instanceTransform = CATransform3DMakeRotation(angle, 0.1, 0.1, 1.0)


        let shrink = CABasicAnimation(keyPath: "transform.scale")
        shrink.fromValue = 1.0
        shrink.toValue = 1.0 // 0.5
        shrink.duration = apear_circle_duration
        shrink.repeatCount = Float.infinity

        dot.add(shrink, forKey: nil)

        r.instanceDelay = apear_circle_duration/Double(nrDots)

        dot.transform = CATransform3DMakeScale(0.1, 0.1, 0.1)

        delay(delay: apear_circle_duration) {

            let turn_key_path = "transform.rotation"
            let turn_ani = CABasicAnimation.init(keyPath: turn_key_path)
            turn_ani.isRemovedOnCompletion = false
            turn_ani.fillMode = kCAFillModeForwards
            turn_ani.toValue = M_PI*2
            turn_ani.duration = CFTimeInterval(self.turn_ani_duration)
            turn_ani.repeatCount = self.turn_ani_repeat_count
            r.add(turn_ani, forKey: turn_key_path)

            dot.transform = CATransform3DMakeScale(1, 1, 1)  // 设置回来，不然再出现会放小

        }
    }

    func delay(delay:Double, closure:@escaping ()->()){

        let when = DispatchTime.now() + delay
        DispatchQueue.main.asyncAfter(deadline: when, execute: closure)
    }

    }

Display.swift，用于检查设备类型。

import UIKit

public enum DisplayType {
case unknown
case iphone4
case iphone5
case iphone6
case iphone6plus
static let iphone7 = iphone6
static let iphone7plus = iphone6plus
}

    public final class Display {
    class var width:CGFloat { return UIScreen.main.bounds.size.width     }
    class var height:CGFloat { return UIScreen.main.bounds.size.height }
    class var maxLength:CGFloat { return max(width, height) }
    class var minLength:CGFloat { return min(width, height) }
    class var zoomed:Bool { return UIScreen.main.nativeScale >= UIScreen.main.scale }
    class var retina:Bool { return UIScreen.main.scale >= 2.0 }
    class var phone:Bool { return UIDevice.current.userInterfaceIdiom == .phone }
    class var pad:Bool { return UIDevice.current.userInterfaceIdiom == .pad }
    class var carplay:Bool { if #available(iOS 9.0, *) {
        return UIDevice.current.userInterfaceIdiom == .carPlay
    } else {
        // Fallback on earlier versions
        return false//UIDevice.current.userInterfaceIdiom == carplay
    }
    }
    class var tv:Bool { if #available(iOS 9.0, *) {
        return UIDevice.current.userInterfaceIdiom == .tv
    } else {
        // Fallback on earlier versions

        return false
        }
    }
class var typeIsLike:DisplayType {
    if phone && maxLength < 568 {
        return .iphone4
    }
    else if phone && maxLength == 568 {
        return .iphone5
    }
    else if phone && maxLength == 667 {
        return .iphone6
    }
    else if phone && maxLength == 736 {
        return .iphone6plus
    }
    return .unknown
}
}

问题

如果你在你的项目中测试这个，你会发现这个问题，当动画时，有一点偏移，这是一个奇怪的问题，因为，我确保 CAReplicatorLayer 的 ahchorPoint是(0.5, 0.5)，但是为什么会有偏移呢？

如果你想看更多细节，你可以改变turn_ani_duration:Float的值，你可以看到偏移量。

Answer 1

可能为时已晚，但这是由您提供给旋转变换的向量引起的: 代替 r.instanceTransform = CATransform3DMakeRotation(角度, 0.1, 0.1, 1.0) 经过 r.instanceTransform = CATransform3DMakeRotation(角度, 0, 0, 1.0) 没关系。