圆周函数
在以前的教程中我们提到过,三角函数与圆形之间存在着密切的关系,其关系密切到有一些老的教程将三角函数称为圆周函数。因为以固定斜边组成的直角三角形可以形成一个圆形,这条斜边就是圆形的半径。
从上面的动画示例中可以看到,直角三角形的两条直角边的轴心点分别对应于圆周上点的X、Y坐标(假设坐标原点位于圆心处),因此我们可以使用三角函数来找出圆周上点的坐标,使用同样的方法我们还可以计算出直角三角形中未知边的长度:
对于圆周上任意一点,其X坐标等于圆周半径乘以圆心角的余弦值(x=r*cos(A)),Y坐标等于圆周半径乘以圆心角的正弦值(y=r*sin(A))
在下面的例子中我们将使用三角函数来完成图层围绕中心点旋转的效果。
示例:圆周运动
表面看起来要使一个图层围绕某一个中心点精确的旋转不需要使用复杂的表达式,我们只需要调整图层的轴心点然后为旋转属性设置动画关键帧就可以了。那为什么还要使用表达式来进行设置呢,实际制作过程中我们会发现当使用设置关键帧的方式来制作旋转动画时,图层的朝向会随着旋转角度的变化而发生变化,而使用给位置属性加入表达式的方法就可以使图层的朝向始终保持不变,同时我们还可以独立的为图层旋转属性设置动画,制作出类似于地球自转与公转的效果。
首先,为旋转的环绕中心定义一个变量:
center=this_comp.layer("Center").position;
其次,定义旋转的圆周半径(以象素为单位):
现在我们需要设置决定旋转角度的变量,这个变量将驱动旋转动画。在这个例子中我们将使用时间来决定角度的变化,这样图层就会随着时间的变动自动完成旋转动画。要使图层旋转得更快,我们可以将变量定义为2*time,所以我们的图层将使用PI秒的时间(2*time=2*PI)来完成一个周期的旋转(还记得么,在三角函数中我们要使用弧度,一圈就是2PI弧度):
在这个例子中,核心表达式为:
x=radius*Math.cos(angle);
y=radius*Math.cos(angle);
最后,只需要将将X、Y值与旋转中心的坐标进行加法运算就可以得到圆周上点的坐标了:
最终的动画效果:
单击这里
下载工程文件 (Windows 用户单击这里)
示例:圆周排列
很多软件都为我们提供了排列对齐工具以快速对多个物体进行准确的位置排放,但是这些工具只是限制在线形的排列上,在AE中我们可以使用表达式来完成一些非线形的排列,在这个例子中我们将修改前一个例子中的表达式来完成一些非线形的图形排列。
在上一个例子的表达式中,我们是用时间来驱动图层的旋转角度动画,在这个例子中我们将使用图层的层序号来控制角度的变化,当图层序号增角度加时,旋转角度也会随着改变,引起图层位置的变化。所以再复制图层时,他们就会准确的排列成一个圆周:
layer_num=index-1;
interval=30;
angle=degrees_to_radians(layer_num*interval);
我们之所以要将图层序号减1是因为需要将图层序号从零开始记数,这样我们得到的第一个图层就位于0度角(相对于水平位置)。这仅仅是个人喜好,不是表达式中必须的语句。
"interval"决定相临图层之间的偏差角度,将图层的序号乘以30后,我们就会得到一系列的角度偏差值(0,30,60……),最后使用一个进制转换函数degrees_to_radians()将度转换为弧度。
最终的效果就是序号为1的图层位于圆周零度角的位置上,序号为2的图层位于30度角的位置上,依此类推。下面的动画就是复制第一个图层后的效果:
当复制了足够多的图层时,他们旧会准确的排列在圆周上,我们还可以使用动画菜单中关键帧助手下的'Convert
Expression to Keyframes' (将表达式转换为关键帧)的方法将表达式替换为关键帧。这样我们就可以在不影响表达式的情况下自由为图层设置动画。
当然,使用这种方法进行排列图层是有些麻烦,但是对于复杂的图层来说确实是一项非常了不起的实用技术。
下面就是完整的表达式:
center=this_comp.layer("Center").position;
radius=80;
interval=30;
layer_num=index-1;
angle=degrees_to_radians(layer_num*interval);
x=radius*Math.cos(angle);
y=radius*Math.sin(angle);
add(center, [x, y]);
单击这里
下载工程文件 (Windows 用户单击这里)
|