從零開始用鴻蒙做一個鴻蒙開機動畫以及遇到的問題
??https://harmonyos.51cto.com??
最近一直在用鴻蒙鼓搗一些小玩意，每次打開都能看到鴻蒙的開機動畫，既然是學習，那為啥不能用鴻蒙做一個鴻蒙開機動畫呢?經(jīng)過滿滿的摸索，終于算是實現(xiàn)了一個，本文的目標就是從零開始，從環(huán)境搭建到編碼，一步一步手把手教大家用DevEco Studio 開發(fā)工具做一個鴻蒙開機動畫!
筆者使用的是window系統(tǒng)!!!
安裝
安裝Node.js
Node.js? 是基于Chrome 的 V8 JavaScript 引擎構(gòu)建的 JavaScript 運行時。\
在官網(wǎng)的下載頁面：
https://nodejs.org/en/download/
選擇node穩(wěn)定版本下載安裝，這里筆者選擇默認安裝。這樣不需要配置node的環(huán)境變量。
安裝完畢可以在CMD中檢查是否安裝成功
node -v
安裝DevEco Studio
因為這個官網(wǎng)有詳細的教程，這里就不再贅述!
可以直接看這個鏈接：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415
新建項目
在歡迎頁點擊create Project創(chuàng)建項目
選擇項目類型
在彈出的模板頁面，我們選擇Empty Ability，點擊next按鈕進入下一步。
填寫項目具體信息
這里我們主要填寫項目名稱，項目存放位置以及設備類型，因為我們是使用JS開發(fā)，所以選擇開發(fā)語言為JS.
點擊finish 開始創(chuàng)建項目。
項目展示
entry是開發(fā)的核心目錄，右上角配置虛擬機!
選擇虛擬設備
點擊下拉箭頭，選擇Device Manager。
DevEco Studio提供遠程模擬器和本地模擬器。但是本地的模擬器比較少，建議使用遠程模擬器。
登錄華為賬號-實名認證
在Remote Emulator頁簽中點擊**Sign in*，在瀏覽器中彈出華為開發(fā)者聯(lián)盟帳號登錄界面，請輸入已實名認證的華為開發(fā)者聯(lián)盟帳號的用戶名和密-碼進行登錄.
輸入賬戶密-碼，點擊登錄，自動彈出授權(quán)頁面，選擇允許。
此時開發(fā)工具會展示可以選擇的設備，如果是如下頁面,說明您的賬號沒有實名，請點擊Go Authernication去實名認證。
如果是下面頁面，恭喜你，你已經(jīng)實名認證過了。
運行項目
這里我們選擇P40 Pro 運行即可。
點擊運行按鈕
啟動虛擬設備之后，點擊啟動按鈕，即可運行項目
目錄介紹
common目錄：
主要用來存放公共資源，例如圖片，工具函數(shù)等等。
i18n目錄：
主要用來存放多語言的json文件。
pages目錄：
這里存放開發(fā)的核心代碼，每個頁面都建議創(chuàng)建一個文件夾，例如inde文件夾。每個文件夾下：主要有*.css,*.html,*js三種文件。
resources：
用于存放資源配置文件，比如：全局樣式、多分辨率加載等配置文件。
app.js文件：
程序的入口，用來管理程序的生命周期。
開發(fā)
觀察
鴻蒙的開機動畫，就像是一輪明月從水面升起，水面還有倒影，然后出現(xiàn)英文名。注意這里有一個細節(jié)，這里的O后面還有一個S,是跟著整個名稱一起出現(xiàn)的。
拆解Harmony
Harmony是從左邊往右邊移動的，這里要主要O和S也是同時移動的，所以我們此時最好是有一個父元素，通過父元素來同時移動這三個，(當然，不嫌棄麻煩的話也是可以一個一個移動的)，同時逐漸變白，在CSS中我們可以使用透明度來實現(xiàn)這個漸變的過程。
.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%;
}
}
未能實現(xiàn)的O
一開始我是在普通的html文件實現(xiàn)的。思路是這樣子的：
有兩個圓，一上一下，每個圓都有共同的父元素，設置都元素溢出隱藏，然后使用translateY移動到外面，達到隱藏的效果。同時設置父元素的高度為圓的半徑，這樣
圓永遠只能顯示一半。一開始：兩個圓下面的圓在上面，上面的圓在下面。動畫開始，下面的圓往上跑，上面的圓往下跑。最后就可以了。
<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)中，無法生效。原因是@keyframes動畫里面的transform: translateY(-50%);無法生效。
同時父元素設置了寬度為半徑，在瀏覽器匯中呈現(xiàn)的效果是半圓，但是在鴻蒙OS中確是扁的圓。
.circle {
position: relative;
width: 27px;
height: 13px;
overflow: hidden;
}
總結(jié)
折騰了半天，最后也沒有完全實現(xiàn)這個效果，真的是很可惜。
最后總結(jié)一下我遇到的怪異的問題：
animation必須寫全屬性名例如 animation-name，下面的代碼無法生效
animation toTop 1s;
justify-content:flex-end;與瀏覽器表現(xiàn)不一致，具體情況還沒弄清楚。
@keyframs里面的動畫無法生效，具體原因不明。
background：black，這中寫法不支持，必須寫background-color：black，這個會報錯。
父元素高度為子元素高度一半，并且設置溢出不可見，和瀏覽器表現(xiàn)不一致。
后面，我想我可能會去研究這幾個問題，看一下如何解決掉這些怪異的現(xiàn)象，真正的做出一個鴻蒙開機效果。
??https://harmonyos.51cto.com??
