HarmonyOS開發案例：【動畫】

介紹

本篇Codelab使用動畫樣式，實現幾種常見動畫效果：平移、旋轉、縮放以及透明度變化。

相關概念

• [自定義組件]：自定義組件是用戶根據業務需求，將已有的組件組合，封裝成的新組件，可以在工程中多次調用，從而提高代碼的可讀性。
• [動畫樣式]：組件支持動態的旋轉、平移、縮放效果，可在style或css中設置。

環境搭建

軟件要求

• [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的安裝]
   2. [完成RK3568開發板的燒錄]
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
│     │  └──images
│     │     └──ic_windmill.png       // 風車圖標
│     ├──component
│     │  └──animatedCards
│     │     ├──animatedCards.css     // 自定義動畫組件樣式
│     │     ├──animatedCards.hml     // 自定義動畫組件頁面
│     │     └──animatedCards.js      // 自定義動畫組件邏輯
│     ├──i18n
│     │  ├──en-US.json               // 英文國際化
│     │  └──zh-CN.json               // 中文國際化
│     ├──pages
│     │  └──animation
│     │     ├──animation.css   	     // 動畫頁面樣式
│     │     ├──animation.hml         // 動畫頁面
│     │     └──animation.js          // 動畫頁面邏輯
│     └──app.js                      // 程序入口
└──entry/src/main/resources          // 應用資源目錄

頁面構建

頁面展示幾種常見動畫效果：平移、旋轉、縮放以及透明度變化，界面主要由image組件和text組件組成，效果如圖所示：

< !-- animation.hml -- >
< element name='animated-cards' src="../../component/animatedCards/animatedCards.hml" >< /element >
< div class="container" >
    < div class="animation-box" for="{{ value in animationList }}" >
        < animated-cards icon="{{ windmillIcon }}" animation-list="{{ value }}" >< /animated-cards >
    < /div >
< /div >

animation.js文件中，animationList是展示動畫效果的列表數據，windmillIcon是頁面動畫的圖片。

// animation.js
export default {
  data: {
    // 動畫列表
    animationList: [
      {
        animationName: 'Translate',
        animationStyle: 'img-translate'
      },
      {
        animationName: 'Rotate',
        animationStyle: 'img-rotate'
      },
      {
        animationName: 'RotateY',
        animationStyle: 'img-rotateY'
      },
      {
        animationName: 'Scale',
        animationStyle: 'img-scale'
      },
      {
        animationName: 'Opacity',
        animationStyle: 'img-opacity'
      }
    ],
    // 動畫圖片
    windmillIcon: '/common/images/ic_windmill.png'
  }
}

動畫實現

圖片的平移、旋轉、縮放以及透明度變化都是在animatedCards自定義組件中進行實現，界面主要由image組件和text組件組成。

< !--animatedCards.hml-- >
< div class="container" >
    < div class="box" >
        < text class="text" >{{ animationList.animationName }}< /text >
        < div class="windmill-box" >
            < image class="img {{ animationList.animationStyle }}" src="{{ icon }}" >< /image >
        < /div >
    < /div >
< /div >

聲明類型為Array的props，父組件可以通過設置props屬性向子組件傳遞參數。

// animatedCards.js
export default {
  props: ['icon', 'animationList']
}

通過css樣式，實現風車的平移、旋轉、縮放以及透明度的變化。

/* animatedCards.css */
/* 平移動畫 */
.img-translate {
    animation-name: translateAnim;
}

/* 順時針旋轉 */
.img-rotate {
    animation-name: rotateAnim;
}

/* Y軸方向旋轉 */
.img-rotateY {
    animation-name: rotateYAnim;
}

/* 縮放動畫 */
.img-scale {
    animation-name: scaleAnim;
}
/* 透明度變化 */
.img-opacity {
    animation-name: opacityAnim;
}

/* 從-100vp平移到100vp */
@keyframes translateAnim {
    from {
        transform: translate(-100vp);
    }
    to {
        transform: translate(100vp);
    }
}
/* 從0°旋轉到360° */
@keyframes rotateAnim {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 沿Y軸旋轉，從0°旋轉到360° */
@keyframes rotateYAnim {
    from {
        transform: rotateY(0deg);
    }
    to {
        transform: rotateY(360deg);
    }
}

/* 從0倍縮放到1.2倍大小 */
@keyframes scaleAnim {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1.2);
    }
}

/* 不透明度值從0變化到1 */
@keyframes opacityAnim {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

審核編輯 黃宇