作者：李勇
前言
最近在學習OpenHarmony開發相關知識，而動畫是使用比較多的一個屬性并且學起來比較有意思，并且在前端這方面，使用動畫能在效果展示時候給人眼前一亮的感覺。
項目說明
工具版本：DevEco Studio 3.0 Beta3
SDK版本；3.1.5.5
主要用到知識：animation， @keyframes
官方API連結：動畫效果
效果展示
實作原理
基于css動畫animation相關知識，通過對三個div（小熊、黑色山背景、雪山背景）進行相應的動畫效果處理，最終呈現出小熊在雪山奔跑的效果。
實作過程
使用到的官方API
- 動畫樣式
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| animation6+ | string | 0s ease 0s 1 normal none running none | 格式：duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name，每個字段不區分先後，但是 duration / delay 按照出現的先後順序解析。 |
| animation-fill-mode | string | none | 指定動畫開始和結束的狀态：none：在動畫執行之前和之後都不會應用任何樣式到目标上。forwards：在動畫結束後，目标将保留動畫結束時的狀态（在最後一個關鍵幀中定義）。backwards6+：動畫将在animation-delay期間應用第一個關鍵幀中定義的值。當animation-direction為"normal"或"alternate"時應用from關鍵幀中的值，當animation-direction為"reverse"或"alternate-reverse"時應用to關鍵幀中的值。both6+：動畫将遵循forwards和backwards的規則，進而在兩個方向上擴充動畫屬性。 |
| animation-iteration-count | number | infinite | 1 | 定義動畫播放的次數，預設播放一次，可通過設定為infinite無限次播放。 |
| animation-timing-function | string | ease | 描述動畫執行的速度曲線，用于使動畫更為平滑。可選項有：linear：表示動畫從頭到尾的速度都是相同的。ease：表示動畫以低速開始，然後加快，在結束前變慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。ease-in：表示動畫以低速開始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。ease-out：表示動畫以低速結束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。ease-in-out：表示動畫以低速開始和結束，cubic-bezier(0.42, 0.0, 0.58, 1.0)。friction：阻尼曲線，cubic-bezier(0.2, 0.0, 0.2, 1.0)。extreme-deceleration：急緩曲線，cubic-bezier(0.0, 0.0, 0.0, 1.0)。sharp：銳利曲線，cubic-bezier(0.33, 0.0, 0.67, 1.0)。rhythm：節奏曲線，cubic-bezier(0.7, 0.0, 0.2, 1.0)。smooth：平滑曲線，cubic-bezier(0.4, 0.0, 0.4, 1.0)。cubic-bezier：在三次貝塞爾函數中定義動畫變化過程，入參的x和y值必須處于0-1之間。steps: 階梯曲線6+。文法：steps(number[, end|start])；number必須設定，支援的類型為正整數。第二個參數可選，表示在每個間隔的起點或是終點發生階躍變化，支援設定end或start，預設值為end。 |
- @keyframes屬性說明
| 名稱 | 類型 | 預設值 | 描述 |
|---|---|---|---|
| background-color | <color> | - | 動畫執行後應用到元件上的背景顔色。 |
| opacity | number | 1 | 動畫執行後應用到元件上的不透明度值，為介于0到1間的數值，預設為1。 |
| width | <length> | - | 動畫執行後應用到元件上的寬度值。 |
| height | <length> | - | 動畫執行後應用到元件上的高度值。 |
| transform | string | - | 定義應用在元件上的變換類型，見表1。 |
| background-position6+ | string | <percentage> | <length> string | <percentage> | <length> | 50% 50% | 背景圖位置。機關支援百分比和px，第一個值是水準位置，第二個值是垂直位置。如果僅設定一個值，另一個值為50%。第一個string的可選值為：left | center | right ，第二個string的可選值為：top | center | bottom。示例：background-position: 200px 30%background-position: 100px topbackground-position: center center |
第一步：制作小熊，讓小熊單獨跑起來
效果展示：
hml部分：
<div class="ad">
<!-- 小熊 -->
<div class="bear"></div>
<!-- 雪山背景 -->
<div class="whiteHill"></div>
<!-- 黑色山背景 -->
<div class="blackHill"></div>
</div>
css部分：給小熊的圖檔以及對應的尺寸設定好，然後加上相應的動畫效果
.bear {
position: absolute;
z-index: 2;
width: 200px;
height: 100px;
left: 300px;
top: 250px;
background-image: url(./imgs/xiong.png);
animation: bearRun 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
}
/*小熊奔跑效果*/
@keyframes bearRun {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
第二步：制作黑色山背景
效果圖：
css部分：
.blackHill {
position: absolute;
z-index: 0;
width: 100%;
height: 536px;
background-image: url(./imgs/fjo.png);
animation: hillMove 30s;
opacity: 0.7;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/*小熊移動效果*/
@keyframes bearMove {
0% {
top: 80%;
left: 0;
}
100% {
top: 80%;
left: 50%;
transform: translateX(-50%);
}
}
/*黑色山背景動畫*/
@keyframes hillMove {
0% {
background-position: 0 0;
}
100% {
background-position: -3840px 0;
}
}
第三步：制作雪山效果
效果展示：
css部分：
.whiteHill {
position: absolute;
z-index: 1;
top: 180px;
width: 100%;
height: 339px;
background-image: url(./imgs/dd.png);
animation: hillMove 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/*制作雪山移動效果，讓其生動形象*/
@keyframes hillMove {
0% {
background-position: 0 0;
}
100% {
background-position: -3840px 0;
}
}
實作最終效果：
css部分：
/*将小熊的位置定位在固定範圍内奔跑，小熊的圖檔長度剛好為1600像素*/
@keyframes bearRun {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
/*設定小熊從左到右奔跑的距離*/
@keyframes bearMove {
0% {
top: 300px;
left: 0;
}
100% {
top: 300px;
left: 300px;
transform: translateX(100px);
}
}
用到的素材：
總結
這篇文章是我對學習鴻蒙動畫API的一個練習，也算是一個比較常見的動畫，能夠在鴻蒙中實作也是比較好的，後面還需繼續努力。
更多原創内容請關注：中軟國際 HarmonyOS 技術團隊
入門到精通、技巧到案例，系統化分享HarmonyOS開發技術，歡迎投稿和訂閱，讓我們一起攜手前行共建鴻蒙生态。