GitHub 菊花加载效果

Android

2024-02-13 01:29:22

在开发 GitHub 客户端时，我们可能会遇到需要展示加载动画的需求。本文将介绍如何实现一个 GitHub 加载菊花效果，帮助你提升用户体验。

问题背景

GitHub 最近一年的提交表单设计灵感突现，想要将其模拟成一个加载动画展现出来。这种效果不仅可以提升用户体验，还能在视觉上给用户一种进度感。

准备工作

在开始制作加载动画之前，需要完成以下准备工作：

准备图像编辑软件：你需要一个图像编辑软件来制作菊花图案。推荐使用 Adobe Illustrator 或 Inkscape。
准备动画制作软件：你需要一个动画制作软件来制作动画。推荐使用 After Effects 或 Adobe Animate。

制作菊花图案

使用图像编辑软件创建菊花图案

打开图像编辑软件，创建一个新的项目，画布大小为 500 x 500 像素。
使用椭圆工具创建一个圆形，填充颜色为黑色。
使用钢笔工具在圆形上创建一个花瓣形状。
复制并旋转花瓣，形成一个菊花图案。
调整菊花图案的颜色和形状，使其看起来更加美观。

示例代码（使用 Adobe Illustrator）

// 在 Adobe Illustrator 中创建菊花图案的步骤：
// 1. 打开 Illustrator，创建一个新文档，尺寸为 500x500 像素。
// 2. 使用椭圆工具绘制一个圆形，填充颜色为黑色。
// 3. 使用钢笔工具绘制花瓣形状，并复制旋转形成菊花图案。
// 4. 调整颜色和形状，保存为 JPEG 或 PNG 格式。

制作动画

使用动画制作软件创建旋转动画

将菊花图案导入动画制作软件中。
创建一个新的项目，将菊花图案添加到项目中。
创建一个旋转动画，让菊花图案旋转起来。
调整动画的旋转速度和方向，使其看起来更加自然。

示例代码（使用 After Effects）

// 在 After Effects 中创建旋转动画的步骤：
// 1. 打开 After Effects，创建一个新项目。
// 2. 导入菊花图案。
// 3. 创建一个固态层，添加旋转动画。
// 4. 调整动画参数，保存并导出。

将动画转换为 SVG

将动画导出为 SVG 格式。
在 SVG 文件中添加以下代码，使菊花图案能够无限旋转：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
<g>
	<path id="XMLID_7_" fill="#000000" d="M250,50c-101.7,0-185,83.3-185,185s83.3,185,185,185s185-83.3,185-185S351.7,50,250,50z
		 M250,450c-93.8,0-170-76.2-170-170S156.2,80,250,80s170,76.2,170,170S343.8,450,250,450z"/>
	<animateTransform attributeType="xml"
		attributeName="transform"
		type="rotate"
		from="0 250 250"
		to="360 250 250"
		dur="2s"
		repeatCount="indefinite" />
</g>
</svg>

使用 SVG 菊花动画

在 HTML 中嵌入 SVG 文件

将 SVG 文件保存到你的项目文件夹中。
在你的 HTML 代码中添加以下代码：

<!DOCTYPE html>
<html>
<head>

</head>
<body>
<object data="菊花.svg" type="image/svg+xml"></object>
</body>
</html>

示例代码（HTML 文件）

<!DOCTYPE html>
<html>
<head>
    <title>GitHub 加载菊花效果</title>
</head>
<body>
    <object data="菊花.svg" type="image/svg+xml"></object>
</body>
</html>