Mugeda API 学习笔记整理
一、整体结构
木疙瘩的API整体分为三个层次:
1.木疙瘩对象
2.sence对象
3.物体对象
通过访问木疙瘩对象,我们可以得到木疙瘩的总体信息示例:
渲染加载完毕后弹窗 alert
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
alert(mugeda.width); //弹窗 alert 输出画布的宽度 width
alert(mugeda.height); //弹窗 alert 输出画布的高度 height
alert(mugeda.rate); //弹窗 alert 输出画布的帧数 rate
});
预览效果:加载完毕后依次弹出三个窗口输出画布的宽度、高度还有帧数!
剩下的就不展示了,反正就是依次弹出三个窗口,数字是你的画布的数据,请不要以我的数据为标准
除了renderReady事件,类似的还有
- scriptReady 代表的是 脚本加载完毕
- imageReady 代表的是 图片加载完毕
渲染加载完毕后跳转到页
1、在第一页创建一个文本,内容为为First Page
2、新建一个页面,在第二页也创建一个文本,内容为为Second Page
js脚本代码:
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
var scene = mugeda.scene;
//创建 var一个名为scene的对象,来接收scene对象的值
scene.gotoPage(1);
//使用这个对象去调用跳转页面 gotoPage到第2页
//这里千万得注意javascript的索引是从0开始的,也就是说跳转到第一页得用0,第二页得用1,以此类推下去……
});
此处注意:javascript的索引是从0开始的,也就是说跳转到第一页得用0,第二页得用1,以此类推下去……
预览效果:加载完毕后直接跳转到第二页!
渲染加载完毕后跳转到帧
在第二页的第二帧创建一个关键帧
js脚本代码:
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
var scene = mugeda.scene;
//创建 var一个名为scene的对象,来接收scene对象的值
scene.gotoAndPause(1,1);
//使用这个对象去调用跳转到帧并暂停 gotoAndPause(1,1) 也就是第二页的第二帧
});
此处注意:这里使用跳转到帧并暂停是因为如果还在播放的话,会在第二页的一二帧来回跳
预览效果:加载完毕后直接跳转到第二页的第二帧!
除了gotoAndPause scene对象能干的事类似还有:
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
var scene = mugeda.scene;
//创建 var一个名为scene的对象,来接收scene对象的值
scene.gotoAndPlay(); //跳转到帧并播放
scene.pause(); //暂停
scene.play(); //播放
});
点击改变物体的属性
在第一页新建一个矩形,命名为react
js脚本代码:
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
var scene = mugeda.scene;
//创建 var一个名为scene的对象,来接收scene对象的值
var react = scene.getObjectByName('react');
//创建 var一个名为react的对象,来接收按对象名字获取 getObjectByName 到名字为react的对象
react.addEventListener('click',function(){
//添加侦听事件 addEventListener来侦听点击 click事件
//当react被点击 click时执行函数 function
react.left = 0; //设置对象react距离左方 left的距离为0
react.top = 0; //设置对象react距离上方 top的距离为0
react.width = 100; //设置对象react的宽度 width为100
react.height = 100; //设置对象react的高度 height为100
});
});
预览效果:点击矩形后会变到左上角!
点击跳转到帧
在第一页新建一个矩形,命名为react2
js脚本代码:
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
var scene = mugeda.scene;
//创建 var一个名为scene的对象,来接收scene对象的值
react2 = scene.getObjectByName('react2');
//创建 var一个名为react2的对象,来接收按对象名字获取 getObjectByName 到名字为react2的对象
react2.addEventListener('click',function(){
//添加侦听事件 addEventListener来侦听点击 click事件
//当react2被点击 click时执行函数 function
scene.gotoAndPause(1,1);
//使用scene对象去调用跳转到帧并暂停 gotoAndPause(1,1) 也就是第二页的第二帧
})
});
预览效果:点击下面那个矩形后会跳转到第二页的第二帧!
小结总结:
整体结构的讲解主要是为了让大家能更快的上手和了解Mugeda API的基本结构,启发大家以进行更多延伸的操作。这里并没有讲解的很全面,更多的还待大家自行探索。
为了能让更多人看懂代码的意思,本小节的注释可以说是很全了。也许有些地方比较冗余,但是我有很认真花心思写注释哦,许多知识点都可以在注释中找到!
本小节素材来自官方教程视频
二、在动画中插入第三方脚本
在木疙瘩动画中,我们可以插入第三方脚本
1、在编辑器中,依次点击文件-导入-脚本
2、在弹出的框中勾选第一个jquery.js,然后点击确定
3、点击脚本,在脚本框输入以下代码:
mugeda.addEventListener('renderReady',function(){
//添加侦听事件 addEventListener来侦听渲染加载完毕 renderReady事件
//当木疙瘩 mugeda渲染加载完毕 renderReady时执行函数 function
console.log(window.$ === jQuery);
//控制台 console输出日志 log $符号是否被定义为jQuery
});
4、点击开发者工具,或者迪点击快捷键(F12)
选择到console一栏预览效果:如果有输出true就代表jq已经成功引入!
打开微信搜索:小峰酱的云笔记
小程序和公众号同名!
若有其他建议:可以在下方给我留言或者给我发邮件
评论区