从零开始用鸿蒙做一个鸿蒙开机动画-以及遇到的问题 原创 精华

发布于 2022-2-16 23:06
浏览
2收藏

春节不停更,此文正在参加「星光计划-春节更帖活动」
https://harmonyos.51cto.com/posts/9923
最近一直在用鸿蒙鼓捣一些小玩意,每次打开都能看到鸿蒙的开机动画,既然是学习,那为啥不能用鸿蒙做一个鸿蒙开机动画呢?经过满满的摸索,终于算是实现了一个,本文的目标就是从零开始,从环境搭建到编码,一步一步手把手教大家用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;
      }

从零开始用鸿蒙做一个鸿蒙开机动画-以及遇到的问题-开源基础软件社区

总结

折腾了半天,最后也没有完全实现这个效果,真的是很可惜。

最后总结一下我遇到的怪异的问题:

  1. animation必须写全属性名例如 animation-name,下面的代码无法生效

    animation toTop 1s;
    
    
  2. justify-content:flex-end;与浏览器表现不一致,具体情况还没弄清楚。

  3. @keyframs里面的动画无法生效,具体原因不明。

  4. background:black,这中写法不支持,必须写background-color:black,这个会报错。

  5. 父元素高度为子元素高度一半,并且设置溢出不可见,和浏览器表现不一致。

后面,我想我可能会去研究这几个问题,看一下如何解决掉这些怪异的现象,真正的做出一个鸿蒙开机效果。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-2-17 09:57:45修改
1
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐