Code Monkey home page Code Monkey logo

aep's Introduction

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.

aep's People

Contributors

shrekshrek avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.