更多内容请访问：华为官方共建的鸿蒙技术社区https://harmonyos.51cto.com最近，一直在用鸿蒙鼓捣一些小玩意儿。每次打开都能看到鸿蒙的开机动画。既然是学习，为什么不能用鸿蒙做一个鸿蒙的开机动画呢？经过多方摸索，终于实现了一个，本文的目标是从零开始，从环境搭建到编码，一步步教你使用DevEcoStudio开发工具制作一个鸿蒙开机动画！作者使用的是window系统！！！安装和安装节点。jsNode.js?是一个基于Chrome的V8JavaScript引擎构建的JavaScript运行时。\在官网下载页面：https://nodejs.org/en/download/选择node稳定版下载安装，这里笔者选择默认安装。这样就不需要配置node环境变量了。安装完成后可以在CMDnode-vinstallDevEcoStudio中查看是否安装成功，因为这个官网有详细的教程，这里就不赘述了！可以直接看到这个链接：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415新建项目在欢迎页面点击createProject创建项目，选择项目类型。在弹出的模板页面，我们选择清空能力，点击下一步按钮进入下一步。填写项目的具体信息。这里我们主要填写工程名称、工程存放位置和设备类型。因为我们使用JS进行开发，所以我们选择开发语言为JS。单击完成开始创建项目。项目显示入口是开发的核心目录，右上角配置虚拟机！选择虚拟设备并单击下拉箭头以选择设备管理器。DevEcoStudio提供远程模拟器和本地模拟器。不过本地模拟器比较少，建议使用远程模拟器。华为帐号登录-实名认证点击远程模拟器页签下的**登录*，浏览器会弹出华为帐号登录界面。请输入已实名认证的华为帐号的用户名和密码。登录。输入账号密码，点击登录，会自动弹出授权页面，选择允许。此时开发工具会显示可以选择的设备。如果是如下页面，说明你的账号没有实名。请点击前往认证进入实名认证。如果是如下页面，恭喜你通过了实名认证。运行项目这里我们选择P40Pro来运行。点击运行按钮启动虚拟设备后，点击开始按钮运行项目目录简介common目录：主要用于存放公共资源，如图片、实用函数等i18n目录：主要用于存放多语言json文件.pages目录：开发的核心代码存放于此。建议为每个页面创建一个文件夹，比如inde文件夹。每个文件夹下：主要有三个文件：*.css、*.html、*js。resources：用于存放资源配置文件，如：全局样式、多分辨率加载等配置文件。app.js文件：程序的入口，用于管理程序的生命周期。开发观察鸿蒙的启动动画，就像一轮明月从水面升起，倒影在水面上，然后出现英文名。注意这里有一个细节。这里的O后面有一个S，和全名一起出现。拆除和谐和谐从左向右移动。这里主要的O和S也是同时移动的，所以这个时候我们最好有个父元素，通过父元素同时移动这三个。（当然不嫌麻烦，字也可以一个个挪动），逐渐变白。在CSS中，我们可以使用透明度来实现这种渐变过程。.container{宽度：100%；高度：100%；背景色：黑色；}.bootAnimation{位置：固定；顶部：30%；左：15%；显示：弹性；动画持续时间：4s；动画填充模式：转发；动画名称：leftToRight;}.Harmony{height:40px;白颜色;字体大小：28px；行高：40px；不透明度：0；动画持续时间：4s；动画填充模式：转发；动画名称：透明度；}@keyframes透明度{50%{不透明度：0；}100%{不透明度：1；}}@keyframesleftToRight{50%{左：15%；}100%{左：30%；}}无法实现O一开始我是在一个普通的html文件中实现的。思路是这样的：有两个圆，一上一下，每个圆都有一个共同的父元素，设置元素溢出隐藏，然后用translateY移动到外面，达到隐藏的效果。同时，将父元素的高度设置为圆的半径，使圆永远只能显示一半。开始：两个圆，下圆在上，上圆在下。动画开始，下面的圆向上跑，上面的圆向下跑。最后就是这样。
