长按实现各类振动效果

1. 通过ArkUI提供的接口实现长按手势触发各类振动效果。

2. 场景:在某些应用中,某些操作会触发振动给用户一个提醒的作用,比如一些高风险操作;常见的像编辑多个分类列表的时候,长按某个分类会使每个分类进入被编辑状态,同时会伴随振动,表示该操作在应用端不可逆,提醒用户谨慎操作。

HarmonyOS
2024-05-26 16:24:09
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
pfuchenlu

使用的核心API

LongPressGesture

@ohos.vibrator (振动)

核心代码解释

1. 首先要监听组件的长按事件

- 事件LongPressGesture可监听长按手势事件

- onAction(手势识别成功回调)

- onActionEnd(手势识别成功手指抬起后触发回调)

- onActionCancel(手势识别成功,接收到触摸取消事件触发回调)

- 通过参数finger配置最少触发手指数

- 通过参数repeat控制事件能否连续触发

- 通过参数duration配置触发长按的最短时间

2. 根据场景需求控制马达振动的启停

- 配置必备权限"ohos.permission.VIBRATE"

- 首先导入相应模块:import vibrator from '@ohos.vibrator';

- vibrator.startVibration:指定振动效果和振动属性触发马达振动(根据需求选择回调函数或者Promise的方式选择振动的成功和失败的处理)

- effect(振动效果)

- attribute(振动属性)

- vibrator.stopVibration:按照指定模式停止马达的振动

import vibrator from '@ohos.vibrator'; 
import Prompt from '@system.prompt'; 
​ 
@Entry 
@Component 
struct Index { 
 @State count: number = 0 
 @State delayTime: string = '500' 
 @State fingers: number = 2 
 @State message1: string = '' 
 @State message2: string = '' 
 @State message3: string = '' 
 @State message4: string = '' 
​ 
 // 由于repeat设置为true,长按动作存在时会连续触发,触发间隔为duration(默认值500ms) 
 build() { 
   Column() { 
     Text('长按振动') 
      .width('100%') 
      .height(100) 
      .fontSize(50) 
      .fontColor(Color.Orange) 
      .textAlign(TextAlign.Center) 
      .backgroundColor(Color.Grey) 
      .gesture( 
         LongPressGesture() 
          .onAction((event: GestureEvent) => { 
             try { 
               vibrator.startVibration({ 
                 type: 'time', 
                 duration: 1000, 
              }, { 
                 id: 0, 
                 usage: 'alarm' 
              }) 
                .then(() => { 
                   console.info('Succeed in starting vibration'); 
                }, () => {}); 
            } catch (err) { 
               console.error(`An unexpected error occurred. Code: ${err.code}, message: ${err.message}`); 
            } 
          }) 
          .onActionEnd(() => { 
             // 长按动作一结束触发 
             Prompt.showToast({ message: 'end' }) 
          }) 
      ) 
      .onClick(() => { 
​ 
      }) 
     List() { 
       ListItem() { 
         Text() { 
           Span('默认500ms触发长按') 
           Span(this.message1) 
            .fontColor(Color.Green) 
        } 
        .margin(100) 
        .fontSize(30) 
        .gesture( 
           LongPressGesture() 
            .onAction((event: GestureEvent) => { 
               this.message1 = '触发长按' 
            }) 
            .onActionEnd(() => { 
               // 长按动作一结束触发 
               this.message1 = '' 
            }) 
        ) 
      } 
​ 
       ListItem() { 
         Text() { 
           Span('默认2000ms触发长按') 
           Span(this.message2) 
            .fontColor(Color.Green) 
        } 
        .margin(100) 
        .fontSize(30) 
        .gesture( 
           LongPressGesture({ duration: 2000 }) 
            .onAction((event: GestureEvent) => { 
               this.message2 = '触发长按' 
            }) 
            .onActionEnd(() => { 
               // 长按动作一结束触发 
               this.message2 = '' 
            }) 
        ) 
      } 
​ 
       ListItem() { 
         Text() { 
           Span(`最低触发手指数${this.fingers}`) 
           Span(this.message3) 
            .fontColor(Color.Green) 
        } 
        .margin(100) 
        .fontSize(30) 
        .gesture( 
           LongPressGesture({ fingers: this.fingers }) 
            .onAction((event: GestureEvent) => { 
               this.message3 = '触发长按' 
            }) 
            .onActionEnd(() => { 
               this.message3 = '' 
            }) 
        ) 
      } 
​ 
       ListItem() { 
         Text() { 
           Span(`连续触发事件回调${this.count}次`) 
           Span(this.message4) 
            .fontColor(Color.Green) 
        } 
        .margin(100) 
        .fontSize(30) 
        .gesture( 
           LongPressGesture({ repeat: true }) 
            .onAction((event: GestureEvent) => { 
               this.count++ 
            }) 
            .onActionEnd(() => { 
               this.count = 0 
            }) 
        ) 
      } 
    } 
    .width('100%') 
    .height('100%') 
  } 
} 
}
分享
微博
QQ
微信
回复
2024-05-27 21:49:11
相关问题
如何去掉div长按的灰色效果
1290浏览 • 1回复 待解决
canvas如何实现水印效果
371浏览 • 1回复 待解决
手表振动API在哪里啊~ ?
971浏览 • 1回复 待解决
实现层叠广告滑动效果
369浏览 • 1回复 待解决
如何实现视频滤镜效果
624浏览 • 1回复 待解决
Navigation实现Tabs切换效果
476浏览 • 1回复 待解决
如何实现动画转场效果
367浏览 • 1回复 待解决
如何等效实现JSONObejct效果
219浏览 • 1回复 待解决
panGesture结合动画实现fling效果
363浏览 • 1回复 待解决
使用swiper组件实现viewPager效果
450浏览 • 1回复 待解决
图片模糊效果如何实现
316浏览 • 1回复 待解决
如何实现全局浮窗效果
582浏览 • 1回复 待解决
如何实现类似keyframes的效果
652浏览 • 1回复 待解决
文字动画效果如何实现
633浏览 • 0回复 待解决
应用怎么实现半模态效果
681浏览 • 1回复 待解决
基于原生实现高级显示效果
153浏览 • 1回复 待解决
如何实现组件的阴影效果
337浏览 • 1回复 待解决
PopWindow的效果实现有哪些?
282浏览 • 1回复 待解决
如何实现列表页的单选效果
896浏览 • 0回复 待解决
Text实现scroll效果怎么弄?
3949浏览 • 1回复 待解决
tabs结合scroll实现吸顶效果
347浏览 • 1回复 待解决