扬庆の博客

HoldDownButton

iOS SwiftUI
字数统计: 212阅读时长: 1 min
2024/03/26 Share

SwiftUI - HoldDownButton 制作

YouTube 地址

样张如下

HoldDownButton

搭建 UI

UI搭建

封装所需属性

头部属性内部属性声明

定时器

定时器的作用: 就是用来动画的形式制作进度条

定时器设置

定时器使用

定时器使用

拿到 timerCounter 就能在 UI 部分设置width , 运行即可看到效果

这里用到.onReceive 修饰符, 内部通过订阅timer消息,就可以间隔 0.01 拿到一次更新 , 就可以计算 progress 逻辑了.

进度条动画(定时器)

==引出一个问题? 什么时候触发机制?==

HoldDownButton顾名思义就是在长按的时候触发效果

手势 Gesture

联合多手势功能

view 具备多种手势功能

修饰符 .simultaneousGesture(dragGesture)

加上这个拖拽手势， 在长按 longPressGesture 松开的时候 isComplete 还是 false , 联合手势之后拥有长按和拖拽，当长安松开就会触发这个 dragGesture 。

手势逻辑说明

用到的动画效果

点按缩放动画

运行效果

holddownbutton.mov.gif

原文作者：杨庆

原文链接：http://www.yqblog.cn/2024/03/26/HoldDownButton/

发表日期：March 26th 2024, 5:57:02 pm

更新日期：September 22nd 2024, 1:58:19 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. SwiftUI - HoldDownButton 制作
    1. 1.0.1. 样张如下
    2. 1.0.2. 搭建 UI
    3. 1.0.3. 封装所需属性
    4. 1.0.4. 定时器
    5. 1.0.5. 定时器使用
    6. 1.0.6. 手势 Gesture
      1. 1.0.6.1. view 具备多种手势功能
        1. 1.0.6.1.1. 用到的动画效果
    7. 1.0.7. 运行效果
Total : 68
2024
2023
2022
2021
iOS Charles Flutter Hexo SwiftUI iOS高级知识点 cocoapods 系统 brew Others Moya RxSwift Swift语法 Swift iOS原理 gitHub iOS15 xib 软件 rxSwift iOS高级控件 消息推送
Flutter Hexo iOS Swift语法 iOS原理 iOS开发