HMI-43节能模式交互视觉效果解析

前端

2023-10-01 23:47:40

前言

在日前发布的HMI-43系统中，新增了节能模式，节能模式下会有顶部标题栏和底部信息栏及灯光及启动动画等交互视觉效果，今天我们就来解析一下这些交互视觉效果是怎么实现的。

1.顶部标题栏

顶部标题栏是一个固定在屏幕顶部的栏，其中包含了时间、日期和电池电量等信息。在节能模式下，顶部标题栏会变为黑色，并且其中的文字也会变成白色。

2.底部信息栏

底部信息栏是一个固定在屏幕底部的栏，其中包含了返回、主页和设置等按钮。在节能模式下，底部信息栏会变为黑色，并且其中的按钮也会变成白色。

3.灯光系统

节能模式下，灯光系统会变为暖光，并且亮度也会降低。

4.启动动画

启动动画是一个在系统启动时播放的动画。在节能模式下，启动动画会变为一个简短的动画，其中包含了HMI-43的logo和一些简单的动画效果。

实现原理

这些交互视觉效果是通过修改系统中的CSS和JavaScript代码实现的。

1.CSS代码

/* 顶部标题栏 */
.top-bar {
  background-color: #000;
  color: #fff;
}

/* 底部信息栏 */
.bottom-bar {
  background-color: #000;
  color: #fff;
}

/* 灯光系统 */
.light {
  color: #ff0000;
}

/* 启动动画 */
.start-animation {
  animation: start-animation 1s infinite;
}

@keyframes start-animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

2.JavaScript代码

// 获取顶部标题栏元素
var topBar = document.querySelector('.top-bar');

// 获取底部信息栏元素
var bottomBar = document.querySelector('.bottom-bar');

// 获取灯光系统元素
var light = document.querySelector('.light');

// 获取启动动画元素
var startAnimation = document.querySelector('.start-animation');

// 添加事件监听器
window.addEventListener('load', function() {
  // 设置顶部标题栏
  topBar.classList.add('top-bar');

  // 设置底部信息栏
  bottomBar.classList.add('bottom-bar');

  // 设置灯光系统
  light.classList.add('light');

  // 设置启动动画
  startAnimation.classList.add('start-animation');
});