Swift5实现UIImageView三点无限动画时出现静态无动画效果问题

核心问题排查 #

你的代码存在两个导致动画不触发的问题：

• CAReplicatorLayer 尺寸设置过小：当前你设置的 layer 宽度仅为15，3个圆点每个宽度7、横向平移间距10，第三个圆点的x坐标会达到20，远超 layer 渲染边界，即便父视图未开裁剪能看到圆点，超出边界的部分也会出现动画异常
• 动画起始配置缺失：显式动画添加到新创建的 layer 时，若未指定起始时间，可能会因为 layer 刚被加入父层级，动画被系统默认跳过

修复后完整代码 #

func showAnimatingDotsInImageView() {
    let lay = CAReplicatorLayer()
    // 调整layer宽度适配3个圆点的排布
    lay.frame = CGRect(x: 0, y: 0, width: 27, height: 7)
    let circle = CALayer()
    circle.frame = CGRect(x: 0, y: 0, width: 7, height: 7)
    circle.cornerRadius = circle.frame.width / 2
    circle.backgroundColor = UIColor.green.cgColor
    lay.addSublayer(circle)
    lay.instanceCount = 3
    lay.instanceTransform = CATransform3DMakeTranslation(10, 0, 0)
    
    let anim = CABasicAnimation(keyPath: #keyPath(CALayer.opacity))
    anim.fromValue = 1.0
    anim.toValue = 0.2
    anim.duration = 1
    anim.repeatCount = .infinity
    // 新增动画起始时间配置，避免刚添加layer时动画被跳过
    anim.beginTime = CACurrentMediaTime()
    anim.isRemovedOnCompletion = false
    
    // 先配置replicator的实例延迟，再给子layer添加动画
    lay.instanceDelay = anim.duration / Double(lay.instanceCount)
    circle.add(anim, forKey: "opacityAnim")
    
    test1.layer.addSublayer(lay)
}

额外注意事项 #

• 确保调用showAnimatingDotsInImageView的时机在视图生命周期的viewDidAppear之后，不要在viewDidLoad中调用，此时视图layer层级还未完全渲染，容易出现动画不生效问题
• 确认test1的clipsToBounds属性未设置为true，避免圆点被裁剪
• 所有UI相关操作确保在主队列执行，避免动画不触发

内容的提问来源于stack exchange，提问作者harsh_jain100