OpenHarmony - CSS實現(xiàn)奔跑的小熊
??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
前言
最近在學習OpenHarmony開發(fā)相關(guān)知識，而動畫是使用比較多的一個屬性并且學起來比較有意思，并且在前端這方面，使用動畫能在效果展示時候給人眼前一亮的感覺。
項目說明
- 工具版本：DevEco Studio 3.0 Beta3
- SDK版本；3.1.5.5
- 主要用到知識：animation， @keyframes
- 官方API鏈接：??動畫效果??
效果展示
實現(xiàn)原理
基于css動畫animation相關(guān)知識，通過對三個div（小熊、黑色山背景、雪山背景）進行相應(yīng)的動畫效果處理，最終呈現(xiàn)出小熊在雪山奔跑的效果。
實現(xiàn)過程
使用到的官方API
1、動畫樣式。
名稱 | 類型 | 默認值 | 描述 |
animation6+ | string | 0s ease 0s 1 normal none running none | 格式：duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name，每個字段不區(qū)分先后，但是 duration / delay 按照出現(xiàn)的先后順序解析。 |
animation-fill-mode | string | none | 指定動畫開始和結(jié)束的狀態(tài)：none：在動畫執(zhí)行之前和之后都不會應(yīng)用任何樣式到目標上。forwards：在動畫結(jié)束后，目標將保留動畫結(jié)束時的狀態(tài)（在最后一個關(guān)鍵幀中定義）。backwards6+：動畫將在animation-delay期間應(yīng)用第一個關(guān)鍵幀中定義的值。當animation-direction為"normal"或"alternate"時應(yīng)用from關(guān)鍵幀中的值，當animation-direction為"reverse"或"alternate-reverse"時應(yīng)用to關(guān)鍵幀中的值。both6+：動畫將遵循forwards和backwards的規(guī)則，從而在兩個方向上擴展動畫屬性。 |
animation-iteration-count | number | infinite | 1 | 定義動畫播放的次數(shù)，默認播放一次，可通過設(shè)置為infinite無限次播放。 |
animation-timing-function | string | ease | 描述動畫執(zhí)行的速度曲線，用于使動畫更為平滑?？蛇x項有：linear：表示動畫從頭到尾的速度都是相同的。ease：表示動畫以低速開始，然后加快，在結(jié)束前變慢，cubic-bezier(0.25, 0.1, 0.25, 1.0)。ease-in：表示動畫以低速開始，cubic-bezier(0.42, 0.0, 1.0, 1.0)。ease-out：表示動畫以低速結(jié)束，cubic-bezier(0.0, 0.0, 0.58, 1.0)。ease-in-out：表示動畫以低速開始和結(jié)束，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：節(jié)奏曲線，cubic-bezier(0.7, 0.0, 0.2, 1.0)。smooth：平滑曲線，cubic-bezier(0.4, 0.0, 0.4, 1.0)。cubic-bezier：在三次貝塞爾函數(shù)中定義動畫變化過程，入?yún)⒌膞和y值必須處于0-1之間。steps: 階梯曲線6+。語法：steps(number[, end|start])；number必須設(shè)置，支持的類型為正整數(shù)。第二個參數(shù)可選，表示在每個間隔的起點或是終點發(fā)生階躍變化，支持設(shè)置end或start，默認值為end。 |
2、@keyframes屬性說明。
名稱 | 類型 | 默認值 | 描述 |
background-color | <color> | - | 動畫執(zhí)行后應(yīng)用到組件上的背景顏色。 |
opacity | number | 1 | 動畫執(zhí)行后應(yīng)用到組件上的不透明度值，為介于0到1間的數(shù)值，默認為1。 |
width | <length> | - | 動畫執(zhí)行后應(yīng)用到組件上的寬度值。 |
height | <length> | - | 動畫執(zhí)行后應(yīng)用到組件上的高度值。 |
transform | string | - | 定義應(yīng)用在組件上的變換類型，見??表1??。 |
background-position6+ | string | <percentage> | <length> string | <percentage> | <length> | 50% 50% | 背景圖位置。單位支持百分比和px，第一個值是水平位置，第二個值是垂直位置。如果僅設(shè)置一個值，另一個值為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部分：給小熊的圖片以及對應(yīng)的尺寸設(shè)定好，然后加上相應(yīng)的動畫效果。
.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;
}
}
實現(xiàn)最終效果：
css部分：
/*將小熊的位置定位在固定范圍內(nèi)奔跑，小熊的圖片長度剛好為1600像素*/
@keyframes bearRun {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0;
}
}
/*設(shè)置小熊從左到右奔跑的距離*/
@keyframes bearMove {
0% {
top: 300px;
left: 0;
}
100% {
top: 300px;
left: 300px;
transform: translateX(100px);
}
}
用到的素材：
總結(jié)
這篇文章是我對學習鴻蒙動畫API的一個練習，也算是一個比較常見的動畫，能夠在鴻蒙中實現(xiàn)也是比較好的，后面還需繼續(xù)努力。
