如何修复iOS云图循环动画的方向错误及图片消失问题

问题根源 #

1. 初始位置错误：第二张云图的初始x设为screenSize会导致两张图之间出现空白，动画时无法无缝衔接，还可能导致提前消失。
2. 动画偏移逻辑错误：以屏幕宽度为偏移量，动画结束时第一张图会完全移出屏幕，且repeat选项会让视图瞬间跳回初始位置，出现闪烁或消失问题。
3. 方向不符预期：如果目标是云从右向左飘动（和示例GIF一致），需确认云图本身方向正确，同时保证动画偏移方向和拼接逻辑匹配。

修复代码及说明 #

// 先获取云图的实际宽度
let cloudWidth = cloudsImageView1.frame.size.width

// 设置初始位置：两张图无缝拼接，覆盖屏幕
cloudsImageView1.frame.origin.x = 0
cloudsImageView2.frame.origin.x = cloudWidth

// 封装动画方法实现无限循环
func animateClouds() {
    UIView.animate(withDuration: 20.0, delay: 0.0, options: [.curveLinear], animations: {
        // 两张图同时向左移动一个云图宽度，让第二张图刚好衔接第一张图的位置
        self.cloudsImageView1.frame.origin.x -= cloudWidth
        self.cloudsImageView2.frame.origin.x -= cloudWidth
    }, completion: { _ in
        // 动画结束后重置位置，无缝触发下一次动画
        self.cloudsImageView1.frame.origin.x = cloudWidth
        self.cloudsImageView2.frame.origin.x = 0
        self.animateClouds()
    })
}

// 调用启动动画
animateClouds()

额外优化提示 #

• 确保云图宽度大于等于屏幕宽度，否则会出现空白区域；如果云图宽度小于屏幕，可将初始位置设为0和screenSize，偏移量改为screenSize，同时在completion里重置位置为screenSize和0。
• 如果需要调整飘动方向（比如从左到右），只需把偏移量改成+cloudWidth，初始位置和重置位置对应调整即可。
• 可以给云图添加轻微的上下浮动效果，让动画更自然，比如在动画块里同时修改dy值为小范围随机数。

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