SwiftUI 交互教程｜超级丝滑的 iOS 进度条解锁交互到底是怎么制作的？

[hacksman]

之前给社区的小伙伴做的小彩蛋，发出去之后，发现大家对彩蛋本身不感兴趣，反倒对怎么实现这个交互效果更感兴趣，于是便有了下面的文章 🤣

文章地址 👉 丝滑的 iOS 进度条解锁交互到底是怎么制作的？

文章写得比较仓促，难免有所纰漏。如果不清楚的地方，还请留言反馈哇

[coolpace]

简明易懂的实现教程，看得津津入味哈哈

[jojo0830]

不错不错

[fancymf]

真的强，技术与设计并存。

[eric1202]

感谢分享，如果代码可以更详细就好了

[bawn]

点赞

[g0blin]

可以

[nenseso]

👍🏻

[xaoflysho]

很不错👍

提一个可以优化点：
在发光矩形变为一个小卡的时候： https://imgur.com/Vr2hALL

放慢可以看到小卡是从右下角移到中间的，看起来不是发光矩形缩到中间变成小卡。

优化方案 1：
1. 小卡一直在视图中间，透明度为 0 ；
2. 发光矩形向中间缩放，同时透明度 1 --> 0 ，同时改变小卡透明度 0 --> 1 ；
3. 发光矩形消失，小卡透明度 1 。

优化方案 2:
保持当前方案，但是发光矩形向中间缩放时，不改变透明度，是小卡与发光矩形“融为一体”不可见，发光矩形缩放到中间后移除。

[JGideon]

写的很好

[dufu1991]

CSS 很简单，甚至不需要专门出个教程。

[hacksman]

@xaoflysho 是的，在理，感谢你的分享和交流。这个矩形的缩放的锚点应该是在中心的, anchor 要 center ，不然现在会有往右的偏移，如果结合下手势来看，当手指滑到最底的时候，这个小矩形从右边再居中就肯起来比较符合它的物理势能，当然现在当看这个动画确实感官是有 bug 的哈哈哈

[hacksman]

@dufu1991 哈哈哈，是的，确实，前端在这方面就比客户端好了太多

[hacksman]

@JGideon 感谢反馈和认可

[hacksman]

@coolpace 感谢反馈和认可

[hacksman]

@jojo0830 感谢反馈和认可🫶

[hacksman]

@fancymf 感谢反馈和认可🫶

[hacksman]

@eric1202 嗯，为了照顾不同的用户来的，怕太长把人吓跑了🤦‍♂️

[hacksman]

@g0blin 感谢反馈和认可🫶

[hacksman]

@nenseso 感谢反馈和认可👋

[br_wang]

别的不说，这个个人网站很漂亮。