HarmonyOS開發案例：【 slider組件的使用】

介紹

主要介紹slider滑動條組件的使用。如圖所示拖動對應滑動條調節風車的旋轉速度以及縮放比例。

相關概念

• [slider組件]：滑動條組件，通常用于快速調節設置值，如音量調節、亮度調節等應用場景。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release及以上版本。
• OpenHarmony SDK版本：API version 9及以上版本。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release及以上版本。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

本篇Codelab只對核心代碼進行講解，對于完整代碼，我們會在gitee中提供。

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

├──entry/src/main/js                          // 代碼區
│  └──MainAbility
│     ├──common
│     │  ├──constants
│     │  │  └──constants.js                   // 常量定義文件
│     │  └──images
│     │     ├──ic_speed.png                   // 速度標識圖片
│     │     └──ic_windmill.png                // 風車圖片
│     ├──i18n
│     │  ├──en-US.json                        // 英文國際化
│     │  └──zh-CN.json                        // 中文國際化
│     ├──pages
│     │   └──index
│     │     ├──index.css                      // 界面樣式
│     │     ├──index.hml                      // 主界面
│     │     └──index.js                       // slider組件事件邏輯
│     └───app.js                              // 程序入口
└──entry/src/main/resource                    // 應用靜態資源目錄

頁面布局

界面主要由上方風車圖片展示區域及下方滑動條功能區域兩部分組成，滑動條功能區域包含調節旋轉速度的滑動條組件和調節縮放比例的滑動條組件。

圖片區域

使用image組件加載示例圖片，src屬性標識圖片路徑。transform: scale控制圖片大小，animation-duration動畫樣式用來定義圖形旋轉一周所用的時間。本篇Codelab設置圖片縮放起始倍數為1，旋轉一周需要的默認時間為5000ms。

< !-- index.hml -- >
< div class="top-block" >
    < div class="image-block" style="transform: scale({{ imageSize }});" >
        < image class="image-show" src="{{ imgUrl }}" style="animation-duration: {{ animationDuration }}; "/ >
    < /div >    
< /div >

// index.js
export default {
  data: {
    imgUrl: Constants.IMG_URL,
    animationDuration: Constants.ANIMATION_DURATION,
    imageSize: Constants.INIT_IMAGE_SIZE,
    ...
  }
};

// constants.js
export default class Constants {
  static IMG_URL = '/common/images/ic_windmill.png';
  static INIT_IMAGE_SIZE = 1;
  static ANIMATION_DURATION = '5000ms';
  ...
};

滑動條功能區域

創建兩個slider組件實現控制風車的轉動速度以及風車縮放的大小。配置slider組件最大進度值為100，最小進度值為1，初始進度值為50，滑動條樣式設置為滑塊在滑桿內inset。分別為兩個組件添加事件changeSpeed以及changeSize，用于處理滑塊滑動事件。

< !-- index.hml -- >
< div class="bottom-block" >
    ...
    < div class="slider-block" >
        < image class="speed-slow-img" src="{{ speedImg }}" >< /image >
        < slider min="{{ minSpeed }}" max="{{ maxSpeed }}" value="{{ speed }}" onchange="changeSpeed" mode="inset" >< /slider >
        < image class="speed-fast-img" src="{{ speedImg }}" >< /image >
    < /div >
    ...
    < div class="slider-block" >
        < text class="text-small" >A< /text >
            < slider min="{{ minSize }}" max="{{ maxSize }}" value="{{ size }}" onchange="changeSize" mode="inset" >< /slider >
        < text class="text-big" >A< /text >
    < /div >
< /div >

風車旋轉效果

實現風車旋轉的動畫效果需要在加載風車圖片的image組件上配置如下樣式：

• animation-name：設置動畫執行的操作。
• animation-iteration-count：定義動畫播放的次數。
• animation-timing-function：描述動畫執行的速度曲線，使動畫更加平滑。

/* index.css */
/* 風車圖片布局 */
.image-show {
    /* 動畫執行的操作 */
    animation-name: Go;

    /* 動畫播放的次數：無限 */
    animation-iteration-count: infinite;

    /* 動畫勻速播放 */
    animation-timing-function: linear;
}

/* 圖片旋轉角度：0°到360° */
@keyframes Go {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

滑動條調整功能

移動控制速度的slider組件滑塊時，觸發slider組件事件。事件類型為end或click時，表示滑動結束或點擊滑動條的某處，此時slider組件的進度值停止改變。獲取當前進度值計算動畫持續時長數值，使用計算結果更新動畫播放時間。

// constants.js
// 動畫最長持續時間
static MAX_ANIMATION_DURATION = 10000;

// 動畫持續時間倍數
static ANIMATION_DURATION_MULTIPLE = 95;

// 毫秒縮寫
static MILLISECOND_ABBREVIATION = "ms";

// index.js
export default {
  /**
   * 修改轉速
   * @param event : slider組件事件
   */
  changeSpeed(event) {
    if (event.mode === Constants.SLIDER_EVENT_MODE_END || event.mode === Constants.SLIDER_EVENT_MODE_CLICK) {
      this.speed = event.value;

      // 計算動畫播放時間
      this.animationDurationNum = Constants.MAX_ANIMATION_DURATION -
        (event.value * Constants.ANIMATION_DURATION_MULTIPLE);
      this.animationDuration = this.animationDurationNum + Constants.MILLISECOND_ABBREVIATION;
    }
  }
};

移動控制縮放比例的slider組件滑塊時，觸發slider組件事件。事件類型為end或click時，表示滑動結束或點擊滑動條的某處，此時slider組件的進度值停止改變。獲取當前進度值計算縮放比例，計算結果保留2位小數。

// constants.js
// 縮放比例計算數值
static HALF_HUNDRED = 50;

// 最小縮放比例 
static MIN_IMAGE_SIZE = 0.1;

// index.js
export default {
  /**
   * 修改縮放比例
   * @param event : slider組件事件
   */
  changeSize(event) {
    if (event.mode === Constants.SLIDER_EVENT_MODE_END || event.mode === Constants.SLIDER_EVENT_MODE_CLICK) {
      this.size = event.value;
      // 圖片縮放比例范圍：0.1到2
      this.imageSize = (this.size / Constants.HALF_HUNDRED) < Constants.MIN_IMAGE_SIZE ?
        Constants.MIN_IMAGE_SIZE : (this.size / Constants.HALF_HUNDRED);
      this.imageSize = this.imageSize.toFixed(2);
    }
  }
};

審核編輯 黃宇