??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??

最近一直在用鴻蒙鼓搗一些小玩意，每次打開(kāi)都能看到鴻蒙的開(kāi)機(jī)動(dòng)畫，既然是學(xué)習(xí)，那為啥不能用鴻蒙做一個(gè)鴻蒙開(kāi)機(jī)動(dòng)畫呢?經(jīng)過(guò)滿滿的摸索，終于算是實(shí)現(xiàn)了一個(gè)，本文的目標(biāo)就是從零開(kāi)始，從環(huán)境搭建到編碼，一步一步手把手教大家用DevEco Studio 開(kāi)發(fā)工具做一個(gè)鴻蒙開(kāi)機(jī)動(dòng)畫!

筆者使用的是window系統(tǒng)!!!

安裝

安裝Node.js

Node.js? 是基于Chrome 的 V8 JavaScript 引擎構(gòu)建的 JavaScript 運(yùn)行時(shí)。\

在官網(wǎng)的下載頁(yè)面：

https://nodejs.org/en/download/

選擇node穩(wěn)定版本下載安裝，這里筆者選擇默認(rèn)安裝。這樣不需要配置node的環(huán)境變量。

安裝完畢可以在CMD中檢查是否安裝成功

node -v

安裝DevEco Studio

因?yàn)檫@個(gè)官網(wǎng)有詳細(xì)的教程，這里就不再贅述!

可以直接看這個(gè)鏈接：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

新建項(xiàng)目

在歡迎頁(yè)點(diǎn)擊create Project創(chuàng)建項(xiàng)目

選擇項(xiàng)目類型

在彈出的模板頁(yè)面，我們選擇Empty Ability，點(diǎn)擊next按鈕進(jìn)入下一步。

填寫項(xiàng)目具體信息

這里我們主要填寫項(xiàng)目名稱，項(xiàng)目存放位置以及設(shè)備類型，因?yàn)槲覀兪鞘褂肑S開(kāi)發(fā)，所以選擇開(kāi)發(fā)語(yǔ)言為JS.

點(diǎn)擊finish 開(kāi)始創(chuàng)建項(xiàng)目。

項(xiàng)目展示

entry是開(kāi)發(fā)的核心目錄，右上角配置虛擬機(jī)!

選擇虛擬設(shè)備

點(diǎn)擊下拉箭頭，選擇Device Manager。

DevEco Studio提供遠(yuǎn)程模擬器和本地模擬器。但是本地的模擬器比較少，建議使用遠(yuǎn)程模擬器。

登錄華為賬號(hào)-實(shí)名認(rèn)證

在Remote Emulator頁(yè)簽中點(diǎn)擊**Sign in*，在瀏覽器中彈出華為開(kāi)發(fā)者聯(lián)盟帳號(hào)登錄界面，請(qǐng)輸入已實(shí)名認(rèn)證的華為開(kāi)發(fā)者聯(lián)盟帳號(hào)的用戶名和密-碼進(jìn)行登錄.

輸入賬戶密-碼，點(diǎn)擊登錄，自動(dòng)彈出授權(quán)頁(yè)面，選擇允許。

此時(shí)開(kāi)發(fā)工具會(huì)展示可以選擇的設(shè)備，如果是如下頁(yè)面,說(shuō)明您的賬號(hào)沒(méi)有實(shí)名，請(qǐng)點(diǎn)擊Go Authernication去實(shí)名認(rèn)證。

如果是下面頁(yè)面，恭喜你，你已經(jīng)實(shí)名認(rèn)證過(guò)了。

運(yùn)行項(xiàng)目

這里我們選擇P40 Pro 運(yùn)行即可。

點(diǎn)擊運(yùn)行按鈕

啟動(dòng)虛擬設(shè)備之后，點(diǎn)擊啟動(dòng)按鈕，即可運(yùn)行項(xiàng)目

目錄介紹

common目錄：

主要用來(lái)存放公共資源，例如圖片，工具函數(shù)等等。

i18n目錄：

主要用來(lái)存放多語(yǔ)言的json文件。

pages目錄：

這里存放開(kāi)發(fā)的核心代碼，每個(gè)頁(yè)面都建議創(chuàng)建一個(gè)文件夾，例如inde文件夾。每個(gè)文件夾下：主要有*.css,*.html,*js三種文件。

resources：

用于存放資源配置文件，比如：全局樣式、多分辨率加載等配置文件。

app.js文件：

程序的入口，用來(lái)管理程序的生命周期。

開(kāi)發(fā)

觀察

鴻蒙的開(kāi)機(jī)動(dòng)畫，就像是一輪明月從水面升起，水面還有倒影，然后出現(xiàn)英文名。注意這里有一個(gè)細(xì)節(jié)，這里的O后面還有一個(gè)S,是跟著整個(gè)名稱一起出現(xiàn)的。

拆解Harmony

Harmony是從左邊往右邊移動(dòng)的，這里要主要O和S也是同時(shí)移動(dòng)的，所以我們此時(shí)最好是有一個(gè)父元素，通過(guò)父元素來(lái)同時(shí)移動(dòng)這三個(gè)，(當(dāng)然，不嫌棄麻煩的話也是可以一個(gè)一個(gè)移動(dòng)的)，同時(shí)逐漸變白，在CSS中我們可以使用透明度來(lái)實(shí)現(xiàn)這個(gè)漸變的過(guò)程。

.container {
    width: 100%;
    height: 100%;
    background-color: black;
}
.bootAnimation {
    position: fixed;
    top: 30%;
    left: 15%;
    display: flex;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-name: leftToRight;
}
.Harmony {
    height: 40px;
    color: white;
    font-size: 28px;
    line-height: 40px;
    opacity: 0;
    animation-duration: 4s;
    animation-fill-mode: forwards;
    animation-name: transparency;
}
@keyframes transparency {
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes leftToRight {
    50% {
        left: 15%;
    }
    100% {
        left: 30%;
    }
}

未能實(shí)現(xiàn)的O

一開(kāi)始我是在普通的html文件實(shí)現(xiàn)的。思路是這樣子的：

有兩個(gè)圓，一上一下，每個(gè)圓都有共同的父元素，設(shè)置都元素溢出隱藏，然后使用translateY移動(dòng)到外面，達(dá)到隱藏的效果。同時(shí)設(shè)置父元素的高度為圓的半徑，這樣

圓永遠(yuǎn)只能顯示一半。一開(kāi)始：兩個(gè)圓下面的圓在上面，上面的圓在下面。動(dòng)畫開(kāi)始，下面的圓往上跑，上面的圓往下跑。最后就可以了。

 <div class="circle-container">
        <div class="circle">
          <div class="circle1"></div>
        </div>
        <div class="circle">
          <div class="circle2"></div>
        </div>
      </div>
.circle1 {
        position: absolute;
        width: 27px;
        height: 27px;
        border: 2px solid white;
        border-radius: 27px;
        transform: translateY(100%);
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-name: toTop;
      }
      .circle2 {
        position: absolute;
        width: 27px;
        height: 27px;
        border: 2px solid white;
        border-radius: 27px;
        transform: translateY(-150%);
        animation: toBottom 2s forwards;
        animation-duration: 2s;
        animation-fill-mode: forwards;
        animation-name: toBottom;
      }    
      @keyframes toTop {
        90% {
        }
        100% {
          transform: none;
        }
      }
         @keyframes toBottom {
        90% {
        }
        100% {
          transform: translateY(-50%);
        }
      }

但是，這段代碼在鴻蒙系統(tǒng)中，無(wú)法生效。原因是@keyframes動(dòng)畫里面的transform: translateY(-50%);無(wú)法生效。

同時(shí)父元素設(shè)置了寬度為半徑，在瀏覽器匯中呈現(xiàn)的效果是半圓，但是在鴻蒙OS中確是扁的圓。

  .circle {
        position: relative;
        width: 27px;
        height: 13px;
        overflow: hidden;
      }

總結(jié)

折騰了半天，最后也沒(méi)有完全實(shí)現(xiàn)這個(gè)效果，真的是很可惜。

最后總結(jié)一下我遇到的怪異的問(wèn)題：

animation必須寫全屬性名例如 animation-name，下面的代碼無(wú)法生效

animation toTop 1s;

justify-content:flex-end;與瀏覽器表現(xiàn)不一致，具體情況還沒(méi)弄清楚。

@keyframs里面的動(dòng)畫無(wú)法生效，具體原因不明。

background：black，這中寫法不支持，必須寫background-color：black，這個(gè)會(huì)報(bào)錯(cuò)。

父元素高度為子元素高度一半，并且設(shè)置溢出不可見(jiàn)，和瀏覽器表現(xiàn)不一致。

后面，我想我可能會(huì)去研究這幾個(gè)問(wèn)題，看一下如何解決掉這些怪異的現(xiàn)象，真正的做出一個(gè)鴻蒙開(kāi)機(jī)效果。

??想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??