之前给社区的小伙伴做的小彩蛋,发出去之后,发现大家对彩蛋本身不感兴趣,反倒对怎么实现这个交互效果更感兴趣,于是便有了下面的文章 🤣
文章地址 👉 丝滑的 iOS 进度条解锁交互到底是怎么制作的?
文章写得比较仓促,难免有所纰漏。如果不清楚的地方,还请留言反馈哇
1
coolpace 241 天前
简明易懂的实现教程,看得津津入味哈哈
|
2
jojo0830 241 天前
不错不错
|
3
fancymf 241 天前
真的强,技术与设计并存。
|
4
eric1202 241 天前
感谢分享,如果代码可以更详细就好了
|
5
bawn 241 天前
点赞
|
6
g0blin 241 天前
可以
|
7
nenseso 241 天前
👍🏻
|
8
xaoflysho 241 天前
很不错👍
提一个可以优化点: 在发光矩形变为一个小卡的时候: https://imgur.com/Vr2hALL 放慢可以看到小卡是从右下角移到中间的,看起来不是发光矩形缩到中间变成小卡。 优化方案 1: 1. 小卡一直在视图中间,透明度为 0 ; 2. 发光矩形向中间缩放,同时透明度 1 --> 0 ,同时改变小卡透明度 0 --> 1 ; 3. 发光矩形消失,小卡透明度 1 。 优化方案 2: 保持当前方案,但是发光矩形向中间缩放时,不改变透明度,是小卡与发光矩形“融为一体”不可见,发光矩形缩放到中间后移除。 |
9
JGideon 241 天前
写的很好
|
10
dufu1991 241 天前
CSS 很简单,甚至不需要专门出个教程。
|
11
hacksman OP @xaoflysho 是的,在理,感谢你的分享和交流。这个矩形的缩放的锚点应该是在中心的, anchor 要 center ,不然现在会有往右的偏移,如果结合下手势来看,当手指滑到最底的时候,这个小矩形从右边再居中就肯起来比较符合它的物理势能,当然现在当看这个动画确实感官是有 bug 的哈哈哈
|
20
br_wang 241 天前
别的不说,这个个人网站很漂亮。
|
21
kera0a 241 天前 via iPhone
有苹果教程那味了,很精良
|
22
iceWater10 241 天前 via iPhone
哇哦,当初满地找螃蟹的时候怎么遇不到,各种捡垃圾拼凑效果四不像。阔以阔以
|
23
abc1310054026 241 天前
写的真好,但是我对你的网站更感兴趣(笑)。
|
24
hacksman OP @br_wang 用这个工具做的,之前写了个教程,有兴趣可以试下: https://www.bmms.me/blog/first-framer-landing-page
|
26
hacksman OP @abc1310054026 用这个工具做的,之前写了个教程,有兴趣可以试下: https://www.bmms.me/blog/first-framer-landing-page
|
27
FaiChou 241 天前
教程写的不错,博客主题也好。
ps 。前几天看 Kavsoft 也出过一期类似的: &t=25s |
28
KC35 241 天前
点赞
|
29
zeroFans 241 天前
下载了吉光卡片,真不错,不过价格略贵了,之前买过一个也是文字排版工具「一言」,只要一半价格。
不过吉光卡片更加偏向整个卡片的视觉表达,一言更加偏向文字。 OP 要是有打折活动的话,踢我一下,现在这个价位还是下不了手 orz |
33
godpeo 241 天前 via iPhone
swift ui 有没有开源的可能性?
|