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

介紹

本示例介紹使用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}`);
    }
  }

2. 創建一個函數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 (振動)

訪問控制授權申請