SwiftUI使用三元运算符控制Image时动画与Transition失效的原因及解决方法

SwiftUI的Transition过渡效果有一个核心触发规则：

过渡动画仅会在视图节点被插入、移除出视图树时触发，不会对单个视图内部的属性变更生效。

两种写法的底层逻辑差异非常明显：

• 原if-else分支写法：状态切换时，代码会完全移除不满足分支条件的Image视图节点，同时插入满足条件的新Image节点。两个节点相互独立，自然会触发.transition(.scale)定义的缩放进出动画。
• 三元表达式写法：无论三元取到哪个图片资源名，全程只会生成同一个Image视图节点。状态切换时，系统只是修改这个节点内部加载的图片字符串，全程没有发生任何视图插入/移除操作，.transition修饰符没有可匹配的触发时机，动画自然失效。哪怕提前把三元结果存在变量里再传给Image，本质还是同一个节点更新内容，问题不会有任何改善。

完全不需要写冗长的if-else分支，只要给Image绑定一个和切换状态强关联的唯一标识.id()，就能让系统正确识别视图节点的变化：

Image(onOff ? image : nextPhoto)
    .id(onOff) // 核心：让视图身份随切换状态同步变化
    .transition(.scale)
    .animation(.default)

这个写法的原理是：SwiftUI会将视图的id作为判断「是否为同一个视图」的核心依据。当onOff状态切换导致id变化时，系统会自动把旧id对应的Image节点从视图树移除，同时把新id对应的Image节点插入进来，完全匹配过渡动画的触发条件，最终实现和原if-else写法完全一致的动画效果，代码量能减少近一半。

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