鸿蒙LOGO动画演绎：从零出发，步履不停

前端

2023-10-01 12:03:01

鸿蒙LOGO：一份匠心独具的设计

华为鸿蒙系统的LOGO设计简约而富有内涵。它由一个圆形和一个心形组成，圆形代表地球，心形代表热爱。蓝、橙、绿、红四种颜色代表大地、太阳、自然和生命，寓意着鸿蒙系统致力于服务全球，让世界充满生机。

实现一个会动的鸿蒙LOGO

现在，我们将一起动身，从头开始，制作一个会动的鸿蒙LOGO。我们将使用HTML、CSS和JavaScript来完成这个任务。

第一步：准备工作

首先，我们需要创建一些必要的文件夹和文件：

创建一个名为“鸿蒙LOGO”的文件夹。
在该文件夹中，创建一个名为“index.html”的文件，用于编写HTML代码。
再创建一个名为“style.css”的文件，用于编写CSS代码。
最后，创建一个名为“script.js”的文件，用于编写JavaScript代码。

第二步：HTML代码

在“index.html”文件中，我们需要添加以下HTML代码：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="鸿蒙LOGO"></div>

  <script src="script.js"></script>
</body>
</html>

这段代码创建了一个名为“鸿蒙LOGO”的div元素，该元素将用作动画的容器。

第三步：CSS代码

在“style.css”文件中，我们需要添加以下CSS代码：

#鸿蒙LOGO {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
}

.圆形 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  animation: 旋转 5s infinite linear;
}

.心形 {
  width: 100px;
  height: 100px;
  border-radius: 50% 50% 0 0;
  background-color: #ff0000;
  position: absolute;
  top: 50px;
  left: 50px;
  animation: 跳动 2s infinite alternate ease-in-out;
}

@keyframes 旋转 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes 跳动 {
  0% {
    top: 50px;
  }

  50% {
    top: 70px;
  }

  100% {
    top: 50px;
  }
}

这段代码创建了一个名为“圆形”的div元素，用作圆形动画，以及一个名为“心形”的div元素，用作心形动画。还定义了两个关键帧动画，“旋转”和“跳动”，分别用于圆形和心形动画。

第四步：JavaScript代码

在“script.js”文件中，我们需要添加以下JavaScript代码：

// 获取鸿蒙LOGO元素
const 鸿蒙LOGO = document.getElementById('鸿蒙LOGO');

// 获取圆形和心形元素
const 圆形 = document.getElementsByClassName('圆形')[0];
const 心形 = document.getElementsByClassName('心形')[0];

// 创建一个新的画布元素
const 画布 = document.createElement('canvas');
const 画布上下文 = 画布.getContext('2d');

// 设置画布尺寸
画布.width = 200;
画布.height = 200;

// 将画布添加到鸿蒙LOGO元素中
鸿蒙LOGO.appendChild(画布);

// 定义一个函数来绘制圆形
const 绘制圆形 = () => {
  画布上下文.beginPath();
  画布上下文.arc(100, 100, 100, 0, 2 * Math.PI);
  画布上下文.fillStyle = '#000';
  画布上下文.fill();
};

// 定义一个函数来绘制心形
const 绘制心形 = () => {
  画布上下文.beginPath();
  画布上下文.moveTo(100, 100);
  画布上下文.lineTo(50, 150);
  画布上下文.lineTo(150, 150);
  画布上下文.closePath();
  画布上下文.fillStyle = '#ff0000';
  画布上下文.fill();
};

// 调用函数来绘制圆形和心形
绘制圆形();
绘制心形();

// 定义一个函数来启动动画
const 启动动画 = () => {
  requestAnimationFrame(启动动画);

  // 清除画布
  画布上下文.clearRect(0, 0, 200, 200);

  // 绘制圆形和心形
  绘制圆形();
  绘制心形();
};

// 启动动画
启动动画();