HamronyOS开辟5.0【鸿蒙OS开机动画】实例

分析动画

仔细看了好几遍鸿蒙OS的开机动画，大抵分成以下几个阶段：

• 字母O的睁眼效果，直接把上面大佬写的copy下来
  
• HarmonyOS 除了O之外的其他字母显现，而且整体缩小向左平移
  
• 平移的同时会有一个聚光灯效果，像一个手电筒照亮在O上面，然后扩散至全部字母显现
  
• 字母O下方的下划线动效
  

开敲

屏幕兼容问题

起首必要考虑的一个问题是兼容，当然这里说的不是兼容IE……只是必要简单兼容一下差别屏幕巨细的显示，确保在PC和手机上能正常显示

简单用媒体查询rem布局写了一下差别分辨率屏幕下的显示巨细，主要为了自己方便计算，这里贴一下代码，不做太多解释了，不认识的可以去了解一下rem布局的原理

1. html {
2.     font-size: 10px;
3. }
5. @media screen and (max-width: 767px) {
6.     html {
7.         font-size: 6px;
8.     }
9. }
11. @media screen and (min-width: 768px) and (max-width: 1023px) {
12.     html {
13.         font-size: 8px;
14.     }
15. }
17. @media screen and (min-width: 1024px) and (max-width: 1199px) {
18.     html {
19.         font-size: 10px;
20.     }
21. }
23. @media screen and (min-width: 1200px) {
24.     html {
25.         font-size: 12px;
26.     }
27. }

复制代码

  字母O的睁眼动画就不做解释了，直接去看原文，我在此底子上做了修改
  HarmonyOS 除了O之外的其他字母显现，而且整体缩小向左平移

html结构如下，做了一些修改

1. <div class="container">
2.     <span class="delay">Harmony</span>
3.     <div class="letter">
4.         <ul class="ul">
5.             <li class="harmony"></li>
6.         </ul>
7.         <ul class="ul">
8.             <li class="harmony"></li>
9.         </ul>
10.         <svg>
11.             <filter id="blur">
12.                 <feGaussianBlur in="SourceGraphic" stdDeviation="0 6" />
13.             </filter>
14.         </svg>
15.     </div>
16.     <span class="delay">S</span>
17. </div>

复制代码

除了O之外其他字母显现这个很轻易，用opacity就可以实现，等2秒是让字母O动画竣过后实行，加这个动画的目的主要是先让字母O实行完动画，配合聚光灯效果

1. .delay{
2.     opacity: 0;
3.     animation: fade_in 2s 0.5s forwards;
4. }
6. @keyframes fade_in {
7.     to {
8.         opacity: 1;
9.     }
10. }

复制代码

整体缩小向左平移起首想到的是缩放然后向左平移，末了发现平移都没须要了，直接默认整体放大，原点设置在左侧中心位置，如许缩小动画的时间会整体以左边为基点恢复到原位


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。