大家好,我是灰大设计团队的灰色执照。

自从我上次教大家模仿制作 袋鼠云 公司的这个百分比环形动效后,很多同学希望我顺便写一下立体饼图的教程。

▲ 这就是上次教大家制作的百分比环形动效,想学习我们过往教程可以用浏览器打开下面这个地址:

https://pslkzs.com/course/course.php

▲ 现在大家想学习这个效果,该效果出处为(如果不小心侵犯了你的权益,可以找我删除):https://www.zcool.com.cn/work/ZNDk5Nzk4NjA=.html

需要特别强调的是:

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

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

今天我们的教程主要分成4个部分:

 1、利用 PS 快速的制作静态的立体饼图。
 2、利用 AE 制作饼图上升切换的动态效果。
 3、利用 AE 制作饼图底部粒子向中间聚拢的效果。
 4、用代码实现立体饼图。

开发制作这个教程我主要是考虑到以下几点:

 1、我不想使用三维软件(部分ui设计师他们根本就不安装C4d、Blender)
 2、制作起来要足够快(学习难度一定要小,最少要比学建模方便很多很多)
 3、不能是飞机稿,设计稿要可以实现。
 4、代码不能太多,程序员不能太累(一定要尽可能保住他们为数不多的头发)

怕大家学不会,除了图文教程外,教程的1、2、3部分也都录制了视频教程。想要看高清版本的视频,请访问我的B站:
https://space.bilibili.com/299970767
我强烈建议大家观看视频教程,因为步骤很多,看视频教程学习起来会更快、更清晰!如果你在上班,不方便看视频。我们也准备了图文教程。

图文教程和视频教程可能完全不一样,因为我写教程都是:随手、随心、随性。手中有剑,便握剑前行;手中无剑,便忘剑前进。剑客本就是一柄出鞘利剑。根本就不需要按步骤去记住那一招一式。只要你和我一样平时练习得足够多,自然能做到剑出无形,无迹可寻,人剑合一。江湖人称:剑人。(好像有什么地方怪怪的)

视频教程:

▲ 视频1 用PS制作静态的立体饼图。

▲ 视频2 用AE制作饼图上升的动效。

▲ 视频3 制作饼图底座:粒子效果。

图文教程:

1、使用PS快速制作静态的立体饼图。

步骤1   在PS中新建一个800*800的文档 

步骤2  打开《PS拉框助手》这个插件,在界面上用选框工具拉一个方框,并且设置相关的参数。

▲ 《PS拉框助手》这款插件是免费的,你可以在这里下载到:https://www.pslkzs.com

参数设置如下:

▲ 将饼图设置成镂空,并且设置4组数据。颜色值尽量和我们参考的饼图一致。

 步骤3  点击自动绘制按钮,插件就自动帮你绘制好了一个镂空的饼图。

▲ 一共4个图层,图层的名称上还有对应的数值和百分比数据。

 步骤4  用路径选择工具,选择单个扇形,将他们的路径合并。

▲ 由于PS拉框助手这款插件生成的扇形没有合并路径,所以我们自己手动合并一下。

▲ 这就是形状合并以后的效果了。虽然比起用ai做的,有一些多余的点,但是不要在意它,不会有什么实质性的影响。

步骤5 选择整个文件夹,Ctrl + T 然后 右键 > 透视 将左上角的点朝右侧拉动。

▲ 其实就是用PS做出近大远小的透视效果。一定要记得选择整个图层文件夹。

 步骤6  按一下回车,确定后。再次Ctrl+T 按住Shift将底部中间的那个点朝上拉动。

▲ 部分ps版本可能有区别,不是按住Shift而是Alt,你自己都尝试下。

 步骤7  选择移动工具,选择其中一个圆环(我这里选黄色)然后按住alt键,并且同时按方向键↑,按一次就会多出一个图层,并且朝上面移动了1个像素。一共按15次。

▲ 这样,你就复制了15个图层。黄色的部分就高出了一截。次数越多,立体的饼图高度就越高。

 步骤8  把底下14个图层都选中,Ctrl+E合并图层,然后用路径选择工具选中合并的所有路径,把路径也合并成一个。最后,把这个路径改成深黄色。

▲ 除了合并图层,你也需要把路径也一起合并了。合并路径刚才我们上面做过。

合并后的路径(深黄色)是这个样子,有很多多余的点,但是没有任何影响,不用管他。

 步骤9  用同样的办法,把其他的部分都弄出来。

学会这个技能以后,你当然很容易做出选中的效果。向上移动15次改成25次,自然就变高了!

▲ 又快又简单,只需要几分钟就可以做好立体饼图的效果。不过上图这些效果你都不需要做,因为这块内容我们最终是在AE里面实现动效。

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

2、使用AE制作饼图上升的动态效果。

 步骤1  在AE中新建一个宽高都为1200px的合成组。

步骤2  新建一个形状图层,在图层上用钢笔随便绘制一个图案。

▲ 我用钢笔工具,随便画了一个小三角形。

 步骤3  复制这个形状图层,一共复制成8个。

▲ 三角形位置重合了,实际上有8个小三角形。

 步骤4  将这8个图层根据颜色命好名字,并且把三角形都改成对应的颜色。

▲ 为了方便查看,我们将三角形移动一下位置,不要让它们重叠了。并且把每个三角形都改成饼图对应的颜色。

 步骤5  打开刚才用PS做好的立体饼图,用路径工具选择深黄色那个路径,Ctrl+C 复制一下。

 步骤6  展开 黄-深色 这个图层,选中目录 > 形状 > 路径1 > 路径,粘贴到这个路径上。

这就是粘贴后的效果,整个路径都复制过来了,而且颜色也是对的。

 步骤7  用同样的方法,把其他的路径都粘贴过来。

▲ 这就是全部弄好的样子。

 步骤8  通过移动工具,手动的把这些图层都摆放好,弄成立体饼图的样子。

▲ 这就是摆放好的样子,接下来就要开始弄动画了。

 步骤9  选中浅黄色,在第一帧的地方对位置属性K帧。

 步骤10  在第20帧的时候,按住Shift并且按2次↑方向键。这样浅黄色图层就移动了大概20像素。

▲ 最重要的一点:视图的缩放比例必须是100%。因为只有我们所有的视图缩放比例都是100%,这样我们移动操作才能保证一致。

 步骤11  在第1帧对深黄色的路径K帧

 步骤12  在第20帧的时候,只选中深黄色上面部分的2个点。

 步骤13  把选中的点在100%的视图下,还是按住Shift + ↑ 移动2次。

步骤12和步骤13比较难,我再用动图演示一下给大家看:

▲ 展开深黄色图层的目录 > 形状1 > 路径1  选中路径1,你就可以选择顶部的那2个点了。记住一定要在画面缩放100%的情况下操作,这样Shift + ↑移动就和浅黄色图层移动保持一致了。

预览一下做好的效果:

▲ 黄色饼图上升的效果很不错,简单的移动动画做出来立体的感觉。

 步骤14  复制左侧关键帧到右侧,这样就形成了  升起 > 停顿 > 下降 的效果

▲ 一次只能复制一个关键帧,不能多选。选中那个小点后,复制,然后拖拽到新的帧位置,粘贴即可。粘贴后相应位置会多一个小点。

预览一下效果:

▲ 就是这么简简单单,饼图的上升效果就做好了。

 步骤15  用同样的办法把其余的部分做好。

▲ 这就是最终的效果了,制作动画的过程中,你需要注意一下节奏。也就是说:黄色下降的时候,要让蓝色上升。时间上,他们要有重合。

这就是整个动画在时间方面的控制了:

▲ 停顿 > a上升 > a停顿 > a下降的同时b上升 > b停顿 > b下降的同时c上升 > c停顿 > c下降的同事d上升 > d停顿 > d下降

接下来我们就要制作中间的数字部分了。你可以制作百分比,也可以制作数值。我们这里用百分比来做。

 步骤16  新建一个文字图层,在特效控制台里面对文字图层添加 文字 > 编号。

▲ 选择一种没有版权的字体,最好是比较粗的字体,设置为右对齐。

这是添加以后的效果:

 步骤17  设置 小数点位数、位置、填充色这3个属性,把文字设置成白色0.00。

▲ 通过观察饼图的图层名称,百分比数值分别是:9.92%、19.83%、24.79%、45.45% 这些数值,就是我们要K帧的数字。

 步骤18  对文字图层的值K帧,不停的改变文字的数值。

▲ 百分比文字变化的效果就做好了。还差一个百分号。

 步骤19  再添加一个文字图层,输入一个%符号,并且调整到对应的位置。

▲ 整个饼图的动效就做好了。

接下来我们就要开始制作饼图底部的粒子效果了,粒子效果的插件往往参数多如牛毛,我们很难调整出和原作者一模一样的东西来。为了达到好的效果,你要反复的尝试各种参数。实际上,这样的效果利用 Form 插件和利用 Particular 都可以实现。

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

3、使用AE制作饼图底部粒子向中间聚拢的效果。

 步骤20  新建一个合成组,默认名称是合成2(可以不用改它,一共就2个东西,合成1是饼图,合成2是底座)

▲ 因为这个效果是在上一个文件里面继续制作,所以,这里就不是步骤1了。制作立体饼图动效我们用了19步,现在我们从第20步开始。

 步骤21  在合成2里面新建一个固态层(有的翻译也叫纯色层)

 步骤22  在特效控制台里面对这个纯色层应用Form效果。

▲ Form是一款粒子插件,你需要自己手动安装,通过百度很容易就下载得到。但是它的版本有很多,安装前一定要确认你AE的版本,找到配套的。应用Form插件后,你就得到了一个三层的方块。它们叠加在了一起。每一层小方块横向和纵向都有很多白色的粒子小圆点。

 步骤23  把 Base Form 中的 Particles in Z 调整成1。这样三层方块就变成了一层。

 步骤24  把 Base Form 中的 Size X 和 Size Y 数值都拉大,让它们铺满整个屏幕。

 步骤25  把 Fractal Field 下面的 Displace 属性调整大一点儿。这个属性的意思就是让这些粒子在它原有的位置上偏移一点儿。看起来就“乱乱的”,无规则的样子了。

▲ 添加这个属性后,粒子好像被扭了一下。

 步骤26  把 Fractal Field 下面的 FlowY 设置成负数。

▲ 你可以把Flow理解成流动。Flow Y 就是按照Y的方向流动,设置负数后,你播放会发现粒子从底部向顶部开始流动了起来。它有了一个上升的效果。

 步骤27  设置Disperse and Twist下面的Disperse 属性为3。

▲ Disperse属性是让粒子在他周围晃动。Twist属性是让粒子扭曲(扭成一个像DNA那样的结构)

 步骤28  设置Spherical Field 下面的 Sphere1 和 Sphere2 下面的 Strength 属性为100。再设置Radius属性(这个属性是调整圆圈的大小)

▲ 设置好这些属性后,就能看到一个圆圈了。

 步骤29  把 Base Form 的 Size X 和 Size Y 都改小,边调整边观察,不要让粒子跑到圆圈的外面去了。现在粒子的数量非常少,横坐标和纵坐标都是默认的70个粒子,我们把Particles in X 和 Particle in Y 这2个数值都调大,这样粒子就变得非常多了。

▲ 看到调整这些参数后,就能看到粒子变成一个圆圈了。

通过以上这几个步骤,这个动画就基本上做完了,你预览效果后,根据实际情况改一改里面的参数,比如Flow Y是不是调整大一下更好看?比如扭曲是否需要调大一点儿。总之,你几乎不需要调整新的属性,但是看你要微调上面我提到的那些属性的值。

▲ 一顿操作猛如虎后,得到了这样一个效果。

 步骤30  修改 Particle 下面的 Color 属性为蓝色,这样粒子就变成了蓝色。

 步骤31  勾选 Fractal Field 下的 Flow loop 属性,把粒子设置成循环播放的。

▲ 这里的循环我设置了8.3秒。做设计可以设置这么长时间,但是写代码的时候,我们循环的时间越短加载的图片越少,应该尽可能的设置成1秒。

 步骤32  新建一个50毫米的摄像机,目的是让底座倒下去。

 步骤33  把3D功能打开,设置X轴旋转为负数角度,让整个底座动画倒下去。

 步骤34  新建一个 合成3,时间为8秒10帧(因为之前我们合成1和合成2的动画都是做成了8秒10帧为一个循环)

 步骤35  把 合成1 和 合成2 都放到 合成3 里面去。

▲ 放进去后,你会发现很可能底座(也就是合成2)做的倾斜角度或者大小不合适,你要再次回到合成2里面去调整缩放或者X轴旋转。

经过对合成2细微的调整,最终效果就是这样了:

 步骤36  制作一个发光的亮点和底座边上的弧线。

▲ 利用AE做一个发光亮点图片,再用ps画一个椭圆。最终完成了这个透明背景的装饰png图片。把图片叠加进去。发光亮点我们公众号之前写过教程教大家,你可以访问这里,去看看那篇教程:

https://pslkzs.com/course/course.php

那篇教程的名字是:《保姆级教程:手把手教你制作光效素材》

把这个PNG图片也放进去,当成一个装饰。这样整个立体饼图就完全做好了。这就是最终效果了:

▲ 这就是最终效果了,实际上原作者还有更多的细节,比如饼图一开始透明度从0到1,还有上升的效果等等。那些细节我就不在教程里面介绍了。教程只教大家重要的关键点,你可以根据需要自己添加相应细节,把这个效果做到更完美。

当然,我希望大家学习的时候可以举一反三,比如我们之前公众号教的Saber效果,你其实也可以应用到这里:

▲ 我拿以前的教大家的Saber效果随便尝试了一下。

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

4、用代码实现立体饼图。

实现立体饼图的效果有很多种,highCharts里面有现成的。访问这里,就可以看到highCharts现成的示例:

https://www.highcharts.com/demo/3d-pie-donut

▲ highCharts里面开发了很多种立体的图表,使用起来都非常的方便。

除了highCharts之外,Echarts我也找到了现成的实现方案。

https://www.makeapie.com/editor.html?c=xX9xcKXRjq

▲ ECharts里面也有人写过现成的方案,它的饼图甚至还根据数值不同,Z轴的高度不同。有点立体饼图+玫瑰图组合的感觉。

不过我们今天并不是要用highCharts或者Echarts来实现这个效果。而是用到 d3.js 来实现。d3是一个javascript库,它主要用于对数据的动态图表展示。通过HTML、SVG以及CSS,D3可以让数据展现更加鲜活。

之所以选用D3其实还有一个原因,那就是:快、不费工夫。加载2个js,再写上一两句话就直接完成了所有的效果。前端小哥再也不会说你的设计太复杂,不好实现,让你修改设计了。

我们还是少说废话,直接进入正题。

 步骤1  加载两个js。

▲ 其中d3.js是这个js框架的代码。Donut3D.js是大神在github上自己写的把图表变立体的代码。你通过搜索就能下载。

 步骤2  设置好数据,并且新建一个Donut3D的立体饼图。

▲ 这段代码意思是:在body中新建一个宽度和高度都是400像素的svg对象,并且在它里面画一个饼图。

除了数据的值,我一共就写了3行代码,一个立体饼图就完成了。我们来看下效果:

▲ 又快又方便,好用到哭啊。

这个代码的强大之处在于:它可以很容易的调整倾斜角度,设置Donut3D.draw()函数里面的第6个参数即可。

▲ 只要简单的修改参数,饼图的倾斜角度就发生了变化,实在是太方便啦~你设计成啥样程序员都不担心了。

接下来,我们就要开始写饼图的底座代码了,也就是那个倒下去的圆圈粒子效果。我们在AE中制作的那个粒子循环一共是8秒10帧,每秒是30张图片,一共有250张图片。在一个网页里面一口气加载上百张图片是肯定不合理的。所以我们先要在AE里面修改粒子循环的时间,越短越好。1秒钟左右30张图片不停的循环是非常不错的选择。

 步骤3  打开AE把 合成2 里面的粒子循环改成1秒。

▲ Loop Time直接手动设置成1秒,AE弹出了一个对话框,显示循环一次Form最少需要1.17秒。点击确定,手动改成1.17秒。需要注意的是,循环的最短时间其实是根据你调整的各种参数计算而来的,我们设置的参数很可能不同,你不一定会弹出提示框,就算弹出了,也不一定是1.17秒。

1秒钟是30帧,0.17秒 * 30 = 5.1,也就是说 合成2 的时间设置成00:01:05则是一个完整的循环。这个循环需要35张图片即可完成,比起修改前250张图片合理多了。

 步骤4  将合成2的时间修改成00:01:05。

▲ 右键合成2 > 图像合成设置 这样就可以修改它的时长了。

接下来是骚操作,直接抠掉粒子效果的所有黑色背景。得到透明背景的png图片!

 步骤5  对合成2添加 UnMult 效果。

▲ 这是一款自动扣除纯黑色背景的插件,你随便百度就可以下载到。什么参数都不需要调整,添加后它就是透明背景的了。好用到哭~

 步骤6  将合成2添加到渲染队列,设置输出格式为png,通道一定要选择RGB+Alpha。

▲ 只有选了 RGB+Alpha PNG图片才是透明背景的。

 步骤7  点击渲染按钮,这样你就得到了这个循环的所有图片。

▲ 一共35张。你一定要学会如何计算最短循环,刚才的1.17秒我是如何转化成01:05的。

 步骤8  打开PS,新建一个1200*1200的空白文档,并且打开《PS动效代码助手》这款PS插件,它是一款自动生成代码的工具。

 步骤9  这个插件是傻瓜式的,只有4个步骤:导入文件夹,排序,自动最小化切图,生成代码。你只要傻瓜式的安装步骤点这4个按钮即可。代码就已经生成到桌面上了。

▲ 桌面上生成了一个文件夹,里面就是现成的代码了。

打开这个html文件,可以看到代码已经让粒子动了起来,现成的代码在右下角可以复制了。

 步骤10  把代码复制到我们之前的那个饼图的文件里面去,并且把《PS动效代码助手》生成的那个图片也一起复制过去。弄一个div 把他放到饼图的底下即可。

▲ 叠加到一起的代码很简单,把饼图渲染到一个div里面,把例子渲染到另一个div里面,有重叠就可以了。

最后,我们用ae制作的那个光效素材PNG图片也别忘记了。

▲ 用AE制作了一个光点,用PS画了一个椭圆,最终做成了这个PNG图片。把这个PNG图片也叠加到一起。

这就是我们最终的效果了:

访问这个地址,你就可以看到我完成的效果了

https://pslkzs.com/demo/pie/demo2.php

你对着网站右键查看源代码,就可以看到我写的所有代码了。

再加点动画,比如星期一到星期天的数据每天都在变化:

访问这个地址,你就可以看到我完成的效果了

https://pslkzs.com/demo/pie/demo3.php

你对着网站右键查看源代码,就可以看到我写的所有代码了。

今天的教程就到这里结束了,我的主页里还有更多原创教程,如果你觉得有用就帮忙点个赞~

Powered by Froala Editor

声明:* 本站所提供的资源均来源于互联网,站内所有文字、图片内容由网站会员上传而来,UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。如果有侵犯到您的权益,请联系本站删除,谢谢合作!联系邮箱:Uishe#qq.com (请将[#]换成@)