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

更新日期：March 26th 2024, 6:22:58 pm

Next Post

SwiftUI-YouTube-miniPlaye
Previous Post

Mac 制作Gif图

CATALOG

1. SwiftUI - HoldDownButton 制作



缺失模块。
1、请确保node版本大于6.2
2、在博客根目录（注意不是archer根目录）执行以下命令：
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置：

jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true