在动画中添加代码

在IDE中有三种方式,可以使得您的代码和动画进行互动。

通过脚本对话框


1.脚本加入方式
在IDE中,点击工具栏上的脚本按钮,在脚本窗口中添加脚本。脚本分为“全局”脚本和“页”脚本。全局脚本是整个动画的脚本,页脚本跟随页面,当页面被复制时,页脚本同样会被复制。

全局脚本和页脚本的运行顺序是:全局脚本→页1脚本→页2脚本……

全局和页脚本间的变量是隔离的,如果需要通讯,可以将变量挂在mugeda对象上或者window对象上。例如:

// 在全局脚本中
window.abc = 1;

// 在页1中
alert(window.abc); // 弹出1

在全局脚本中,可以直接使用mugeda对象。在页脚本中,除了可以直接使用mugeda对象外,还可以直接使用pageIndex对象,pageIndex是一个整数,指示脚本的页号。例如,在页1的脚本中,可以查询到脚本页号:

alert(pageIndex); // 弹出数字0

如果以后调整了页与页之间的顺序,pageIndex会自动变化。

2.调试
这种方式加入的脚本,如果需要调试,需要区分以下两种方式:

(1)在IDE中,通过点击工具栏上的“预览”按钮预览动画,或扫描IDE中二维码的方式预览动画。此时脚本是通过javascript的new Function的方式在内存中运行。调试一般采用javascript中的console.log、debugger方法进行调试。

(2)动画被导出之后,所有脚本会写入导出包中,action开头的一个js文件中。动画运行时,在浏览器调试台中可以看到这个脚本文件,在其中加断点、调试。

通过导入脚本的方式导入


在IDE菜单中,点击“文件”→“导入”→“脚本”,在对话框中,输入脚本文件的url。url可以指向服务器上的js文件,或者指向本机的地址。在动画加载时,url指向的脚本文件会在开始阶段被加载。可以通过浏览器调试这个文件。

外部调用


另一种方式,是将动画嵌入自己的网页,在网页中直接调用mugeda API来控制动画

观看本节视频教程:
http://cdn1.mugeda.com/course/3/3.9/3.9.2.mp4