V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
hacksman
V2EX  ›  iDev

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

  •  3
     
  •   hacksman · 251 天前 · 3337 次点击
    这是一个创建于 251 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    iOS 解锁动画

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

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

    33 条回复    2024-03-25 19:26:58 +08:00
    coolpace
        1
    coolpace  
       251 天前
    简明易懂的实现教程,看得津津入味哈哈
    jojo0830
        2
    jojo0830  
       250 天前
    不错不错
    fancymf
        3
    fancymf  
       250 天前
    真的强,技术与设计并存。
    eric1202
        4
    eric1202  
       250 天前
    感谢分享,如果代码可以更详细就好了
    bawn
        5
    bawn  
       250 天前
    点赞
    g0blin
        6
    g0blin  
       250 天前
    可以
    nenseso
        7
    nenseso  
       250 天前
    👍🏻
    xaoflysho
        8
    xaoflysho  
       250 天前
    很不错👍

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

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

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

    优化方案 2:
    保持当前方案,但是发光矩形向中间缩放时,不改变透明度,是小卡与发光矩形“融为一体”不可见,发光矩形缩放到中间后移除。
    JGideon
        9
    JGideon  
       250 天前
    写的很好
    dufu1991
        10
    dufu1991  
       250 天前
    CSS 很简单,甚至不需要专门出个教程。
    hacksman
        11
    hacksman  
    OP
       250 天前
    @xaoflysho 是的,在理,感谢你的分享和交流。这个矩形的缩放的锚点应该是在中心的, anchor 要 center ,不然现在会有往右的偏移,如果结合下手势来看,当手指滑到最底的时候,这个小矩形从右边再居中就肯起来比较符合它的物理势能,当然现在当看这个动画确实感官是有 bug 的哈哈哈
    hacksman
        12
    hacksman  
    OP
       250 天前
    @dufu1991 哈哈哈,是的,确实,前端在这方面就比客户端好了太多
    hacksman
        13
    hacksman  
    OP
       250 天前
    @JGideon 感谢反馈和认可
    hacksman
        14
    hacksman  
    OP
       250 天前
    @coolpace 感谢反馈和认可
    hacksman
        15
    hacksman  
    OP
       250 天前
    @jojo0830 感谢反馈和认可🫶
    hacksman
        16
    hacksman  
    OP
       250 天前
    @fancymf 感谢反馈和认可🫶
    hacksman
        17
    hacksman  
    OP
       250 天前
    @eric1202 嗯,为了照顾不同的用户来的,怕太长把人吓跑了🤦‍♂️
    hacksman
        18
    hacksman  
    OP
       250 天前
    @g0blin 感谢反馈和认可🫶
    hacksman
        19
    hacksman  
    OP
       250 天前
    @nenseso 感谢反馈和认可👋
    br_wang
        20
    br_wang  
       250 天前
    别的不说,这个个人网站很漂亮。
    kera0a
        21
    kera0a  
       250 天前 via iPhone
    有苹果教程那味了,很精良
    iceWater10
        22
    iceWater10  
       250 天前 via iPhone
    哇哦,当初满地找螃蟹的时候怎么遇不到,各种捡垃圾拼凑效果四不像。阔以阔以
    abc1310054026
        23
    abc1310054026  
       250 天前
    写的真好,但是我对你的网站更感兴趣(笑)。
    hacksman
        24
    hacksman  
    OP
       250 天前
    @br_wang 用这个工具做的,之前写了个教程,有兴趣可以试下: https://www.bmms.me/blog/first-framer-landing-page
    hacksman
        25
    hacksman  
    OP
       250 天前
    @kera0a 感谢反馈和支持
    hacksman
        26
    hacksman  
    OP
       250 天前
    @abc1310054026 用这个工具做的,之前写了个教程,有兴趣可以试下: https://www.bmms.me/blog/first-framer-landing-page
    FaiChou
        27
    FaiChou  
       250 天前
    教程写的不错,博客主题也好。

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

    &t=25s
    KC35
        28
    KC35  
       250 天前
    点赞
    zeroFans
        29
    zeroFans  
       250 天前
    下载了吉光卡片,真不错,不过价格略贵了,之前买过一个也是文字排版工具「一言」,只要一半价格。
    不过吉光卡片更加偏向整个卡片的视觉表达,一言更加偏向文字。
    OP 要是有打折活动的话,踢我一下,现在这个价位还是下不了手 orz
    hacksman
        30
    hacksman  
    OP
       250 天前
    @FaiChou 哇,真不错,没有早看到 🤣
    hacksman
        31
    hacksman  
    OP
       250 天前
    @zeroFans 有折扣价格,可以加 v:piapiazhao ,私聊发你
    hacksman
        32
    hacksman  
    OP
       250 天前
    @KC35 感谢反馈和认可
    godpeo
        33
    godpeo  
       250 天前 via iPhone
    swift ui 有没有开源的可能性?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2164 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:17 · PVG 09:17 · LAX 17:17 · JFK 20:17
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.