### 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事件。