技巧：表达式完成一个看上去很高端的日期选择动效

原作者：Oleg Frolov

制作了好多有趣的ui选择交互动效，这是其中一个比较难的，我个人临摹用表达式完成的这个效果

年前的最后一个技巧分享，用 程序员 的思维来完成这个动效。

首先拿到这张图，我的第一件考虑的事情就是如何将日期的位置与缩放还有透明度联系起来，这是一个最至关重要的问题。

所以我第一个想到的便是 插值函数：linear 。这个函数的本质我已近在卫生纸动效那期ae技巧视频分享详细说过了。这里也就不过多的赘述。

那么，首先我们建立一个制作gif图的标准合成（800*600，24fps）。再建立一个固态层作为背景，颜色：E3E3E3。然后绘制一个170,90大小的矩形，并将它至于合成的中心，圆度为20，颜色：262626，并给它添加 网络变形 和 投影 两个效果。详细参数如下：

这样我们的日期显示区域就做好了。

那么到了我们最重要的部分了。我们先建一个文本层，输入什么无所谓，注意这里要将 段落的对齐方式选择为居中 ，这样文本的锚点在水平方向会在中点。同时将数值方向我们也将锚点放在中点同并将文本置于合成中心。不直接调节锚点，而采用段落居中调节是因为不同的数字在水平方向占的宽度是不一样的，直接移动锚点，复制之后，由于数字不同，整个文本的宽度会变，但是锚点不会再水平方向是去往中点，而段落居中却可以。

考虑到后续可能需要调整，我选择先建立一个空对象来存储我们的变量值。这里我添加了两个滑块，一个叫间距，一个叫位置。间距我设为固定值60。而位置的值需要我们来设定，这是用来控制整个动效左右滑动的参数。

前期工作做完了，我们可以开始书写表达式了。首先展开我们的文本层，里面有一个叫源文本的一项，按住alt键左键单击源文本前的小秒表就可以写表达式了，这里我们键入： index ;表示让他的显示数值为他的序列号。所以这里需要注意的一项是，为了不影响序列，我们将空对象以及后期添加的按键效果统统放在我们的文本层之后。然后我们调出文本的位置， 右键-单独尺寸 ，因为我们只要对x做操控。同样给x书写表达式：transform.xPosition+(index-1)*thisComp.layer("空 1").effect("间距")("滑块")+thisComp.layer("空 1").effect("位置")("滑块");这里是将x本身的值（400）+序列号-1个间距+我们的位置控制滑块。这里我们就做出了文本与文本之间的间隔同时可以用位置滑块来控制所有文本的移动。

然后给缩放添加表达式：

a=Math.abs(transform.xPosition-400);

temp=linear(a,0,85,100,40);

[temp,temp]；

第一行我们将x的值减去了400，即为序列号-1个间距+我们的位置控制滑块，然后取了绝对值。等价于我们将x轴的零点位置移到了400的位置，即下图参考线位置。同时我们取绝对值为的是得到与400这条参考线的距离。

第二行linear表达式将第一行的距离值0与85分别映射给100与40，这里取85，因为矩形显示框的水平大小为170，85正好是显示框左右与400的最大距离。

最后返回大小，范围为（100,100）~（40,40），由第一行的距离值决定，而距离又由位置值决定，所以我们完成了位置滑块控制缩放。

对于透明度，则采用同样的方法：

a=Math.abs(transform.xPosition-400);
linear(a,0,85,100,25);

不要忘了最后我们只要文本在矩形区域显示，这次我们不用遮罩，因为用遮罩需要31个遮罩。给文本层添加 效果-通道-设置遮罩 ，从图层获取遮罩，选择矩形区域那个图层，第二个选择 效果和蒙版 。

剩下来的就是复制复制复制了。

改变位置滑块的值可以看到整个所有的文本都一起移动，且在矩形区域有缩放与透明度的变化效果。我想最开始显示为日期15，那么日期15为相当于x的0位置，而我们位置是日期1的，所以日期1的位置为14*60*-1=-840，这也是我上面图中-840的由来，对于该数值k帧，最终的 停留数为60的倍数 （固定间距值的倍数，数值上下限为840，-840）。

最后配合一些点击与滑动效果（对圆的位置缩放透明度k帧），那么整个动效就完成了。

这就是本次的技巧分享啦，最后的最后提前 祝大家春节快乐 。