如何让SwiftUI子视图过渡动画不受父视图变换影响

问题描述 #

开发的SwiftUI组件中，根据状态显示/隐藏红色按钮，使用.transition(.move(edge: .trailing))实现滑入滑出动画，单独使用时效果正常。但当组件的父视图发生位移动画时，子按钮的transition会基于全局坐标系执行，而非组件自身的局部坐标系。需要保留transition动画的同时，让组件实现不依赖外部使用场景，且保留子视图的出现/消失生命周期。

问题原因 #

SwiftUI的动画默认会在视图树中向下继承，当父视图添加了基于state的位移动画时，该动画会被组件内部的子视图继承，导致子按钮的transition动画与父视图的位移动画叠加，最终表现为基于全局坐标系的移动，而非组件内部的局部坐标系。

解决方案 #

通过隔离组件内部动画与外部动画，让子按钮的transition仅响应组件自身的state变化，不受外部父视图动画影响：

1. 给子按钮单独绑定transition动画，指定仅响应组件的state值；
2. 在组件的根容器上禁用外部动画继承，避免父视图的位移动画渗透到组件内部。

修改后的Component代码 #

struct Component: View {
    let state: Bool
    
    var body: some View {
        HStack() {
            Text("Placeholder")
                .padding()
            Spacer()
            if state {
                Color.red
                    .frame(width: 20, height: 20)
                    .padding()
                    .transition(.move(edge: .trailing))
                    // 为transition绑定单独动画，仅响应组件state变化
                    .animation(.default, value: state)
            }
        }
        .frame(width: 200, height: 200)
        .background(Color.blue)
        .clipped()
        // 禁用组件继承外部动画，隔离内部transition与父视图位移动画
        .animation(nil, value: state)
    }
}

完整示例代码 #

import SwiftUI
import PlaygroundSupport

struct Component: View {
    let state: Bool
    
    var body: some View {
        HStack() {
            Text("Placeholder")
                .padding()
            Spacer()
            if state {
                Color.red
                    .frame(width: 20, height: 20)
                    .padding()
                    .transition(.move(edge: .trailing))
                    .animation(.default, value: state)
            }
        }
        .frame(width: 200, height: 200)
        .background(Color.blue)
        .clipped()
        .animation(nil, value: state)
    }
}

struct DemoView: View {
    @State private var state: Bool = false
    
    var body: some View {
        ZStack {
            Toggle(isOn: $state, label: {})
            
            Component(state: state)
                .padding(.top, state ? 200 : 0)
        }
        .frame(width: 400, height: 400)
        .animation(.default.speed(0.1), value: state)
    }
}

PlaygroundPage.current.setLiveView(DemoView())

效果说明 #

修改后，无论父视图如何执行位移动画，子按钮的transition动画都会在Component自身的局部坐标系内完成：显示时从组件右侧滑入，隐藏时向组件右侧滑出，完全不受父视图位移的影响，同时保留了通过if state控制子视图出现/消失的生命周期逻辑，满足需求。

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