恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
水波纹百分比动效教程,设计+代码我都一起教你了
0.0°
2021-11-04 原创文章 教程 举报 2576 36 15 3

教程更重要的在于制作思路,因为大家水平不一样,所以文章写的尽力的详细,还有无剪辑版制作视频

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

一个会做设计、会写代码,还很喜欢写小说,才华横溢并且爱分享的中年男人~


今天给大家带来的是干货中的干货, 手把手系列教程。

考虑到设计群总有同学说自己家的程序员「 无法实现效果」,而且一直有很多同学想要 前端代码的教程,因此我们一直致力于把 设计 代码 都一起教了。


不废话,我们先给大家看一下最终效果,分别用到的是 AE 和 Xd。

AE教程难度大,效果好。Xd教程则简单易学,实现效果快:

▲ Adobe Xd 制作的最终效果。


▲ AE 制作的最终效果。



虽然之前我们的图文教程写的非常详细,但是依旧有基础差的同学对某个具体步骤有疑问,于是 我特地录制了两份视频。对教程有疑问的同学,可以看这个的视频

▲ AE 版水波纹制作过程演示

▲ Xd 版水波纹制作过程演示

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

上集:设计部分


1 、使用AE制作


步骤一:制作好底部背景

1、新建一个合成:大小800*800。


2、在合成内新建白色背景固态层。


3、再新建一个固态层,选择绿色,命名为“ 波浪”。


4、把这个绿色的“波浪”图层向下移动,移动到中间的位置。

▲ 直接调整位置属性(左下角)设置成400,800即可。


5、再新建一个固态层,取名“ 电波效果”。我这里用的背景色是黑色,但是其实用任何颜色都可以。因为他只是类似于一个 遮罩。


6、在特效控制台内右键,效果 > 生成 > 电波。

▲ 所谓的电波效果,其实就是圆心向外发散小圆圈并且逐渐变大


7、设置开始宽度为 25,结束宽度为 5,频率为 1.5,扩展为 2.5

▲ 简单的说,就是把电波弄粗一点儿。置换以后,蓝色的部分就是坡度的爬升,空白处就是坡度的下降。这样就形成了波浪。电波的频率决定了波浪的速度,你可以根据你自己的需要,设置它的参数。数值越大,波浪速度越快。


8、把“电波效果”图层缩放设置成 300,这样电波就变得更粗了。



9、电波有点太稀疏了,把扩展设置成2.5。然后向左侧移动电波图层,让它到屏幕左侧外面去。



10、给“电波效果”图层增加:效果 > 模糊与锐化 > 快速模糊。模糊量设置成 19,并且把“ 重复边缘像素”勾选上。



11、这样,我们的波纹效果就做好了。 Ctrl + shift + c 我们把“电波效果”图层弄成一个“ 预合成”。一定要勾选“ 移动全部属性到新建合成中”。只有这样,才能应用后面的置换效果。


12、对中间绿色的图层应用:效果 > 扭曲 > 置换影射。



13、添加效果后就是下图的样子了。因为默认值比较小,我们可以看见一点儿很小的波浪了。


14、水平方向我们不需要波浪,设置最大 水平置换为 0,最大 垂直置换设置成 20(值越大,波浪越大,你可以根据你自己的需要设置)


15、蓝色的电波图层并不需要显示,关闭图层左侧的“小眼睛”。由于电波是从0开始发射,我们只要把这个图层向左拖动就可以了。让波浪一开始就全屏出现。我顺便把这个图层的时间弄长了一点,弄成了 30秒,避免有空白。


16、播放一下现在的效果,看起来不错的样子。

▲ 这里我要详细说明一下:为什么我们不用一个简单的波浪曲线做平移呢?因为我们电波效果设置的开始宽度是25,结束宽度是5,这样波浪的左侧和右侧是有变化的。 这样做出来的波浪有一种“甩尾”的感觉,更加的真实和细腻。上面这2个参数你一定要各种尝试,尤其是前后差距要大,这样你才能做出比别人动画感觉更好的波浪。



17、有的同学做到这个步骤,会发现他波浪的边缘有点不清晰(下图是我放大到400%的效果) 如果发现不清晰,进入波浪图层,还可以进行如下操作。



18、添加: 效果 > 蒙版 > 简单抑制 设置蒙版抑制为 0.5~0.6 左右(具体值你放大400~500%,然后把数值调整到边缘过渡看起来比较自然)



19、选择最顶上2个图层,也就是“ 波浪”和“ 电波效果-预合成”那两个图层了,按 Ctrl + shift + c 把他们弄成一个预合成,取名“wave”,留着备用。因为我们的水波要弄2层,所以这相当于一个小组件。


20、新建一个形状图层,命名为circle


21、用圆形工具,绘制一个 正圆。弄一个显眼的颜色,图层名称:circle。


22、这是弄好后的结果,一共有3个图层了。



23、选中 wave 这个预合成,将它的 轨道蒙版设置成 circle 的 alpha, 也就是圆形会变成遮罩。


24、我们播放一下动画:水波纹已经在圆球内晃动了。


25、选中最顶上2个图层,复制一份(可以直接 ctrl+d )。



26、选中倒数第二个图层,也就是我们的wave图层。给它添加:   效果 > 生成 > 填充。然后颜色选取一个深一点儿的绿色。



27、由于上面的浅绿色挡住了它,目前你看不出任何不一样,所以,我们把下面这个wave向左侧或者右侧移动一点儿, 让他露出来一部分。


28、预览动画效果,感觉很不错,突然感觉自己又帅又有才华。


29、接下来只要再做 从下往上的移动动画,水波增长效果就做好了。但是现在有2层水波,所以让 上层水波跟随下层水波,将“父级”那里的螺旋线条按住,拖动到 wave 图层上即可。操作过程中你会看到 AE 自动绘制了一根黑色线条( AE 的这个交互设计真是脑洞挺大的)。



30、上一步操作完以后,你会看到“ 父级”那一栏: 4.wave 说明它们的位置已经挂钩了。


31、在第一帧的位置,把 wave 这个预合成位置 y属性调整到底部,因为在遮罩的下方,所以看不到任何波浪。



32、在4秒钟的时候,把位置拖拽到上面。露出大概 96% 左右,再 k一帧,这样 上升动画就做好了。


33、预览动画效果,有点360清理软件那个味道了。



34、接下来,在界面上随意打几个字,具体什么文字无所谓,因为还要应用效果。


35、对文字图层添加: 效果 > 文字 > 编号。选一个不会侵权的字体,设置样式为粗点的感觉,并且居中对齐。



36、设置好后,就是下面这样了。你会发现之前自己打的字没有了,真正显示的文字变成了这个红色的 “0.000”


37、设置小数点位数为 0,如果你想做96.35%那种感觉就设置为2。然后把字体设置成 深绿色,调整到需要的大小和位置。



38、在第一帧对“ 值/偏移/最大随机值”k帧,然后在水波上升到不动的地方k帧,值设置成96。


39、预览一下当前的动画效果。


40、接下来我们在数字后面加上一个 “%”符号,字号设置小一点,并且移动到合适的位置。


预览最终效果,我们的水波纹百分比动画完成了~



如果你仔细看,会发现整个圆形的边缘其实有点杂边。这是因为我们其实叠加了2层波浪,主要是后面的深色波浪导致的。你再绘制一个直径更小一点的 同心圆形状遮罩就可以处理这个问题了。具体方法我们前面的步骤演示过。




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

设计部分

2、使用XD制作


1、新建一个800 × 800的画板。


2、用钢笔工具,绘制如下形状。


3、双击那几个要转曲线的点,就自动变成了曲线。

▲ 这里需要注意的是:左右两侧点必须水平对齐。



4、填充绿色,并且 Ctrl+D 复制一个,拖动到右侧,把它们挨在一起。



5、 Ctrl + G 将他们弄成一个组,方便一起移动。


6、画一个圆圈,圆圈的直径必须是刚才路径的一半。


7、选中所有的图层,右键 > 带有形状的蒙版,这样就做了一个遮罩。


8、这是制作遮罩后的效果。


9、Ctrl + D 复制一份现在的遮罩层。



10、把下面的改成深色。上面的是   浅色,下面的是   深色。(为了方便操作,我关掉了上面图层的眼睛)



11、把深色的拖动到左边,并且让右侧和圆圈的右侧对齐。



12、执行一下水平翻转。



13、打开刚才关闭的眼睛,最终的效果如下图:



14、选择画板, Ctrl + D 复制一个。



15、将第二画板里面的 浅绿色路径向左移动,一直移动到路径的右侧和圆圈的右侧对齐。(XD有自动吸附功能,所以这些操作都很简单)



16、把深色的路径向右移动,一直到路径的左侧和圆圈的左侧对齐。下图是移动前的样子。可以理解为 2个元素右对齐。


17、下图是移动后的样子,可以理解成 2个元素左对齐。


18、这是移动好的样子,虽然他们的x轴位置有变化,但是看起来是一模一样的。


19、点击原型,然后开始拖拽小箭头,从 画板1拖拽到 画板2。



20、设置触发为“ 时间”,类型为“ 自动制作动画”,延迟为 0 秒,持续时间为2秒3秒都行(我随意设置了2.2秒)。

▲ 需要说明的是:如果你的触发无法选择时间,那说明你不是对画板执行动画。   只有画板才有时间这个选项,当你输入0秒的时候,Xd经常会变成0.2秒,你最好输入0.0秒。



21、 2.2秒后,波浪就从左移动到了右边。这个时候,再对右边朝左边拉一个动画。



22、触发依旧是时间、延迟设置成 0 秒。类型为:“ 自动制作动画”。持续时间改成 0 秒。这样的结果就是,左边的图需要 2.2 秒的时间,跑到了右边。然后 0 秒钟,直接跳到了左边。然后又花 2.2 秒,跑到右边,如此循环,看起来就是连续的动画了。



23、波浪动了起来,突然觉得自己很有才华。感觉要再一次爱上自己了。


24、学会了最关键的步骤后,接下来你应该自己想想如何实现下面的效果了。动画的原理都是一样,我相信你一定不会觉得有难度。



25、你还得想办法加上一个滚动的数字。把这个动画做成像 AE 里面的那种感觉。

图文教程里面最后两个步骤留给大家自己思考。如果你实在不知道怎么做,就再去本篇文章的开头看看我们的 视频教程。 视频中我有非常详细的教给大家所有的步骤,包括最后的这2个留给大家思考的步骤


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


下集:代码部分


制作动画的思路和写代码的思路其实是一样的。你只要真正理解了自己要设计的动画,写起代码来非常快。理解,是整个工作过程中的基础。对于我而言,一旦花心思弄懂了这其中的原理,换一个软件,或者换成代码去实现,做起来都一样简单。所以,在教大家写代码之前,我要先花很多的心思带大家弄懂这其中的原理。


我们先来实现Adobe Xd制作的那个效果。

在我眼中,它就是非常简单的2个动画的叠加。

1是一个波浪水平移动一下。

2是移动的波浪向上移动一下。

就是这么简单的两个平移动画。



假设我们要制作的这个动画的水波球直径是200px。

步骤1:在Adobe Xd中新建一个200 × 250大小的矩形。



步骤2:加2个点,弄成波浪形状。

▲ 这个步骤我们上集已经教会大家了,不懂的同学可以去查看上集的教程。



步骤3:填充颜色,导出图片文件。

▲ 填充绿色后,导出这样一个png图片就是我们写代码需要的了。实际上,你导出一个svg格式的可能会更好(矢量的方便程序员改成做其他尺寸的波浪)。


这个图片就是我写代码需要用到的东西了。为了让你弄清楚这个动画的原理,我现在拿这个图片做一些讲解。


为了让你看清楚,并且理解,我先把这个图片放到界面上,并且命名为01,中间两条蓝色的线条就是我们这个动画要显示的区域。


我们复制一个,并且水平移动到它的右侧。为了区分他们,我命名为02。


我们先把01从右侧移动到左侧(不停的循环重复这样的动画)



同样的时间,把02从右侧移动到左侧(同样是不停的循环重复这样的动画)




如果你只观察蓝色线条以内的区域,就是水波纹在不停的移动了。我现在把蓝色线条以外的区域都遮挡起来。


我把上面的数字去掉,你就更看不出端倪了。



把刚才的图片用PS或者Xd水平镜像一下,然后把颜色弄深一点儿。也就是会另外得到这样一个图片


用同样的办法,在浅绿色动画后面,再做一个从右到左的水平移动动画,你就得到了这个:



这个时候,如果有个圆圈把周围都遮挡住,也就是我们平时所说的遮罩,这个水波动画就基本上成型了。


为了方便你理解这其中的原理,我把所有的遮罩都关闭掉。让你看到实际上我们动画的全貌:这个循环动画虽然看起来很闪烁,但是如果只看红圈内部,其实是一个完美的水波。你可以自己用左右手遮挡掉两侧,只露出红色圆圈部分,你就更明白了。



通过我详细的分解,现在你已经理解这个动画的原理了。利用这些原理来写代码就非常的简单了。水平的移动,CSS就直接可以搞定,这一切将会非常的轻松。那么我们开始吧~


步骤1:先弄好html结构

就是非常简单的 4 个 DIV,最外层 waveOuter 是一个圆圈。waveInner 类似是一个组,到时候让里面的两个波浪一起上升。wave1 就是前面浅色的波浪。wave2 就是后面浅色的波浪。


步骤2:给这几个DIV加上CSS

现在你看不到任何东西,是因为waveInner的高度是0px,你只要改动他的高度,就能看到水波上升的动画了。

因为左右平移的动画一直都在(也就是wave1和wave2)。waveInner这个div加上了transition属性,改变高度的时候会自动的有动画。就这样,3个非常简单的CSS动画,就基本上把只要一个水波球做好了。


当高度为200px的时候,水波球基本上是100%填充满,也就是说:

高度 / 2 就是我们要的百分比

document.querySelector(".waveInner").style.height = (百分比 * 2)+ 'px';上面这一句js 基本上就是整个动画的核心了,是不是很简单呢?


最终效果:


访问下面这个链接,你可以查看我写好的最终效果。https://pslkzs.com/demo/wave/demo1.php右键 > 查看源代码 可以看到最终的所有代码。


其实所有的代码就只有这一点儿:



接下来,我们再来实现一下用AE制作出来的这个水波纹。也就是这个:




步骤1:首先打开我们上篇教程里面用AE制作好的水波文件

设计和交付其实并不同,这也是我们设计师和程序员之间最需要沟通的地方。很多时候,设计需要做出一些修改和调整,然后再“切图”给程序员。这样才能完美的实现我们需要的效果。


很遗憾的是:在这个过程里面,设计师不懂代码,程序员不懂设计。双方的沟通又不够,最终实现的效果就大打折扣了。


步骤2:把百分比文字图层隐藏掉。把原来的圆形遮罩改成方形。



步骤3:把这个动画添加到渲染队列。然后导出png图片序列帧。


我们并不是所有的图片都需要,找到水波上升的最高处,并且找出一个循环(第一帧和最后一帧图片完全一样)我们只要这一部分的图片。


步骤4:挑选出一个水位最高的循环内的所有图片


步骤5:使用Ps动效代码助手,直接生成动效和代码

这款插件的下载地址是:

https://pslkzs.com/animate/index.php


《Ps动效代码助手》只有4个按钮,你根据顺序依次点击一下,就自动生成好了动效和代码。



打开index.html这个文件,就可以看到动效和代码了:

有了这个基础代码,我们的工作就变得超级简单了。和上面那个教程基本差不多,加一个基础的上升css动效就搞定了。


步骤6:弄好HTML结构

和上面的那个例子结构基本一模一样,只是不再需要wave1和wave2了,因为《Ps动效代码助手》生成好了一个叫做huiSeZhiZhao20211101075936的样式,我们只要直接复制过来,直接用。就有了波浪的动画了。



步骤7:给这几个DIV加上CSS样式

其中,huiSeZhiZhao那一长串样式都是插件生成的。



因为我们这次制作的水波球直径更小一点,是160px所以,当.waveInner的高度为160px的时候,就是100%。那么:

高度 / 1.6 就是我们要的百分比

document.querySelector(".waveInner").style.height = (百分比 * 1.6)+ 'px';


这就是我们所有的js代码了:


就这么简单,我们就这么轻轻松松就实现了ae制作出的这个水波球,我们来看一下最终效果:


你可以访问这个网站,来查看我们的最终效果:

https://pslkzs.com/demo/wave/demo2.php右键 > 查看源代码 可以看到最终的所有代码。其实所有的代码就只有这一点儿:


今天的教程只教关键的部分,也就是水波纹的上升。数字从0递增的效果我们以前教过大家,数字字体改成使用D-DIN字体,以前也教过大家,可以从这里去查看我们过去的教程(去里面查看 百分比环形动效教程,设计+代码我都一起教你了那篇教程):

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


制作教程很辛苦,如果对你有帮助,记得帮忙点个赞

Powered by Froala Editor

更新:2021-11-04

收藏

36人已收藏

  • 76

    作品

  • 645

    粉丝

  • 33

    关注

  • 腾讯CDC解散,是不是大厂设计也失去话语权了?
  • 寻一位UI合伙人
  • 我,7天,开发了一款免费的词云工具
  • 灰大设计团队近期作品
相关标签
UI设计AE教程

    猜你喜欢

      2021-11-04 原创文章 教程 举报 2576 36 15 3

      水波纹百分比动效教程,设计+代码我都一起教你了

      0.0°

      你确定要举报水波纹百分比动效教程,设计+代码我都一起教你了

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年11月04日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      15
      36
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录