JDC内部同学会-程序化视觉表现与多媒体设计

像鲁班或者玲珑这样的系统。他们算是因为科技进步带给设计的红利。设计师不需要理解其中具体运作的原理。只需要操纵这样的系统即可。今天讲的东西其实是和他们有所联系 但又有所区别。在程序化大行其道的今天 我想站在一个设计师的角度。给大家分享一下 我们设计师利用代码和一些自动化工具 能够在视觉上做到什么有意思的东西。

本次分享我会分成三个部分 第一部分 我想简单介绍一下这是个什么东西
第二部分 是为什么要去了解和接触它们
在最后 我会分享一下作为一个可能是没有接触过代码的设计师 有什么快速入门的途径和一些思路

我的理解是 代码和自动化工具 在多媒体设计中的应用
在我们常规使用的很多多媒体工具中，他们一般都会留有一些接口。
其实代码就是写给软件的语言 开发者能想到的程序功能始终有限的 而很多高定制化的独特的炫酷的功能往往可复用性是比较差的
所以这个使用就需要我们使用代码和程序沟通

比如AE中的表达式 C4D中的xpresso 以及像houdini和Processing这种天生是面向技术美术工作者的软件
他们都是我们使用程序化语言告诉软件我们想要实现怎么样的效果的入口

我不知道用过AE的大家有没有这样的一些场景。觉得自己总是在重复相同的工作。如果图层少还好我们可以逐一key帧 但是如果成百上千个图层呢
可能你只需要学习几分钟 就可以在一个项目节省几个小时的时间。
这儿举一个不太恰当的例子 例如卡农这首歌。这首歌的基调其实非常简单 整首歌都是在对同一个小节的调子进行不同的变调和重复。
其实代码在对我们设计做的是同样的事情。我们只需要思考其内部的逻辑和我们想要的效果 很多大量重复的工作都是可以交给代码的

这就是我理解的设计师需要用到代码的场合 比如对大集群的图形元素控制 通俗来讲就是 形如粒子 一个画面中有好多好多图形都要有规律的运动这样的情况
还有就是通过程序我们可以讲不同元素绑定在一起 我们对其中一个进行更改 便会影响它所在的整个系统

我想说的是 其实形如AE表达式这样的代码 本身就是对设计师非常友好的
如果说学习代码直接的利益驱动是为了工作效率的提升的话
核心的点可能是通过学习代码 设计师可以站在程序逻辑的角度思考自己的视觉
我们用户体验设计讲一个点叫同理心。学习代码其实就是站在程序软件的角度去思考视觉实现 从逻辑的角度反推视觉 往往会有意想不到的收获
所以我认为相比学习代码本身 这才是最重要的

首先是第一个要介绍的 我把它称作设计师的第一行表达式
为什么这样说 因为这真的是非常简单的一个表达式 我们甚至都不需要去写什么代码 直接ae就提供了写好的 我们动动鼠标就可以做
顾名思义 这是一个让你的动画循环起来的代码 只有一行
它有很多不同的形式 用得最多的就是loopOut（）这样一种写法。对的 什么都不用改。
它会默认从你开始key帧的地方开始做循环动画 循环的范围是你key帧的动画范围 我们可以看一下 短片演示

最后我想介绍的是通过一行表达式巧妙的实现延时的效果
这支片段我截取自UC浏览器的一个发布会的视频 其中这个眼睛的光刚好就是使用了这行表达式
这个效果可能有一点复杂 为了实现这样的效果 我想可能把我们要解决的问题拆分成三个小问题

其实与其说index这个词是一个表达式，不如说它是一个变量更为准确 inedx所代表的值，就是AE图层中前面的序号，你为某个属性添加了index这个变量表达式，那么就相当于讲这个图层前面那个序号付给的这个属性
比如我图层排在第一个 那我的index就是1
Index可以说是表达式中用得最多的一个变量了。我们可以给物体的旋转属性赋予这个变量 在我们复制多个图层的时候。这个变量就会随着图层序号的变化改变 从而实现每复制一个 物体就多旋转一下的效果

首先要讲解一下valueAtTime的作用原理 这个函数会返回所输入的时间下对应的值。比如 如果这儿的time是当前时间 那么所返回的值就会和原来的值是一样的。如果这个值小于当前时间 那么它就会比原来的动画要慢一些。
利用这一个属性 还有刚刚前面提到的index以及我们新建一个随机数 就可以让线条的动画不在同一时间播放 同时又会根据图层序号的大小在大体上有一个先后顺序

最后我想给大家分享的是一个映射表达式
很多时候 我们会用AE做一些UI原型动效 其中我们的交互操作可能会影响ui动效的变化 如果需要将他们的动画完全对应起来 就需要这个表达式
比如说 你想做下拉 顶上的头图封面同时放大 形如这样的动效
只需要设置第一个小球的动画 并规定第二和第三个小球映射的规则 第一个小球运动就会带动第二第三个小球运动

如果说AE的表达式是主要安利给UI的同学 然后今天我想给大家分享的第二个工具主要安利给多媒体的同学 那就是houdini 这个工具在一开始本来是设计给特效工作者的 但是最近越来越多的多媒体工作者发现 在C4D中遇到瓶颈的时候 使用这个软件能很快的做一些C4D达不到的效果
它是全节点类型的一个软件 我想大家应该都用过C4D吧 C4D中有一个叫xpresso的功能 长得就跟它很像 但是它有个不同的地方是 他能更简单的去实现一些高定制的动效 之前在分享一开始的那一支片子 不少都是使用这个软件做的

Houdini制作像素风三维模型
我们组有的三维项目也会用到这个软件 当然可能只占5%不到。更多时候我是把它当做一个三维加工工具在用 很多三维资产在转入houdini加工后还是会转入C4D中进行制作。
就比如说之前的同事做的一个推金币的sns 当时他想要用像素体块营造一种电玩的质感 于是我用他建好的场景模型 导入到houdini中 把它转化为了体素（volume） 可以理解为云和气体一类的东西 然后再均匀的对他们撒点（scatter point）最后将立方体克隆到点 就形成了这样的一种像素风格的模型。 整个过程耗时不到5分钟 非常快