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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【C4D教程】三维化毛玻璃图标动效(上)
0.0°
2021-08-26 原创文章 教程 举报 3020 25 74 0

这算是接之前的两篇【Ae磨砂玻璃icon动效教程】的教程吧,将二维图标三维化并为其制作动画效果。

Ae版教程(上篇)地址:https://www.ui.cn/detail/589452.html?nopop=1

C4D版教程(下篇)地址:https://www.ui.cn/detail/599731.html

纠结了很久要不要把建模部分也详细地写进来,因为我的初衷是想将这个教程做的更系统详尽一点。但由于建模方式多种多样,比如nurbs建模,多边形建模、体积建模、参数化建模甚至是逆向建模等,它们适合的领域方向也不一样,难易程度也不同,每个人喜欢用的方法也不同。而像这种不需要精细打磨的模型做起来就更简单了,简单了也确实没什么好讲的。

但是我会根据需要在教程中穿插一些建模或者辅助建模技巧和方法。所以,我默认大家有一定的建模基础及软件操作基础,不讲太简单的内容,也不拓展到旁系其他内容,只讲该案例所涉及到的东西。

教程不使用插件,使用默认渲染器,当然你安装了话可以用,那样更快,插件能做到的我们手动也可以,只是要多花一点时间。我想说的是很多时候我们没必要让一个插件一个脚本甚至一种语言阻碍我们去接触一个新的领域学习一个新的技能。我太明白设计这行总是要求我们掌握很多很多软件,有很多附加技能,插件一个接一个学了一个忘一个,甚至软件也层出不穷,动辄百M上G,对电脑配置要求也极高,这款软件需要个好的显卡,那款需要个好的GPU,另一个又需要一个好的CPU,更过分的是对型号还有要求,这着实让人头疼。但触类旁通吧,遇到问题多想想,天下文章一大抄,同类软件也差不多。对于工作而言,过程没那么重要,只要达到想要的结果就行。

———————  毛玻璃材质的调节方法  ——————

最重要的是下面两个参数:

1、透明通道里的模糊数值,根据实际需要给个适当的值就行,模糊值越高渲染越慢。

2、反射通道中透明选项卡下的粗糙值。

3、如果你需要一块彩色玻璃,可以调节透明通道中的颜色或者吸收颜色,吸收颜色可以通过调节吸收距离控制玻璃通透度(值越大玻璃越透),感觉颜色层次更丰富。

下面开始讲解每个图标动画,由于渲染太慢了我每个图标只渲染一张静帧效果展示吧。

——————— 案例1:卡券(coupon) ———————

1、还是先根据造型和动画效果分析采用哪种方式进行建模更方便快捷。像这个案例使用nurbs建模就可以。将Ai中的路径存储下来放入C4D中进行挤压,挤压出厚度即可。文字部分也可以使用C4D的文字。需要注意的是由于后面的黄色“副券”部分需要做撕下来的动画所以不适合为模型加细分曲面和圆角封顶,要不然虚线连接处会有痕迹。模型部分就这一点需要注意的。

2、然后就是动画,这个动画只是旋转和位移上的动画,所以也不需要过多讲解。只是旋转的弹性动画,我们在Ae中使用了motion的excited。那么在C4D中我们可以通过手动K帧来代替,或者使用延迟(delay)效果器来模仿这种弹性动画,记住这里,以后很多弹性动画我们都可以通过这种方式代替手动K帧来实现。下面我先来讲下这个效果器的用法。

如下图我们要为这个立方体做旋转的弹性动画,由于效果器无法直接作用于立方体对象,所以需要一个Fracture(分裂?)作为立方体的父级,使效果器作用于Fracture,此时的Fracture就相当于一个中继器。然后我们为fracture添加一个简易效果器,仅仅用来控制旋转属性。然后衰减为线性,方向为-Y,其实方向无所谓,只是影响你往哪个参数上K帧而已。

然后我们对建议效果器坐标的位置YK帧,让效果器从上到下进行移动,就会看到立方体发生了旋转。

此时旋转还没有弹性的效果,我们还需要为Fracture添加延迟效果器,效果器模式改为弹簧,强度自己看感觉修改。如下图所示。

3、将第2步的知识点用在这个案例中,就是下图这样子的。

  • 剩下的就是上材质渲染了。感觉这个还是渲染个正面一点的视角好看些。
  •  

———————— 案例2:开灯(light) ————————

这个案例在造型上做了一点点的改变,把灯泡和灯罩的之间加了一个螺口。

1、建模上依然可以nurbs建模,绘制出截面的样条线后使用旋转(lathe),然后C掉模型后循环U~L或填充U~F选择需要上不同材质的面创建选集即可。这里我没有使用绕转,而是使用了基本几何体删除不需要的面然后对不同的模型部分进行了缝合M~P。

比如灯泡用球体,灯罩内外两层都用半球体,螺口用圆柱体。而五官部分需要做表情动画,所以眼睛需要用胶囊,嘴巴需要用扫描来做。如下图所示。

2、眨眼的动画通过胶囊的高度来实现。

3、嘴巴的动画通过控制扫描的路径的锚点来改变,这就需要用到点级别动画,使用方法是这样的,点亮点级别动画的图标,然后选中扫描路径在点模式下使用钢笔或移动工具调整这条贝塞尔路径。调整好后就可以点击“小钥匙”图标记录下这个对象的关键帧了,快捷键是F9。

4、灯泡的亮灭就需要为材质K帧了。可以为材质的发光通道的亮度K帧,如下图所示。 玻璃材质开篇已经说过了,其他材质根据自己的喜好来即可。

5、灯亮灯灭差不多是下面这样一个状态。至于灯亮瞬间的放射光点我就不做了,想做的话可以使用可放射克隆对半径K帧即可。

——————— 案例3:下载(download) ——————


这个案例中云朵外形我使用了体积建模,如果您用的是R19及以下的版本是没有这个功能的,但是可以用融球或者任何一种你喜欢的方法代替。同样建模上不存在难点,但是每一部分做的时候都要考虑一下采用这种方式动画能否更方便地执行。

1、云朵使用体积建模,如下图我用了两个球体和两个胶囊。而云朵的壁厚度可以使用布料曲面赋予。

2、云朵内部表示下载进度的蓝色的水波纹可以使用噪波和布尔来得到。如下图,将云朵的体积网格当前状态转对象后,全选所有面然后D挤压,不勾选创建封顶,数值要是负数,因为我们需要内部的水与云朵外壳不产生穿插。然后新建立方体分段需要多给一点但不要太多以免消耗太多资源,为立方体添加置换变形器,给置换一个合适的噪波及强度。将立方体和缩小后的云朵做布尔的相交运算。

那么涨水的动画我们就可以通过立方体Y方向的位移来实现。如下图所示。 

3、而箭头完全可以使用挤压(这里我没有用挤压做不用太在意),数字和“%”可以直接使用motext文本。

4、由于数字会不断变化,这里我们可以通过Xpresso来控制,如下图所示。

我按照连线的走向解释一下上图中这些节点的作用:使用时间(帧)来控制数字的变化,由于我设置的是50帧时下载进度达到100%,所以使用了乘法运算让帧数乘以2赋予给数字的文本属性,也就是说数字会按2,4,6,8……的规律一直增长,直到时间轴结束。但显然我们只需要这个变化持续到第50帧即可,那么可以加一个限制节点clamp,限制输入文本的上下限值分别为0和102。但是我们还需要在第51帧时让数字和“%”消失(隐藏显示),所以需要加上一个逻辑判断,那就是当文本值不等于102时,数字和“%”保持显示,反之,当文本值等于102时,数字和“%”号就会消失,也就是说在第51帧时,这两个对象都会被隐藏,我们看到最大数值依然是100。

5、当进度到了100%的时候,会出现一个对勾“√”,在Ae中我们使用的是修剪路径,在C4D中我们可以使用扫描的开始和结束生长参数来模拟修剪路径,记得扫描的对勾路径首尾要比需要的部分多出来一小段作为回弹空间。如下图所示。 

6、箭头的动画没有难点,做一个循环,然后选中关键帧让其重复执行即可,然后在第51帧让箭头隐藏。

最后一帧效果这样。

还是分上下两篇吧,太长了翻起来好麻烦,也没个锚点链接跳转。


Powered by Froala Editor

更新:2021-08-26

收藏

25人已收藏

  • 14

    作品

  • 121

    粉丝

  • 19

    关注

  • 全息镭射渐变防伪标签/贴纸
  • 【C4D教程】三维化毛玻璃图标动效(下)
  • 【C4D教程】连点成线创意文字动态海报
  • 【Ae教程】连点成线创意文字动态海报

    猜你喜欢

      2021-08-26 原创文章 教程 举报 3020 25 74 0

      【C4D教程】三维化毛玻璃图标动效(上)

      0.0°

      你确定要举报【C4D教程】三维化毛玻璃图标动效(上)

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2021年08月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      74
      25
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录