从零开始用鸿蒙做一个开机动画-怪异的问题

搞前端的半夏 发表于 2022/03/31 22:25:52 2022/03/31
【摘要】 最近一直在用鸿蒙鼓捣一些小玩意,每次打开都能看到鸿蒙的开机动画,既然是学习,那为啥不能用鸿蒙做一个鸿蒙开机动画呢?经过满满的摸索,终于算是实现了一个,本文的目标就是从零开始,从环境搭建到编码,一步一步手把手教大家用DevEco Studio 开发工具做一个鸿蒙开机动画!笔者使用的是window系统!!! 安装 安装Node.jsNode.js® 是基于Chrome 的 V8 JavaScri...

最近一直在用鸿蒙鼓捣一些小玩意,每次打开都能看到鸿蒙的开机动画,既然是学习,那为啥不能用鸿蒙做一个鸿蒙开机动画呢?经过满满的摸索,终于算是实现了一个,本文的目标就是从零开始,从环境搭建到编码,一步一步手把手教大家用DevEco Studio 开发工具做一个鸿蒙开机动画!

笔者使用的是window系统!!!

安装

安装Node.js

Node.js® 是基于Chrome 的 V8 JavaScript 引擎构建的 JavaScript 运行时。\

在官网的下载页面:

https://nodejs.org/en/download/

选择node稳定版本下载安装,这里笔者选择默认安装。这样不需要配置node的环境变量。

image-20220216161642201

安装完毕可以在CMD中检查是否安装成功

node -v

image-20220216162233774

安装DevEco Studio

因为这个官网有详细的教程,这里就不再赘述!

可以直接看这个链接:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/software_install-0000001053582415

新建项目

在欢迎页点击create Project创建项目

image-20220216163648465

选择项目类型

在弹出的模板页面,我们选择Empty Ability,点击next按钮进入下一步。

image-20220216163826365

填写项目具体信息

这里我们主要填写项目名称,项目存放位置以及设备类型,因为我们是使用JS开发,所以选择开发语言为JS.

点击finish 开始创建项目。

image-20220216164127226

项目展示

entry是开发的核心目录,右上角配置虚拟机!

image-20220216164447590

选择虚拟设备

点击下拉箭头,选择Device Manager。

image-20220216165110454

DevEco Studio提供远程模拟器和本地模拟器。但是本地的模拟器比较少,建议使用远程模拟器。

登录华为账号-实名认证

Remote Emulator页签中点击**Sign in*,在浏览器中弹出华为开发者联盟帐号登录界面,请输入已实名认证的华为开发者联盟帐号的用户名和密码进行登录.

image-20220216165321414

image-20220216165446565

输入账户密码,点击登录,自动弹出授权页面,选择允许。

image-20220216165546882

此时开发工具会展示可以选择的设备,如果是如下页面,说明您的账号没有实名,请点击Go Authernication去实名认证。

image-20220216165742771

如果是下面页面,恭喜你,你已经实名认证过了。

运行项目

这里我们选择P40 Pro 运行即可。

image-20220216170239064

点击运行按钮

启动虚拟设备之后,点击启动按钮,即可运行项目

image-20220216170506941

目录介绍

image-20220216171728398

common目录:

主要用来存放公共资源,例如图片,工具函数等等。

i18n目录:

主要用来存放多语言的json文件。

pages目录:

这里存放开发的核心代码,每个页面都建议创建一个文件夹,例如inde文件夹。每个文件夹下:主要有*.css,*.html,*js三种文件。

resources:

用于存放资源配置文件,比如:全局样式、多分辨率加载等配置文件。

app.js文件:

程序的入口,用来管理程序的生命周期。

开发

观察

鸿蒙的开机动画,就像是一轮明月从水面升起,水面还有倒影,然后出现英文名。注意这里有一个细节,这里的O后面还有一个S,是跟着整个名称一起出现的。

harmonyos开机动画:“鸿”鹄志远,一举千里-鸿蒙HarmonyOS技术社区

拆解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;
      }

image-20220216225140664

总结

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

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

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

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

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

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

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

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。