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