托盘删除手势与引导体验修复：滚动冲突、画布消失动画、气泡边框

文章目录

- [SnipTrip 简介](#SnipTrip 简介)
- [01 托盘上滑删除导致水平滚动失效](#01 托盘上滑删除导致水平滚动失效)
- [02 画布删除动画不生效](#02 画布删除动画不生效)
- [03 引导气泡出现矩形边框](#03 引导气泡出现矩形边框)
- 小结

SnipTrip 简介

SnipTrip 是一款精致的 iOS 贴纸拼贴应用，提供流畅、优雅的创作体验。界面融合了液态玻璃质感、Apple Intelligence 风格的光晕动画与细腻触感反馈，让贴纸编辑过程更具氛围感与沉浸感。

左：深色模式下的彩虹光晕流动效果 | 右：浅色模式下的柔和光晕呼吸效果

01 托盘上滑删除导致水平滚动失效

问题现象

托盘支持"上滑删除"后，横向滑动无法滚动贴纸列表。

原因是贴纸缩略图绑定的 DragGesture 会抢占横向滚动手势，ScrollView 无法收到拖动事件。

修复策略

使用 UIKit 的 UIPanGestureRecognizer 做垂直方向锁定，只在"明显竖直速度"时响应删除手势，同时允许与 ScrollView 同时识别：

swift 复制代码

final class Coordinator: NSObject, UIGestureRecognizerDelegate {
    func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
        guard let pan = gestureRecognizer as? UIPanGestureRecognizer else { return true }
        let velocity = pan.velocity(in: pan.view)
        return abs(velocity.y) > abs(velocity.x)
    }

    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer,
                           shouldRecognizeSimultaneouslyWith other: UIGestureRecognizer) -> Bool {
        true
    }
}

结果

竖直上滑删除保持可用，横向滚动恢复正常。

02 画布删除动画不生效

问题现象

托盘删除后，画布上的贴纸直接消失，没有渐隐、缩放或抛出动画。

根因分析

画布动画依赖 deletingStickerIDs，但集合是就地修改；
@Published 对 Set 的原地变更不会触发 SwiftUI 刷新，isDeleting 永远是 false。

修复策略

对 Set 改为"新值赋值"，确保发布更新：

swift 复制代码

var updatedDeleting = deletingStickerIDs
updatedDeleting.insert(id)
deletingStickerIDs = updatedDeleting

同时在画布视图中接收 deletingStickerIDs，驱动删除动画状态。

结果

画布贴纸出现预期的缩放、上移与淡出动画。

03 引导气泡出现矩形边框

问题现象

首次引导气泡外侧出现矩形轮廓，破坏了胶囊气泡的统一视觉。

根因分析

overlay(bubbleGradient) 会在矩形范围 绘制渐变，导致边缘出现方形边框。

即使背景是 Capsule，overlay 仍按矩形框渲染。

修复策略

将渐变限定在 Capsule 内部：

swift 复制代码

Capsule(style: .continuous)
    .fill(.ultraThinMaterial)
    .overlay(
        Capsule(style: .continuous)
            .fill(bubbleGradient)
    )

结果

气泡边缘与背景一致，无矩形边框残留。

小结

本轮修复集中于"托盘删除交互"的稳定性与引导体验细节：

手势冲突修复，滚动与删除互不干扰
画布删除动画恢复，交互闭环完整
引导气泡视觉统一，风格更贴合 SnipTrip 的玻璃质感与光晕主题

SnipTrip 正持续优化交互与视觉细节，让贴纸创作更顺滑、更有质感。