这就是我们最终呈现的效果，首先我们简单分析一下这个动画，总共有9个图层，每个图层的动画一样，位置和透明度有变化，它们仅仅是动画起始时间有偏移，偏移的方式是自上至下、自左至右那么我们只要排列好这些图层，获取图层的原始位置值，根据原始位置值分别向左或者向右偏移，那么位置动画就搞定了，透明度基本上所有的都一样从0-100-0这样一个变化过程。
9个图层我们需要一个个去新建吗？显然那样太麻烦了，而我并不是一个喜欢麻烦的人这里就需要深入我们上次分享的内容，如何批量复制图层了古水生：AE脚本-批量复制图层0 赞同 · 2 评论文章
第一步，我们先新建一个形状图层我们之前从来没有介绍过如何新建形状图层，这里引出AE的一个API app.project.item().layers.addShape() 层收集对象：app.project.item(index).layers.addShape()。
描述：创建一个新的空形状图层的形状图层对象使用形状图层对象来添加属性，比如形状、填充、描边和路径等等等同于使用图形工具，图像工具会自动添加填充、描边等等的矢量组 参数：无 返回：形状图层对象。
因为今后我们会大量重复使用此API，所以我们将其封装成一个函数// 添加形状图层-内容为空 functionaddShape(name){varcomp=app.project.activeItem。
;varlayer=comp.layers.addShape();layer.name=name;returnlayer} 这样就新建了一个空的形状图层，里面啥都没有，没有路径，没有填充，没有描边。
我们这次需要解决的问题中需新建圆形的形状图层，那么我们封装一个古水生：AE脚本-全局函数isValid()1 赞同 · 2 评论文章
古水生：AE脚本-获取图层的所有变换属性getTransform()？1 赞同 · 0 评论文章
古水生：AE脚本-16进制颜色转RGB颜色hexToRGB()0 赞同 · 0 评论文章
// 添加形状图层-圆形 functionaddEllipse(name,size,pos,fillColor,strokeColor,strokeWidth){varcomp=app.project.
activeItem;varlayer=comp.layers.addShape();layer.name=name;varcontents=layer.property("ADBE Root Vectors Group"
);vargrp=contents.addProperty("ADBE Vector Group");grp.name=Ellipse 1;varelps=grp.property("ADBE Vectors Group"
).addProperty("ADBE Vector Shape - Ellipse");elps.name=Ellipse Path 1;elps.property("ADBE Vector Ellipse Size"
).setValue(size);elps.property("ADBE Vector Ellipse Position").setValue(pos);if(has(fillColor)){varfill
=grp.property("ADBE Vectors Group").addProperty("ADBE Vector Graphic - Fill");fill.property("ADBE Vector Fill Color"
).setValue(fillColor);}if(has(strokeColor)&&has(strokeWidth)){varstroke=grp.property("ADBE Vectors Group"
).addProperty("ADBE Vector Graphic - Stroke");stroke.property("ADBE Vector Stroke Color").setValue(strokeColor
);stroke.property("ADBE Vector Stroke Width").setValue(strokeWidth);}returnlayer}varlayer=addEllipse(
C 1,[80.5,80.5],[0,0],hexToRGB(4525EF)) 演示下添加圆形形状图层的效果：
接下来复制8个图层，加上原有的总计9个图层，后排列为矩形阵列 先给出9个图层的所在位置怎么确定的函数// 9个图层 functionnineLayers(layer){//获取图层的边界框，返回一个数组，包含图层的宽和高 。
varbBox=getBounds(layer);//获取图层的当前位置值 varpos=getTransform(layer).pos.value;//调节系数，用图层宽和高的一半的1.2倍，指定其他图层离原有图层的位置
vardis=(bBox[0]+bBox[1])/2*1.2;//从上至下，从左至右，排列这些图层图层的位置值以原图层的位置值为基础进行偏移 varresult=values([[-dis,-dis],
[0,-dis],[dis,-dis],[-dis,0],[0,0],[dis,0],[-dis,dis],[0,dis],[dis,dis]],pos);//返回获取到的9个图层的位置值 return
result} 然后复制图层并指定这些图层的位置。古水生：AE脚本-批量复制图层0 赞同 · 2 评论文章
varargs=nineLayers(layer);//批量复制图层，总计9个，并传入回调函数处理每个图层 vardupLayers=dup(layer,9,function(layer,i,args)
{//获取这些图层的位置属性 varpos=getTransform(layer).pos;//设置位置为我们之前获得的9个图层的位置 pos.setValue(args[i])//args是从函数外传入的参数，false的意思是图层不是从上到下排列，而是从下到上排列
},args,false) 以上dup函数就是AE批量复制图层最终传入回调函数的版本。 我们看看复制图层之后的效果。
我们看到图层上面根本就没有动画，这是因为之前为了便于大家理解，特意省略了动画，这次给图层添加上动画古水生：AE脚本-给属性设置值setValue()或添加关键帧setValuesAtTimes()。
0 赞同 · 0 评论文章
//遍历复制后的所有图层设置动画，并缓动关键帧速度曲线 dupLayers.forEach(function(layer,i){varpos=getTransform(layer).pos;var
BASE=pos.value;varopa=getTransform(layer).opa;pos.setValuesAtTimes(times([0,10,24,27],0),values([[-60
,0],0,[-60,0],[-60,0]],BASE));makeEase(pos,1,1,82.1);makeEase(pos,2,100,100);makeEase(pos,3,67.6,33.3
);makeEase(pos,4,16.7,1);opa.setValuesAtTimes(times([0,10,24,27],0),[0,100,0,0]);makeEase(opa,1,1,74.9
);makeEase(opa,2,100,100);makeEase(opa,3,72.7,33.3);makeEase(opa,4,16.7,1);layer.startTime=offsetTime
(i,2,0);}) 我们这次在看看效果。
可能看到这的小伙伴有这么几个问题要问 第一：你为什么不一边复制图层一边给图层设置动画呢？ 答：理论上是可行的，但是在我们这次分享中，复制图层的时候给图层指定了位置初始值，在这个时候获取图层的位置作为基准做位置偏移动画，总是不能按照预想的结果来呈现(其原因是因为复制的图层带有关键帧动画，而setValue()是不能给带动画的属性设置值的，可以清除掉所有的关键帧动画，然后再设置值就好了)，所以我多遍历了一次。
这也是我在当初设计批量复制图层函数的时候考虑的问题，让此函数最终再返回所有处理过的图层，便于后续处理 第二：以上那些times()，values()，makeEase()函数都是干嘛用的？ 答：times()函数是将时间帧数组转换为时间秒数组。
举例：times([0,25])其结果为[0,1]，假定合成的帧速率为25帧每秒，也即0、25帧换算成秒为0、1秒 values()函数是把偏移值以函数的第二个参数为基准转换为偏移后的值，举例：values([[-100,0]],base)，假定base代表图层的位置，其结果为图层在原有位置处向左偏移100像素。
举例：values([20],base)，假定base代表图层的旋转值，其结果为图层在原有旋转值的基础上顺时针旋转20度 makeEase()函数代表缓动关键帧曲线举例：makeEase(pos,2,1,33)，假定pos代表图层的位置属性，其结果为将位置属性的第二个关键帧缓动，入点速度为0，影响值为1，出点的速度为0，影响值为33。
好了，我们介绍了如何新建圆形形状图层然后通过构造函数确定阵列排列的9个图层的初始位置批量复制图层后，指定这些图层的位置，然后遍历复制后的所有图层，给图层设置位置偏移动画和透明度动画，最后偏移这些图层的起始时间。
感谢您的耐心阅读，我们下次分享再见以上就是本次分享的全部内容，感谢您的耐心阅读，我们下次分享再见；如果本文对您有什么帮助，别忘了动动手指点个赞❤️和关注自制AE脚本下载：123云盘www.123pan.com/s/gK98Vv-h7iJ。
古水生：AE脚本-开始你的第一个AE脚本14 赞同 · 11 评论文章
亲爱的读者们，感谢您花时间阅读本文。如果您对本文有任何疑问或建议，请随时联系我。我非常乐意与您交流。
发表评论:
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。