介紹

本示例介紹使用vibrator.startVibration方法實(shí)現(xiàn)手機(jī)振動(dòng)效果，用animateTo顯示動(dòng)畫(huà)實(shí)現(xiàn)點(diǎn)擊后的抖動(dòng)動(dòng)畫(huà)。

效果圖預(yù)覽

使用說(shuō)明

1. 加載完成后顯示登錄界面，未勾選協(xié)議時(shí)點(diǎn)擊一鍵登錄按鈕會(huì)觸發(fā)手機(jī)振動(dòng)效果和提示文本的抖動(dòng)動(dòng)畫(huà)。

實(shí)現(xiàn)思路

1. 創(chuàng)建一個(gè)函數(shù)startVibrate()調(diào)用vibrator.startVibration方法實(shí)現(xiàn)手機(jī)振動(dòng)效果（需要權(quán)限：ohos.permission.VIBRATE）。源碼參考VibrateEffect.ets

  startVibrate() {
    try {
      // TODO: 知識(shí)點(diǎn)：vibrator.startVibration 根據(jù)指定振動(dòng)效果和振動(dòng)屬性觸發(fā)馬達(dá)振動(dòng)
      vibrator.startVibration({
        type: 'time',
        // 持續(xù)觸發(fā)馬達(dá)振動(dòng)時(shí)間600ms
        duration: CONFIGURATION.VIBRATION_TIME,
      }, {
        id: 0,
        usage: 'alarm',
      }, (error: BusinessError) => {
        if (error) {
          logger.error(`Failed to start vibration. Code: ${error.code}, messege: ${error.message}`);
          return;
        }
        logger.info('Succeed in starting vibration');
      });
    } catch (err) {
      let e: BusinessError = err as BusinessError;
      logger.error(`An unexpected error occurred. Code: ${e.code}, message: ${e.message}`);
    }
  }

2. 創(chuàng)建一個(gè)函數(shù)startAnimation()使用animateTo顯示動(dòng)畫(huà)實(shí)現(xiàn)提示文本的抖動(dòng)動(dòng)畫(huà)。源碼參考VibrateEffect.ets

  startAnimation() {
    // TODO: 知識(shí)點(diǎn)：通過(guò)animateTo顯示動(dòng)畫(huà)指定由于閉包代碼導(dǎo)致的狀態(tài)變化插入過(guò)渡動(dòng)效
    animateTo({
      duration: CONFIGURATION.ANIMATION_TIME,
      // 彈簧曲線：初始速度100，質(zhì)量1，剛度80，阻尼10
      curve: curves.springCurve(CONFIGURATION.VELOCITY_VALUE, CONFIGURATION.MASS_VALUE,
        CONFIGURATION.STIFFNESS_VALUE, CONFIGURATION.DAMPING_VALUE),
      // 播放2次
      iterations: CONFIGURATION.PLAYBACK_COUNT,
    },
      () => {
        // 抖動(dòng)動(dòng)偏移量
        this.translateX = CONFIGURATION.TRANSLATE_OFFSET_X;
      })
    this.translateX = CONFIGURATION.POSITION_ZERO;
  }

高性能知識(shí)點(diǎn)

不涉及

工程結(jié)構(gòu)&模塊類(lèi)型

vibrateeffect                                   // har類(lèi)型
|---components
|   |---constantsData.ets                       // 定義常量數(shù)據(jù)
|---ProductView.ets                             // 視圖層-場(chǎng)景列表頁(yè)面

模塊依賴

本實(shí)例依賴common模塊來(lái)實(shí)現(xiàn)日志的打印、資源的調(diào)用

參考資料

顯式動(dòng)畫(huà)

@ohos.vibrator (振動(dòng))

訪問(wèn)控制授權(quán)申請(qǐng)