大家好，我是灰大设计团队的 灰色执照～
一个会做设计、会写代码，还很喜欢写小说，
才华横溢的中年男人~

今天给大家带来的是干货中的干货，手把手系列教程。
考虑到设计群总有同学说自己家的程序员「无法实现效果」，
而且一直有很多同学想要前端代码的教程，
因此本期教程我把 设计  和 代码 都一起教了。

先给大家看一下最终效果：

▲ 这该效果为最终代码交付稿，并非AE等软件制作的动效设计稿。

在开始之前，先交代一下背景：

▲ 根据群友提供的地址，群友想学习效果出处为：https://www.zcool.com.cn/work/ZNDk5Nzk4NjA=.html
若不能跳转，请自己手动复制上面网络地址去浏览器。这又是袋鼠云这个公司产品中的效果。我们微信群的群友已经不止一次让我出教程学习他们里面的东西了。这家公司的设计和代码还真的都很强，看来大家平日里都很喜欢学习研究它~

▲ 这就是群友发给我的动态效果了。再次申明，案例来自于zhan酷ID为：EasyV数据可视化，如果不小心冒犯到了你的权益，可以找我删除图片。

▲ 这就是我们学习的效果的静态图片（这是原作，我从zhanku里面截图的。侵删）

好了，接下来就要开始我们的教程了。
我当然不可能知道原作者到底是如何完成他的设计，如何落地他的动效的。所以，在开始这项工作之前，我会认真的去分析一下原作，结合我自己的思路，完成看起来“相近”的效果。

实际上，条条大路通罗马。我实现的最终效果也可能和原作大相径庭。灰哥主要是教你学习、思考、分析的过程。咱们力求学会方法，举一反三，而不是麻木的照着每个参数机械的学习傻瓜教程。

教程介绍：

本期教程共 2 部分：

1、前半部分：设计+切图；
2、后半部分教：代码。

设计工具：
设计工具主要是 PS，动效 90% 为 CSS3 制作，数字递增用了一点Json。

————————————————————————————————————————

设计部分

 步骤1：分圆弧 

拿到原作后，我最先就是考虑到底将这个圆弧分成多少份。为了方便整除，我将其分成了 25 个单元格（原作品是 26 个）

确定了分成 25 份以后，自然是计算一下角度。

设计有时候其实很像数学（苦笑）

得到了每份是14.4°以后，我们就知道如何快速的制作这个圆圈了。你根据自己的习惯用自己喜欢擅长的工具做就可以了。通常这种矢量图形AI做起来是强项。不过示例中我是用 PS 制作的。

 步骤2：制作圆圈 

1、在 PS 中新建400 * 400大小的画布，在 200 像素地方把横竖辅助线拉出来。然后用椭圆工具绘制同心圆环，并将其修剪。

▲ 这个步骤比较初级，相信你也肯定会

2、选择矩形工具，在屏幕上点击一下，输入宽度 4px，高度 200px（注意高度必须是整个画布的一半，刚才我们画布新建的是 400px）

3、把这个矩形长条放到上方正中间的位子。

▲ 为了方便大家看得足够清楚，我特意将它设置成了比较亮眼的黄色。

4、Ctrl + T 设置旋转后，勾上左上角选项，把旋转的中心点选择成底部正中间。设置后的旋转就会围绕我们整个画布的正中心了。

▲ 注意看左上角，图片要是看不清楚，可以点击图片放大。

▲ 刚才我们计算过每个单元格应该是 14.4°，所以旋转角度输入 14.4

5、输入角度后，我们按一下回车。然后不停的按Ctrl + Shift +Alt + T 键。一共要按 24次，确保它围绕整个圆弧跑了整整一圈。

▲ 此处为动态图片，请耐心等待

6、这样操作以后，这个黄色长条就有 25 个图层了。选中这 25 个图层，Ctrl+E 合并它们（注意看右侧红框，合并后只有一个图层了）合并后，用路径选择工具选择所有的长条，点击“合并形状组件”把所有形状合并成一个，方便做裁剪。

7、还是用路径选择工具，选中这些合并的发散长条后，Ctrl + X 剪切。然后选中圆环这个图层，Ctrl+V 粘贴进来。粘贴后点击“减去顶层形状”按钮。

8、点击按钮后就是下图的样子，再用路径选择工具选中所有的形状后，点击“合并形状组件”

9、点击以后我们的分段圆环就做好了。因为我们设置黄色矩形长条的宽度是 4 像素，所以这个圆环每个单元格之间的间隔就是 4 像素了。现在你应该已经学会了制作分段圆环的方法。想分多少段，间隔是多少，你都可以随心所欲的制作了

 步骤3：扇形调整圆角 

虽然我们已经得到了一个圆环，但是你仔细观察原作品后，你会发现，其实他不是那么横平竖直。小小的扇形块面还带有一点儿圆角（虽然弧度不大）将扇形调整圆角在 AI 中应该很容易实现，使用你自己喜欢的办法就可以了。我自己喜欢用 Figma 来调整。

1、右键我们刚才做好的图形的那个图层，导出 SVG 格式，把 SVG 的分段圆环拖入Figma 这个软件中。选择路径后点击右上角的圆弧角度。设置成 4 左右。

直角的分段圆环就直接变成了带有圆角的。这样我们的基础图形就做好了。下一步的重点就是让它“倒下去”。

 步骤4：调整角度 

在 AE 中其实很容易就将其“倒下去”，基本只需要 2 个步骤。

 1、打开3D功能。
2、调整X轴参数。

▲ AE 中简单 2 步就可以直接将这个圆弧倒下去。

当然，你要是习惯用 Adobe Xd，它的 3D 功能更加的高效！

▲ Adobe Xd 中的这个 3D 功能真让人惊艳~

▲ 仔细对比原作者的图你会发现，虽然圆环倒下去了，但是效果却差强人意。

▲ 原作者的圆环近大远小的感觉更好很多。学过美术的同学都知道，其实有时候画的更夸张一点儿远比拍摄的照片更有感染力。

▲ 基于上述原因，于是放弃 AE 和 Xd 制作的方案，改用 PS。

▲ 实际上使用 PS 也非常简单，只要 2 个步骤就直接完成了。

▲ 使用 PS 完成这个效果的动态演示。做完这一切以后，别忘记了添加一点内外发光。

 步骤5：找字体 

接下来就是挑选一个类似原作的数字字体了。英文字体种类那么多，我当然不知道原作者到底用了什么字体，所以我会根据自己的习惯，去找一个开源并且和它类似的字体。

以往“灰大设计”gong众号教过大家如何挑选免费开源又近似的字体，这里就不细说了。主要方法就是去找灰大字体导航上，进入右侧的 Google Font 预览和查找。

▲ https://www.pslkzs.com/fonts.php

请自己复制这个链接到浏览器中。需要再次说明的是：Google Fonts网站需要有科学上网的工具才能访问。

通过输入 0-9 的数字预览，很快就找到了一款叫做 Zen Dots 的开源免费字体（开源协议上写得非常清楚可以免费商用）

在它的页面上点击下载按钮，下载到了对应的ttf格式的字体，如果你下载过阿里巴巴 iconfont 的字体图标，你一定清楚，为了兼容性，引用外部字体是需要多种格式的。

幸运的是，这 2 个网站都能够帮到你，他们可以随意转行各种文字字体的格式。

▲ https://www.pslkzs.com/nav.php

▲ 这 2 个在线网站可以随意转换任意格式的字体，非常的全面。通过转换，引用字体问题就全部搞定了。

我们再来看一下效果

▲ 感觉还不错，和原稿有点相似

 步骤6：切图 

完成以上这些后，剩下的只需要考虑切图了，是的！我们并不需要用 AE 或者其他软件做个动画，Code Design 在既会设计又会代码的设计师中挺流行的，通过调整代码的参数，我们就可以直接调整最终的动画效果。没有动效设计师这个中间商赚差价（笑），非常的节约时间。一个人干好几个人的活，还能内卷出新的高度！

整个设计稿简单到只有 3 个图层。
但是顶部发光的那 25 个小单元格需要你单独切图成 25 个图片（哭）

切完图后，就是这样 27 张图片了。其实都是一些机械的活，并不难。

▲ 先单张切好，再拼接成完整一张。

20 多张图片肯定是不行的，因为这涉及到浏览器加载的问题，很有可能上图中 14.png 加载好了，但是 7.png 却不行。这样动画就不流畅了。而且我们还要想尽办法压缩图片的尺寸。这就需要 精灵图 来帮助了，通过 CSS 的背景定位功能，把所有小图片放到一起，精灵图可以得到更小的尺寸。

我大概的将这些图片摆了摆，这是我预想的样子。当然，精灵图其实也有插件可以完成。

▲ 我数学好，随手一摆就完成了这一切。

摆上去的最终效果，隐藏底图，存png。

合并成一张图后，我们再来看看他的尺寸。9.92KB，Woo~非常的完美~

到这里为止，我们的设计工作已经算是 100% 完成了，接下来进入编码阶段。

————————————————————————————————————————

代码部分

冰冻三尺非一日之寒，咱先不要着急，编码前，我突然想吟诗一首：

效果做得好，不能落地它始终是飞机稿；
跟着灰哥搞，开发小哥再不说实现不了；
关注公众号，设计和代码咱一起全都教；
做梦也会笑，平凡人生能遇到灰色执照。

之所以连代码一起教，是因为我们微信群好多小伙伴反馈程序员总是说实现不了。考虑到这个原因，这次我们文章下半段教程就是针对开发的。除了代码方面详细的图文教程外，文章最后还有一个做好的在线地址可以给他用来学习和查看源代码。

当然，如果你是设计师并且有兴趣想要学习代码，你可以接着往下看。我个人感觉一点也不难，一学就会。但是代码并不适合每个人，简单尝试要是发现自己不适合也不要勉强自己。你可以把后半段交给你的前端小哥~

言归正传，拿到动画后，我第一时间想到的是用 Canvas 来实现。但是考虑到我们很多设计师同学会一点 html + css，于是这次我主要用 CSS3 来实现。虽然也有一点儿 JS，但是并不多。（下次教程，我们再来玩 Canvas 动画）

我们直接进入编程：

 步骤1：添加 html 标签 

新建一个 html 的页面，在<body />之间添加如下 DOM 结构：

▲ 在整个网页中，我们所有的DOM标签就是这些了。

<div class="toCenter" /> 这个DIV 放置的是环形图的底图。

他永远是叠在最底下，显示一张背景图，永远是不动的。

类似的样式太过于基础，我们就不在文章里面西说了，
 接下来，我主要就是挑重点和难点教大家。
如果你对我们文章里面的任何地方代码有疑惑 ，
你都可以到文章末尾的网址里面去查看我们最终给出的源代码。

<h2 />标签就是百分比数字。
给它加了一个id="precentage" 目的是为了通过JS来控制他的数字变化。
它的内部有一个<span />标签是因为 % 符号数字更小。

最终的CSS代码大概是这样
h2{ font-size: 40px;}
h2 span{ font-size: 12px;}

<p />标签表示当前值和值的总数。
比如数学成绩满分是 100 分，你考了 59 分。
就会这样显示：59 / 100
通过当前值和总数，又自动计算出当前是 59%

<div class="light" />就是那个圆弧曲线。
可以理解成一个装饰，显示一个背景图片，没有任何实际作用。

最重要的就是<div class="showPercent" />这个标签了。
他的内部有25个<div />
每个<div />代表圆环的一个单元格。

▲ 基本就是这样一个结构了。非常的简单。

百分比数字之所以变成了我们自己引用的字体，是因为使用了 CSS3 的 @font-face规则。如果你对此不懂，可以自己搜索一下 CSS font-face 学习一些关于引入外部字体的基础知识。

 步骤2：引入外部字体 

这样引入外部字体，你就随时可以用我们到 Google Fonts 下载到的字体了。

这里需要强调的是：
中文字体文件太大，不适合引用外部字体。
英文字体只有字母+数组+符号，所以体积比较小。引入完全没有问题。

▲ 通过我刚才介绍介绍的那两个网站，转换了各种格式的字体。英文字体基本都不大。如chrome浏览器会优先选择 woff2 后缀的格式。只有15KB。

▲ 简单的说就是弄了25个DIV,每个都有一个背景图，都是 position:absolute; 然后通过 top 和 left 定位，他们盖在背景图的那个小方块上。

 步骤3：编写CSS布局样式 

这个部分的样式代码基本就是这个样子了：

▲ 通过绝对定位，每一个单元格背景图都是不同的图片，他的位置也都盖在了深蓝色背景上。

通过这种简单粗暴的方式，这个圆环就做好了。只是它现在还不能动，没有加上动画。接下来我们就要分析一下动画该如何设计了。

我们设计了 25 种样式，取名字为 show1 ~ show25。这张图片分析出了所有的规律，你在 0%~100%之间只需要应用一种对应的样式就完成了这一切。

 在show1的时候 

他内部的第1个div，通过0.15秒时间透明度从0-1，动画的延迟是0秒

其余的div保持原样，透明度为0，没有动画。

 在show2的时候 

他内部的第1个div，通过0.15秒时间透明度从0-1，动画的延迟是0秒

他内部的第2个div，通过0.15秒时间透明度从0-1，动画的延迟是1秒

其余的div保持原样，透明度为0，没有动画。

 在show3的时候 

他内部的第1个div，通过0.15秒时间透明度从0-1，动画的延迟是0秒

他内部的第2个div，通过0.15秒时间透明度从0-1，动画的延迟是1秒

他内部的第3个div，通过0.15秒时间透明度从0-1，动画的延迟是2秒

其余的div保持原样，透明度为0，没有动画。

  在show4的时候 

他内部的第1个div，通过0.15秒时间透明度从0-1，动画的延迟是0秒

他内部的第2个div，通过0.15秒时间透明度从0-1，动画的延迟是1秒

他内部的第3个div，通过0.15秒时间透明度从0-1，动画的延迟是2秒

他内部的第4个div，通过0.15秒时间透明度从0-1，动画的延迟是3秒

其余的div保持原样，透明度为0，没有动画。

……

 在show25的时候 

他内部的第1个div，通过0.15秒时间透明度从0-1，动画的延迟是0秒

他内部的第2个div，通过0.15秒时间透明度从0-1，动画的延迟是1秒

……

他内部的第25个div，通过0.15秒时间透明度从0-1，动画的延迟是24秒

 步骤4：编写CSS动画样式 

以上就是你要编写的样式了。

▲ 我们在编写 CSS 动画的时候，首先需要给这个动画定义一个名称，我这里随便取了个名字叫 fadeInOut。这个动画开始的时候透明度是0，结束的时候是1。

接下来，你就要使用这个动画了：

▲ 动画的名称+动画执行的时间 +动画速度曲线+动画延迟时间+动画执行次数+是否应该轮流反向播放动画。

从上面的图片我们可以看到，对于 show3 这个样式，我们只会对它的前 3 个子节点添加动画。你可以这样理解：

25个<div />标签都是不透明度为0，所以它们都没有亮起来。
第1个<div />不透明度在0.15秒的时间内从0变成1。
第2个<div />先停顿0.1秒时间什么都不做，不透明度在0.15秒的时间内从0变成1。
第3个<div />先停顿0.2秒时间什么都不做，不透明度在0.15秒的时间内从0变成1。

就是因为大家的停顿时间不同，视觉就形成了错落感。加上巧妙的对 CSS 取名字，show6 就是对 6 个 <div /> 都添加动画，show12 就是对 12 个 <div /> 都添加动画。

把所有的样式都给它准备齐全了，我们最终唯一要干的就是判断百分比的数值到底是多少，然后选取一个正确的 CSS 名称给最外层的 <div />

举例：要展示66%，66 / 4 = 16.5 那么只要把最外层 <div /> 设置成 show17 这个样式就完成了。show17 这个样式会让前 17 个 <div /> 依次亮起来。

给外层的 DIV 加上class="show25"

如果要展示 35%，那么要加上什么样式呢？因为一个单元格代表 4，35 / 4 = 8.75 四舍五入，那么就是给外层的 DIV 加上 class="show9"

可以看到我们的圆环单元格变亮动画已经完成了。

可能你会说：上面的样式太多了，要写1+2+3+4……+25 那么多。

其实现在已经有 CSS预处理器 了，通过 sass 或者 less 你可以直接写一个循环就搞定了。上面那么一大段代码，其实我只写了一个循环。

▲ 这就是我用 scss 写的循环了，怎么样？看起来比较简单吧？

好了，圆环单元格动画搞定了，加个定时器让百分比的数字动一动就完事了。除了 CSS 动画，整个动效就是下面这么一点儿定时器刷新数字的代码了。

 步骤5：编写 JS 代码 

JS就这么一点儿，这个部分我就不详细的解释了。大概意思就是利用定时器不停的累加数字，实现中间那个数字的递增动画而已。

实际上你用 requstAnimationFrame 效果可能会更好。教程太长，干货太多，又做设计，又写代码，我累了，就不改了。

-- 这就是最后效果了 --

最后，我还做了一个页面，放到了服务器上，你可以实时的调整百分比数字，查看动画的效果。右键 > 查看源代码 你会发现一共也就百把行，挺简单的。

访问的地址是：https://pslkzs.com/demo/pie/demo1.php

好了，今天的分享就到这里了。
看后要赞，养成良好阅读习惯。
一键三连，体验生活苦辣酸甜。

说实话，做这个类型的设计教程真的感觉好累。希望大家有所收获，  设计+图文教程+代码 ，我最少制作了10个小时以上，看在这么辛苦的份上，恳请大家 点赞或分享 ，有你们的支持，今后我才有动力写更多干货分享给大家

Powered by Froala Editor