AEP

AE工作流套装，包含输出部分，运行部分。
用于3D时间线动画控制，更高效的制作Interactive 3d motion graphic.
AEP = 复杂的3d mg线性动画 + 灵活的程序控制

demo地址:(建议手机浏览)
https://shrek.imdevsh.com/demo/aep/aep&bokeh.html
(该案例展示了一些常规用法，变速播放，倒放，左右摇摆手机以及点击其中一些圆形小元素都有交互反应等)

https://shrek.imdevsh.com/show/msg2018/
(该案例展示了使用ae面片搭建大型场景的可能)

https://shrek.imdevsh.com/show/baibaoshu/
(该案例展示了多场景素材组合)

https://shrek.imdevsh.com/show/tmall/
(天猫邀请函，该案例非aep制作，不过是此项目的启发点，留档查看用)

除了以上演示，还有长时间轴拖放控制等都可以轻松实现，相比视频或者flash 2d动画，3d mg在维度上给了动画更多表现空间，交互上多了更多玩法。制作上，让动画和程序可以分拆并让各自发挥最大效能，显著提高了制作效率和质量。

以上demo是集合了VML的创意，动画，开发多方成员的共同努力成果。不涉及品牌，仅供查看，侵删

有3d问题欢迎加入研讨。QQ群:572807793（webgl技术交流）

使用方法

aexporter.jsx 放入AE安装根目录Scripts文件夹下，然后在ae命令中就会多一个aexporter命令了，打开需要导出的场景，然后运行命令即可，命令会把当前场景的图片素材和场景信息json导出到当前打开工程文件的目录下。

player.js 播放器，使用方法可以参考在线demo: https://shrek.imdevsh.com/demo/aep/aep&bokeh.html

AE动画制作时务必每个层都打开3d属性，目前仅支持图片image，纯色solid。不支持滤镜，曲线图形，遮罩。支持循环动画，循环区间为comp预览时间段，输出后使用solo命令设置即可，具体详情请查看demo范例代码。其他层属性都支持，层的父级，时间缩放等都支持。

API

全局静态方法：

AEP.loadQueue(source:array, progress:function, complete:function);

source是包含json和图片地址数组

AEP.loadFullJson(json:string, base:string, progress:function, complete:function, percent:number);

json是动画json文件地址，base是素材所在相对目录地址，最后的percent是加载素材比例，不用全部加载，一般预载第一个画面需要使用的图片量就够了，后面会在进入场景后自动加载完成。

以上是两个预加载素材的方法，需要至少预载了json后再实例化AEP.Tanimation使用。

全局属性：

AEP.global.loadOrder = 0; //0为默认值顺序加载json中的素材图片，1为逆向加载
AEP.global.alphaTest = 0.05; //THREE中的alphaTest
AEP.global.lockWidth = false; //是否锁定场景宽度
AEP.global.far = 0; //camera远点
AEP.global.near = 0; //camera近点
AEP.global.width = 0; //场景宽度
AEP.global.height = 0; //场景高度

AEP.Tanimation
核心类，实例化后使用：

var anim = new AEP.Tanimation(data['data.json'], {
    path: '', //素材包相对地址，用于自动加载图片素材时获取到正确地址
    assets: data, //已加载的图片素材数据
    loop: true, //动画是否首尾循环
    onStart: function () {}, //动画启动时触发
    onEnd: function () {}, //动画结束时触发
    onUpdate: function (delta) {} //动画更新时触发
});

anim.setSize(width:number, height:number); //设置场景宽高
anim.setFrameRate(fps:number); //设置每秒帧数fps
anim.getFrameRate(); //获取fps
anim.seek(time:number); //去往time(毫秒数)时间点
anim.prev(); //去往前一帧
anim.next(); //去往后一帧
anim.play(); //动画播放
anim.pause(); //动画暂停
anim.stop(); //动画停止，当前时间回到0
anim.reverse(); //动画倒放

anim.solo(items:array|item); //设置自循环动画
anim.playSolo(); //播放自循环动画
anim.pauseSolo(); //暂停自循环动画

anim.findByName(name:string); //查找名称为name的所有元素
anim.findContainName(name:string); //查找名称包含name的所有元素
anim.findByRef(name:string); //查找素材名为name的所有元素
anim.findContainRef(name:string); //查找素材名包含name的所有元素

anim.totalTime //动画总毫秒数
anim.curTime //当前毫秒数
anim.timeScale //时间缩放比例

License

This content is released under the MIT License.