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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
5分钟打造3D螺旋曲线动效
0.0°
2018-12-03 原创文章 教程 举报 9320 261 510 30

前言

光阴似箭,日月如梭,距离这篇教程的预告已经三个月了,在这秋风送爽的时节,终于迎来了正文。教程产出速度虽然慢,但从标题来看,它的特点依旧是:快。是快速出效果,而不是我很快就能写完。不然你以为我这三个月都在干嘛?


先说说我做这个动效的初心,是有天我在YunOS上看到了下面这套牛逼的动效:https://www.ui.cn/detail/230109.html(@tcwison大神作品),瞬间膝盖不听使唤掉在了地上,从此没法站起来,为了恢复行走能力,我利用吃鸡组队的时间间隙苦苦钻研,在尝试用 3d Stroke 来实现失败后,不得不转求 C4D,发现真**简单,我在跳伞之前实现了这个效果。

Image title



正文

以上纯吹牛逼,你要是一字不落地看到这怕是五分钟完不成了,虽然全文只需创建只两个元素:圆环、螺旋变形器以及两个动画:圆环旋转动画、螺旋变形器器角度动画(扭转动画)

 

一、创建圆环

(更优的圆环创建方案详见文末,感谢@白金火大 同学的优化建议)

1.动画的主体是一个环,所以我们先来创建一个环。

Image title


2.调整圆环半径到合适大小,分段可以先增加一些,后面我加到了144,没别的意思,就是72x2。

Image title



3.先把圆环立起来。(先立起来,保平安。下文中应用螺旋变形器之前没立起来,可能会导致螺旋方向不正确)

Image title


二、创建螺旋变形器

1.创建螺旋变形器。

Image title


2.将螺旋应用给圆环,在对象管理器上按住螺旋拖动到圆环图层上,出现向下箭头时果断点松手。

Image title


3. 应用成功后,将螺旋变形器拉长,使螺旋变形器在旋转到较大的角度时也能将圆环包裹住。1200是因为我老家村里人都觉得12吉利。

Image title


三、创建圆环旋转动画

1.选中圆环,在0帧位置,R.P的旋转角度为90度时按下左侧录制键,打下关键帧。 

Image title


2. 在30帧位置,将R.P的旋转角度设为310度,并打下关键帧。至于为什么是30帧和310度,因为在下文中要讲到的观察角度上看,我觉得这两个值这么搭配这样比较好看(会在一定程度上避开螺旋扭转导致圆环的线条在透视角度下明显粗细不均的状态,文末的“扫描创建圆环”的方式能解决这个问题)

Image title


3. 在90帧位置,将R.P的旋转角度设为450度,并打下关键帧。90帧是C4D默认动画时长,为了能在5分钟里做完,哥,这个我们就不改了。450度是为了跟最开始的90度相减得到完整的一圈360度,好让圆环回到最初的角度。此时,点击时间轴上绿色的播放键,圆环能做一圈忽快忽慢的旋转运动了。

Image title


四、创建螺旋变形器角度动画(扭转动画)

1. 真正的特效要来了。在对象管理器中选中螺旋,在时间轴20帧处,螺旋角度值为0度时,打下关键帧。为什么是20帧处,为毛不从0帧开始。因为前面20帧圆环要酝酿一下,给人家20帧准备工作怎么了,1秒时间都不到,不过分吧。认真脸说,圆环先转起来,积攒一点势能,再发生形变,这样的动画更自然一点。不过我这教程里也没有做得很自然,旋转方向跟扭转方向不一致,运动速度也还需要优化,但是为了你五分钟就能学会,我忍了。

Image title


2. 在45帧时,将螺旋角度设为1200度,对,还是1200,原因同上。打下关键帧。

Image title


3. 在90帧时,将螺旋角度改回0度,打下关键帧,圆环恢复原貌。

Image title



五、创建摄像机/选择视角

1. 输出动画时我们需要一个合适的角度,所以需要有一个合适的视角,可以通过创建摄像机,调整好角度,再以该相机视角输出动画。也可以直接切换视图,看看有没有能直接用的·。点击预览视窗右上角的切换视图按钮。你看右下角正视图这个角度刚刚好。

Image title


2.(如果用上述选择视图的方式定下了输出视角,下面创建摄像机这一步就可操作可不操作了,毕竟说好的只要5分钟,不要让你的鸡友等太久)

创建摄像机的方法则是如下图创建一个摄像机。

Image title


3.将摄像机坐标旋转角度都归0(如果发现你的圆环不见了,别慌,在对象管理器中选择圆环,按一下O,是欧,不是零,他就就回到你的视野里了),同样的,我们拥有了一个合适的可输出动画的视角。

Image title


六、选择材质

1.效果图里不会是骗人的,所以我们要上个材质来实现效果图中单色的线条效果。创建一个材质球,双击打开材质编辑器,勾选发光,一个纯白的材质球就有了。

Image title


2. 点击“渲染到图片查看器”图标,可以看到渲染器中的圆环已经变成白色,仔细看圆环的曲线不是很圆滑,前面叫你多加点分段数时不知道你有没有听,没有听也没关系,现在还可以回去再加点,我加到144就好多了。

Image title


七、输出动画

1. 其实这一步我很不想写了(现在是凌晨2点半,我想睡了),应该所有C4D的动效教程都会有这一步吧。但评论区一定会有人问,所以...先点预览窗口左上角“查看”,选择“作为渲染视图”(前面以正视图做输出视角的也记得选一下正视图作为渲染视图)

Image title


2.点击“编辑渲染设置”图标,输出设置这里选好你要输出序列帧的起点和终点,0~90。

Image title


3. 保存设置这里选择格式为影片相关格式,如果需要背景透明记得勾选Alpha通道。选好保存位置,准备输出。

Image title


4. 点击“渲染到图片查看器”图标,渲染完成,5分钟时间到,如果超了,请反思一下是不是你电脑速度太慢。

Image title



最后

如果有帮到你,请记得点赞。现在是凌晨3点,天亮了我还要上班…




补充

圆环创建方式更优方案

前文中的直接选择圆环模型的创建方式,创建的是一个多边形模型体,不可避免地在发生变形时导致管体被压扁,而造成线条粗细不均,评论区 @白金火大 同学提出的用扫描圆形曲线生成圆环的方式能完美解决这个问题。秉着精(chui)益(mao)求(qiu)精(疵)的学习态度,补充以下操作步骤:


1.创建圆形曲线,复制一个并缩小

Image title


2.创建扫描并应用给圆形曲线,生成曲面模型体的圆环

Image title


3.给大圆曲线添加螺旋变形器,调整变形器高度和旋转角度,具体可对照上文。这时你会发现大角度扭转时曲线并不圆润,会出现许多折角,然后请看下一步

Image title


4.把大圆曲线点插值方式设为细分,瞬间圆圆润润,曲线动人

Image title


完!

喜欢请点赞,我要午睡去了...



有任何疑问,还可以加我的微信公众号向我提问哦~

Image title









更新:2018-12-03

收藏

261人已收藏

Hicy

交流、合作请联系,QQ759804591

  • 42

    作品

  • 2087

    粉丝

  • 53

    关注

  • 智能汽车语音形象设计提案
  • 智能仪表HMI设计
  • MINI随行3.0交互设计
  • 2020动效作品集

    猜你喜欢

      2018-12-03 原创文章 教程 举报 9320 261 510 30

      5分钟打造3D螺旋曲线动效

      0.0°

      你确定要举报5分钟打造3D螺旋曲线动效

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年11月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      510
      261
      30

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

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

      登录

      手机号

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

      登录
      第三方账号登录