Giter Club home page Giter Club 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

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

aep's Issues

ThreeJS高于v90版本时动画出现间隔抖动问题

【问题描述】:开发时发现当ThreeJS的版本高于v90时,用AEP加载json动画会出现间隔2秒左右的抖动问题,将ThreeJS版本降至90时抖动消失,动画流畅。
【视频预览】:如下

default.mp4

请问怎么交互的

好像创造艺术那个。想问一下是怎么可以控制aep里面的元素的。

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.