HarmonyOS NEXT應用開發案例—使用彈簧曲線實現抖動動畫及手機振動效果案例

生活就是这么怪發表於2024-04-22
動畫

介紹

本示例介紹使用vibrator.startVibration方法實現手機振動效果，用animateTo顯示動畫實現點選後的抖動動畫。

效果圖預覽

使用說明

  1. 載入完成後顯示登入介面，未勾選協議時點選一鍵登入按鈕會觸發手機振動效果和提示文字的抖動動畫。

實現思路

  1. 建立一個函式startVibrate()呼叫vibrator.startVibration方法實現手機振動效果（需要許可權：ohos.permission.VIBRATE）。原始碼參考VibrateEffect.ets
  startVibrate() {
    try {
      // TODO: 知識點：vibrator.startVibration 根據指定振動效果和振動屬性觸發馬達振動
      vibrator.startVibration({
        type: 'time',
        // 持續觸發馬達振動時間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}`);
    }
  }
  1. 建立一個函式startAnimation()使用animateTo顯示動畫實現提示文字的抖動動畫。原始碼參考VibrateEffect.ets
  startAnimation() {
    // TODO: 知識點：透過animateTo顯示動畫指定由於閉包程式碼導致的狀態變化插入過渡動效
    animateTo({
      duration: CONFIGURATION.ANIMATION_TIME,
      // 彈簧曲線：初始速度100，質量1，剛度80，阻尼10
      curve: curves.springCurve(CONFIGURATION.VELOCITY_VALUE, CONFIGURATION.MASS_VALUE,
        CONFIGURATION.STIFFNESS_VALUE, CONFIGURATION.DAMPING_VALUE),
      // 播放2次
      iterations: CONFIGURATION.PLAYBACK_COUNT,
    },
      () => {
        // 抖動動偏移量
        this.translateX = CONFIGURATION.TRANSLATE_OFFSET_X;
      })
    this.translateX = CONFIGURATION.POSITION_ZERO;
  }

高效能知識點

不涉及

工程結構&模組型別

vibrateeffect                                   // har型別
|---components
|   |---constantsData.ets                       // 定義常量資料
|---ProductView.ets                             // 檢視層-場景列表頁面

模組依賴

本例項依賴common模組來實現日誌的列印、資源的呼叫

參考資料

顯式動畫

@ohos.vibrator (振動)

訪問控制授權申請

相關文章