Macaw iOS：点击触发动画及反向动画失效问题求助

我来帮你排查这个Macaw动画反向失效的问题～

你遇到的核心问题在于预先创建的动画对象和当前节点内容状态不匹配：
你初始化时创建的animation是从初始的contents1到contents2的过渡动画，第一次播放后，group.contentsVar已经更新为contents2了。这时候调用animation?.reverse().play()，这个反向动画其实是基于原动画的起始（contents1）和结束（contents2）来反转，和当前节点的实际内容状态不匹配，导致反向动画无法正确触发。另外，Macaw的动画对象在播放完成后状态不会自动重置，重复复用同一个动画对象（包括反向后的）也容易出问题。

修复方案：动态创建对应状态的动画 #

不要预先创建固定的动画对象，而是每次点击时根据当前的reverse状态，动态生成从当前内容到目标内容的动画。这样能确保动画始终基于节点的真实状态，不会出现状态不匹配的问题。

修改后的代码如下：

class Button: MacawView {
    var reverse: Bool = false
    // 保存初始和目标内容集合，方便复用
    private let contents1: [Node]
    private let contents2: [Node]
    
    required convenience init?(coder aDecoder: NSCoder) {
        let stroke = Stroke(width: 15.0, cap: .round)
        let contents1 = [
            Shape(form: Line(x1: 150.0, y1: 150.0, x2: 175.0, y2: 125.0), stroke: stroke),
            Shape(form: Line(x1: 150.0, y1: 150.0, x2: 225.0, y2: 150.0), stroke: stroke),
            Shape(form: Line( x1: 150.0, y1: 150.0, x2: 175.0, y2: 175.0), stroke: stroke),
        ]
        let contents2 = [
            Shape(form: Line(x1: 130.0, y1: 110.0, x2: 245.0, y2: 110.0), stroke: stroke),
            Shape(form: Line(x1: 130.0, y1: 150.0, x2: 245.0, y2: 150.0), stroke: stroke),
            Shape(form: Line(x1: 130.0, y1: 190.0, x2: 245.0, y2: 190.0), stroke: stroke),
        ]
        let group = contents1.group()
        self.init(node: group, coder: aDecoder)
        self.contents1 = contents1
        self.contents2 = contents2
        
        group.onTap { [weak self] tapEvent in
            guard let self = self else { return }
            // 根据当前reverse状态选择目标内容
            let targetContents = self.reverse ? self.contents1 : self.contents2
            // 动态创建从当前内容到目标内容的动画
            let animation = self.node.contentsVar.animation(to: targetContents)
            animation.play()
            // 切换反向状态
            self.reverse.toggle()
        }
    }
}

关键修改点说明： #

1. 保存内容集合：把contents1和contents2存为实例变量，避免每次点击重复创建相同的节点
2. 动态生成动画：每次点击时根据reverse状态确定目标内容，创建新的过渡动画，确保动画基于节点当前的真实状态
3. 避免循环引用：在tap回调中使用[weak self]，防止group、回调和self之间形成循环引用
4. 简化状态切换：用toggle()替代reverse = !reverse，代码更简洁

这样修改后，每次点击都会触发正确的正向/反向过渡动画，不会再出现反向无效果的问题啦～

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