### API的应用：Mugeda对象 * * * * * mugeda对象是整个API的最顶层命名空间。 **mugeda对象的获取** 在脚本编辑器中，mugeda对象已经注入，可以直接在代码中写mugeda使用。 如果将动画嵌入网页，按照动画加载前和动画加载后，获取mugeda对象的方式不一样。 1、动画加载前 如果需要在动画加载前获取mugeda对象，可以通过在动画所在的document上设置侦听的方式获取。 ~~~ document.addEventListener('mugedaReady', function(){ var mugeda = window['Mugeda']['currentAni']; }); ~~~ 如果网页中嵌入了多个动画，每个动画都会引发上面的回调函数。 2、动画加载后 如果需要在动画加载后获取mugeda对象，如果网页中只有一个动画，只需要用下面的代码就可以了（注：window为动画所在的window）。 `var mugeda = window['Mugeda']['currentAni'];` 如果页面中包含多个动画，需要用下面的方式遍历找到需要动画的mugeda对象。 ~~~ window['Mugeda']['animations'].forEach(function(mugeda){ // 此时可以通过mugeda的其他属性，例如mugeda.title找到想要的mugeda对象 }); ~~~ 其他话题：如何将Mugeda动画嵌入自己的网页中？ Mugeda动画除了可以在手机浏览器中全屏播放外，还可以将其作为网页中的一部分，放在自己的网页中。目前，在PC端的chrome、firefox、IE11等现代浏览器中都能正常播放。 可以通过两种方式将动画嵌入网页。 一、iframe方式 如果您使用的是Mugeda提供的发布功能，得到了发布地址，可以在网页中，直接加入iframe的方式嵌入动画。 `<iframe frameborder="0" width="320" height="512" src="发布后的地址"> </iframe>;` 如果您是通过导出动画包的方式（zip文件），将文件解压托管到自己的网络空间中，也可以通过上面的方式，将iframe的src属性指向导出包中的index.html文件的地址。 二、直接嵌入方式 有些时候，可能不希望通过iframe加载动画，例如，在早期ios版本中，iframe可能有一些性能或兼容性问题，或者希望拥有更好的可控性，可以将Mugeda直接嵌入网页中。 1、静态载入 在每个动画导出包中，都包含loader.js文件。在html代码中加入以下的片段，指向这个文件。 ~~~ <div style="width:320px;height:512px;position:relative;"> <script> window._mrmcp = { "creative_path": "pa5/", // 指向动画文件夹的位置 "script_id": "box", // 包含动画script元素的id "render_mode": "embedded" } </script> <script src="pa5/loader.js" id="box"></script> </div> ~~~ 2、动态插入 在不允许直接修改html的情况下，可以通过代码的方式，动态的将动画加到网页中。假设网页中存在id为container1和container2的空div： ~~~ <div id="container1" style="width:320px;height:512px;position:relative;"></div> <div id="container2" style="width:320px;height:512px;position:relative;"></div> ~~~ ~~~ // 下面的代码，动态的将2个动画插入这两个空div中。 <script> var script = document.createElement("script"); script.src = "pa5/loader.js"; script.id = "script1.js"; window._mrmcp = { "creative_path": "pa5/", "script_id": "script1", "render_mode": "embedded" } script.onload = function(){ var script = document.createElement("script"); script.src = "pa6/loader.js"; script.id = "script2.js"; window._mrmcp = { "creative_path": "pa6/", "script_id": "script2", "render_mode": "embedded" } document.getElementById("container2").appendChild(script); } document.getElementById("container1").appendChild(script); </script> ~~~ **mugeda对象的事件** mugeda对象包含动画加载过程中的事件，如下代码所示： ~~~ var mugeda = window["Mugeda"]["currentAni"]; mugeda.addEventListener("scriptready", function(){ // 当动画脚本加载完成后引发回调，this指向mugeda对象（下同）。 }); ~~~ ~~~ mugeda.addEventListener("imageready", function(){ // 当动画预加载图片完成后引发回调。 }); ~~~ ~~~ mugeda.addEventListener("renderready", function(){ // 当动画准备完成，开始播放前的那一刻引发回调。 }); ~~~ ~~~ mugeda.addEventListener("click", function(){ // 在舞台上侦听点击事件 }); ~~~ 其他话题：动画在显示加载界面时，到底在加载什么？ 动画需要加载必要的文件后才可以正常播放： js文件：在脚本窗口中输入的脚本、通过“导入”，“脚本”对话框加入的脚本，播放器的依赖文件的脚本。 图片：需要预先加载一部分图片（目前是预先加载第一页的图片），以免渲染开始动画时，图片没有加载而出现空白画面。 加载时，图片和脚本并行加载。当所有脚本加载完成，在mugeda对象上引发scriptready事件，此时，可以访问到所有的脚本；当所有图片加载完成后，引发imageready事件。当两个时间都引发后，引发renderready事件。