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]

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

[kera0a]

有苹果教程那味了，很精良

[iceWater10]

哇哦，当初满地找螃蟹的时候怎么遇不到，各种捡垃圾拼凑效果四不像。阔以阔以

[abc1310054026]

写的真好，但是我对你的网站更感兴趣（笑）。

[hacksman]

@br_wang 用这个工具做的，之前写了个教程，有兴趣可以试下： https://www.bmms.me/blog/first-framer-landing-page

[hacksman]

@kera0a 感谢反馈和支持

[hacksman]

@abc1310054026 用这个工具做的，之前写了个教程，有兴趣可以试下： https://www.bmms.me/blog/first-framer-landing-page

[FaiChou]

教程写的不错，博客主题也好。

ps 。前几天看 Kavsoft 也出过一期类似的:

&t=25s

[KC35]

点赞

[zeroFans]

下载了吉光卡片，真不错，不过价格略贵了，之前买过一个也是文字排版工具「一言」，只要一半价格。
不过吉光卡片更加偏向整个卡片的视觉表达，一言更加偏向文字。
OP 要是有打折活动的话，踢我一下，现在这个价位还是下不了手 orz

[hacksman]

@FaiChou 哇，真不错，没有早看到 🤣

[hacksman]

@zeroFans 有折扣价格，可以加 v：piapiazhao ，私聊发你

[hacksman]

@KC35 感谢反馈和认可

[godpeo]

swift ui 有没有开源的可能性？