| 从零开始用鸿蒙做一个鸿蒙开机动画 | 您所在的位置：网站首页 › 鸿蒙归零 › 从零开始用鸿蒙做一个鸿蒙开机动画 |
从零开始用鸿蒙做一个鸿蒙开机动画
|
春节不停更，此文正在参加「星光计划-春节更帖活动」 https://harmonyos.51cto.com/posts/9923 最近一直在用鸿蒙鼓捣一些小玩意，每次打开都能看到鸿蒙的开机动画，既然是学习，那为啥不能用鸿蒙做一个鸿蒙开机动画呢？经过满满的摸索，终于算是实现了一个，本文的目标就是从零开始，从环境搭建到编码，一步一步手把手教大家用DevEco Studio 开发工具做一个鸿蒙开机动画！ 笔者使用的是window系统！！！ 安装 安装Node.jsNode.js® 是基于Chrome 的 V8 JavaScript 引擎构建的 JavaScript 运行时。\ 在官网的下载页面： https://nodejs.org/en/download/ 选择node稳定版本下载安装，这里笔者选择默认安装。这样不需要配置node的环境变量。
安装完毕可以在CMD中检查是否安装成功 node -v
因为这个官网有详细的教程，这里就不再赘述！ 可以直接看这个链接：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 运行即可。
启动虚拟设备之后，点击启动按钮，即可运行项目
主要用来存放公共资源，例如图片，工具函数等等。 i18n目录：主要用来存放多语言的json文件。 pages目录：这里存放开发的核心代码，每个页面都建议创建一个文件夹，例如inde文件夹。每个文件夹下：主要有*.css,*.html,*js三种文件。 resources：用于存放资源配置文件，比如：全局样式、多分辨率加载等配置文件。 app.js文件：程序的入口，用来管理程序的生命周期。 开发 观察鸿蒙的开机动画，就像是一轮明月从水面升起，水面还有倒影，然后出现英文名。注意这里有一个细节，这里的O后面还有一个S,是跟着整个名称一起出现的。
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%; } }
一开始我是在普通的html文件实现的。思路是这样子的： 有两个圆，一上一下，每个圆都有共同的父元素，设置都元素溢出隐藏，然后使用translateY移动到外面，达到隐藏的效果。同时设置父元素的高度为圆的半径，这样 圆永远只能显示一半。一开始：两个圆下面的圆在上面，上面的圆在下面。动画开始，下面的圆往上跑，上面的圆往下跑。最后就可以了。 .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，这个会报错。 父元素高度为子元素高度一半，并且设置溢出不可见，和浏览器表现不一致。 后面，我想我可能会去研究这几个问题，看一下如何解决掉这些怪异的现象，真正的做出一个鸿蒙开机效果。 |
【本文地址】