【mugeda-对齐】有快捷键嘛?
问题答疑 • xiaosongshu 发表了文章 • 2 个评论 • 3430 次浏览 • 2016-06-22 18:43
问下,有无投票计数功能呢?
问题答疑 • juhuacha 发表了文章 • 2 个评论 • 4195 次浏览 • 2016-06-22 18:37
请教,怎么导入AI,很麻烦,我的AI没有Scripts啊
问题答疑 • lele520 发表了文章 • 1 个评论 • 4247 次浏览 • 2016-06-22 18:33
素材删掉了,我的作品还能正常显示嘛?
问题答疑 • lvluo 发表了文章 • 3 个评论 • 4600 次浏览 • 2016-06-22 18:26
请问,如何在让动画不循环?播放到底就不动了,别又从第一帧开始?
问题答疑 • zhijin 发表了文章 • 2 个评论 • 4825 次浏览 • 2016-06-22 16:47
求教,怎么用一个物体的移动控制另一个物体的移动?
问题答疑 • shoujike 发表了文章 • 2 个评论 • 5060 次浏览 • 2016-06-22 16:44
[已解决]当分层导入psd文件时,图片是乱掉的,是否可以优化呢?
BUG反馈 • fengshan 发表了文章 • 1 个评论 • 3860 次浏览 • 2016-06-22 16:39
太需要优化一下地图的导航功能了!
新功能需求 • imagine2016 发表了文章 • 2 个评论 • 3870 次浏览 • 2016-06-22 14:04
Mugeda高手训练营今晚20:30~21:30开课!
培训教程 • songyue 发表了文章 • 2 个评论 • 3681 次浏览 • 2016-06-22 12:31
大家记得按时来上课哦,直播地址:
https://ke.qq.com/course/139207#term_id=100156778
本次课程由安仔老师主讲,课程案例《星巴克,有你才温暖》,这次的课程将围绕“视频关联”、“关联动画”、“高级 查看全部
大家记得按时来上课哦,直播地址:
https://ke.qq.com/course/139207#term_id=100156778
本次课程由安仔老师主讲,课程案例《星巴克,有你才温暖》,这次的课程将围绕“视频关联”、“关联动画”、“高级交互”和“添加表单”等功能做详细介绍。
课程案例:(大家可以提前准备好素材)
http://case.fishfacechina.com/allsite/xbk_hwn/index.html?from=singlemessage&isappinstalled=0
有Mugeda使用问题的童鞋,也欢迎来直播间,老师会留出时间给大家答疑。
左右滑动跳转到帧没反应
问题答疑 • Saivi 发表了文章 • 1 个评论 • 3519 次浏览 • 2016-06-22 12:19
链接:http://www.mugeda.com/animatio ... 001ed
请问,我做了个长页面,上面制作了动画,可是为什么发布后手机扫描了不能滑屏呢?
问题答疑 • qq43489 发表了文章 • 1 个评论 • 3987 次浏览 • 2016-06-22 08:24
木疙瘩怎么做动态分享啊?可以做到吗?
问题答疑 • kittycat 发表了文章 • 3 个评论 • 6534 次浏览 • 2016-06-21 18:39
用陀螺仪怎么让球不穿过障碍物呢?
问题答疑 • lvluo 发表了文章 • 1 个评论 • 4366 次浏览 • 2016-06-21 18:34
怎样自定义分享内容啊?
问题答疑 • mamayixuan 发表了文章 • 2 个评论 • 4871 次浏览 • 2016-06-21 18:31
木疙瘩制作好的页面,分享出去,能统计点击量、分享量的数据吗?
问题答疑 • hushoushuang 发表了文章 • 1 个评论 • 4729 次浏览 • 2016-06-21 18:18
谢谢了
谢谢了
提交的信息都存到哪里了?在哪查看呀?
问题答疑 • bibi 发表了文章 • 4 个评论 • 4923 次浏览 • 2016-06-21 17:58
哪位大神帮忙解答下,不胜感谢!
哪位大神帮忙解答下,不胜感谢!
能不能把图标做的好看点啊!!!
新功能需求 • qq3f089 发表了文章 • 2 个评论 • 3532 次浏览 • 2016-06-21 17:29
导入的视频和音频大小有限制吗?
问题答疑 • lele520 发表了文章 • 3 个评论 • 5978 次浏览 • 2016-06-21 15:27
有辅助线的功能吗?
问题答疑 • haohao2016 发表了文章 • 2 个评论 • 4041 次浏览 • 2016-06-21 11:39
横屏动画,添加左右滑动的行为,手机预览时显示的是上下滑动
BUG反馈 • haohao2016 发表了文章 • 1 个评论 • 5364 次浏览 • 2016-06-21 11:32
然后在手机上强制横屏的时候左滑右滑就变成了上滑下滑。
然后在手机上强制横屏的时候左滑右滑就变成了上滑下滑。
新手提问建议
原创分享 • mingyue 发表了文章 • 5 个评论 • 4829 次浏览 • 2016-06-21 10:41
2.提问时,先要把问题写在标题上,方 查看全部
1.不要着急问问题,先在论坛进行搜索(关键词搜索),例如声音方面的问题,搜索“声音”两字,大部分的相关帖子都会搜索到的,其次自己平时多进各话题去看,尽量保证自己至少看过了。>点击查看文字版教程< >点击查看视频版教程<
2.提问时,先要把问题写在标题上,方便后来的朋友搜索,这是一种美德。
3.请不要使用论坛短消息/私信提问,因为,你要问的人不能保证24小时在线。
4.要详细描述你的问题(最好有截图),尽量描述你的系统环境,例如是windows还是Mac OS X?是什么浏览器?如果手机预览,请描述清楚你的手机型号等等,这样才有助于让他人准确定位,解答你的问题。然后必要时贴上作品的【编辑地址】或者【预览地址】和【截图】,【小视频】等,提供的问题描述越详细,可以帮助你快速解答问题。>点击查看如何获取作品预览地址,编辑地址,共享源文件地址<
5.提问要不耻下问,也有有礼貌的问。 问题被好心人士解决了恭喜,问题自己解决了也分享下如何解决,使遇到同样问题的人知道如何面对。
6.不要一上来就问什么什么怎么做?能不能实现?没有人有义务手把手的教你完成整个作品。尽量的描述清楚,你是怎么做的,遇到什么问题或者需要实现什么功能,描述的需求更清晰,别人才能更好的理解你的问题和回答你的问题。
7、当您已经发布了问题,想要追加问题,详细描述问题的话请在填写在下方评论区,不要写在回复区。(这样便于老师及时解答您的问题)
感谢大家的支持呦
Mugeda如何上传云子体
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 5208 次浏览 • 2016-06-20 17:57
首先,在舞台上添加一个文本,
点击属性对话框中的“字体”,在打开的下拉列表中选择“上传云字体”:
在打开的“上传云字体”对话框中,点击“选择文件”按钮:
在选择文件对 查看全部
首先,在舞台上添加一个文本,
点击属性对话框中的“字体”,在打开的下拉列表中选择“上传云字体”:
在打开的“上传云字体”对话框中,点击“选择文件”按钮:
在选择文件对话框中,从本地选择“TTF”格式的字体文件:
然后在,“上传云字体”对话框中,点击“上传”:
上传完成后,点击“上传云字体”对话框中的“预览”:
然后点击“添加到元件库”,然后云字体就上传并添加好了。如图:
演示动画编辑地址:http://cn.mugeda.com/animation/edit/97be4373
演示动画预览地址:http://cn.mugeda.com/client/pr ... e4373
Mugeda API 相关介绍
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 9602 次浏览 • 2016-06-20 17:30
Mugeda API提供了一组接口,可以通过代码的方式操作动画。常用于制作游戏和带有交互性的动画。
使用Mugeda API需要了解javascript。
1、 在动画中添加代码 在IDE中有三种方式,可以使得您的代码和动画进行互动。
2、 通过脚本对话框 1. 脚本加入方式 在 查看全部
Mugeda API提供了一组接口,可以通过代码的方式操作动画。常用于制作游戏和带有交互性的动画。
使用Mugeda API需要了解javascript。
1、 在动画中添加代码 在IDE中有三种方式,可以使得您的代码和动画进行互动。
2、 通过脚本对话框 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来控制动画。使用方式参考9.3.1 mugeda对象的获取。
Mugeda API的整体结构
Mugeda API整体上分为三个层次:mugeda对象、scene对象、aObject。 每个mugeda对象与单个动画对应,是访问单个动画的入口。通过访问mugeda对象,可以得到mugeda的总体信息。如:大小、标题。
动画中,每个时间轴对应于scene对象,主舞台和元件实例都有对应的scene对象。通过操作scene,可以获取事件轴的信息,对播放位置做跳转。每个动画物体和aObject对象相对应,控制aObject,就可以控制物体的位置、透明度、可见性。
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><!-- 指向loader文件 --> </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"; window._mrmcp = { "creative_path": "pa5/", "script_id": "container1", "render_mode": "embedded" } script.onload = function(){ var script = document.createElement("script"); script.src = "pa6/loader.js"; window._mrmcp = { "creative_path": "pa6/", "script_id": "container2", "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(){ // 在舞台上侦听点击事件 });
其他话题:动画在显示加载界面时,到底在加载什么?
动画需要加载必要的文件后才可以正常播放:
1. js文件:在脚本窗口中输入的脚本、通过“导入”,“脚本”对话框加入的脚本,播放器的依赖文件的脚本。
2. 图片:需要预先加载一部分图片(目前是预先加载第一页的图片),以免渲染开始动画时,图片没有加载而出现空白画面。
加载时,图片和脚本并行加载。当所有脚本加载完成,在mugeda对象上引发scriptready事件,此时,可以访问到所有的脚本;当所有图片加载完成后,引发imageready事件。当两个时间都引发后,引发renderready事件。
mugeda对象的属性
mugeda对象能够获取到一些动画中的全局信息,如下代码所示:
var mugeda = window['Mugeda']['currentAni'];
// 获取当前动画的标题 alert(mugeda.title);
// 获取当前动画的缩放、边距(单位:像素,动画坐标系)。
// 通常情况下,动画为通过等比或非等比的方式充满容器,adaption对象指示了动画
// 充满容器后,距离容器边缘的边距(adaption.marginLeft、
// adaption.marginRight、adaption.marginTop、adaption.marginBottom),
// 负数代表动画被截取。配合在window上侦听resise事件,可以方便的将物体始终
// 定位在屏幕的边缘。 console.log(mugeda.adaption);
// 获取本次和上次渲染的时间换算成帧号差值(单位:帧)
// 即deltaFrame = (此次渲染的绝对时间 - 上次渲染的绝对时间)/ 帧率 console.log(mugeda.deltaFrame);
// 获取舞台所在的dom对象 console.log(mugeda.dom);
// 获取每一帧的时间(单位:毫秒) console.log(mugeda.frameTime);
// 获取帧率 console.log(mugeda.rate);
// 获取舞台大小(单位:像素) console.log(mugeda.width, mugeda.height);
scene对象
对于主舞台、元件实例这样拥有时间轴的动画元素,都拥有对应的scene对象。通过操作scene对象,可以使用编程的方式,获取当前的播放位置、跳转播放位置、获取主舞台上的物体等操作。
获取scene对象 对主舞台,直接通过下面的方式获取:
mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene; });
对元件实例,首先需要在舞台上对元件实例命名(例如“A”),然后通过下面的方式获取: mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene; var symScene = scene.getObjectByName("A").scene; });
scene对象的属性
scene对象包含了主舞台和元件实例时间轴和播放进度的信息。
1. 获取当前播放位置和状态
// 获取当前播放的帧号 var currentFrameNumber = scene.currentId; var currentFrameNumberDecimal = scene.currentDecimalId;
// 获取当前页号(对元件,始终返回0) var currentPageIndex = scene.currentPageIndex;
// 获取当前播放是否暂停 var isPlaying = scene.playing;
// 获取scene对应的dom元素 var dom = scene.dom; 其中currentId为currentDecimalId的取整值。
其他话题:什么当前播放的帧号可以是小数?
在IDE中,如果将帧率设置为12,意味着可以以0.083秒的精度,编辑物体的变换位置。但在实际动画播放的时候,为增加流畅度,渲染器以尽可能低的时间间隔对屏幕进行重绘,如果重绘的时间间隔小于0.083秒,即小于IDE中设置的一帧的时间间隔,渲染器将对物体的变化插值,计算两帧之间变换的中间位置,将其绘于屏幕上,这个时候就出现了小数帧号。 scene.currentId、scene.currentDecimalId、mugeda.deltaFrame,配合后面介绍的enterframe事件,可以精确的知道动画的播放进度。
其他话题: currentId的取值是怎样的?
currentId的取值从0开始连续增加。和IDE时间轴下面的数字不一样,scene.currentId返回的值比IDE中时间轴下方的数字小1。
当主舞台上含有多个页时,页和页之间的时间轴在数据上是连接在一起的。例如,有两页,每页都有10帧。那么播放到第一页的时候,currentId取值为[0, 10),播放第二页的时候,currentId的取值为[10, 20)。
2. 获取时间轴的信息
可以通过下面的代码,获取时间轴的长度和页的信息:
// 对主舞台 mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene;
// 获取页数据 var pages = scene.pages;
// 获取页数 var pageLen = pages.length;
// 获取第一页的开始帧号 var frameIdOfFirstPage = pages[0].startFrame;
// 获取第一页的总帧数 var totalFramesOfFirstPage = pages[0].length; });
// 对元件A mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene; var symScene = scene.getObjectByName("A").scene;
// 获取元件帧数(元件没有页的概念,所有只有pages[0]有效) var length = symScene.pages[0].length; });
3. 获取命名帧的实际帧号 在IDE中,可以为关键帧命名,从而在行为中方便的跳转到命名帧。
下面函数提供了命名帧到实际帧号的转换。
mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene;
// 获取名字为“开始录音”的帧的帧号 console.log(scene.getFrameidByName("开始录音")); });
scene的事件
当主舞台或者元件实例重绘前,引发enterframe事件。在事件的回调中,可以操作动画,改变物体的位置,或调整将动画重定向到其他帧。 mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene; scene.addEventListener("enterframe", function(){ // 打出当前播放的帧号,this -> 当前的scene对象 console.log(scene.currentId); }); });
scene的方法
scene包含系列控制播放进程的方法,此外,scene代表舞台或者元件实例,管理着舞台或元件实例容器中的所有子物体。
1. 控制播放进程 在主舞台scene或元件实例scene上使用下面的方法,可以控制他们的播放进程: scene.pause(); // 暂停 scene.play();
// 继续播放 scene.gotoAndPlay(frame);
// 跳转到帧并播放(frame支持帧号或帧名) scene.gotoAndPause(frame);
// 跳转到帧并暂停(frame取值同上) scene.nextpage();
// 跳转到下一页的开头 scene.prevPage();
// 跳转到上一页的开头 scene.gotoPage(pageIdx);
// 跳转到指定页的开头 scene.gotoAndPlay(frame, pageIdx);
// 跳转到相对于某页的某帧并继续播放 scene.gotoAndPause(frame, pageIdx);
// 跳转到相对于某页的某帧并暂停
其他话题:如何控制在gotoPage被调用时候的翻页效果?
通常情况下,gotoPage的翻页效果,和IDE翻页选项卡中的翻页效果一致。
然而,当某些情况下,需要在代码中动态的控制翻页效果时,可以通过下面的代码控制: scene.gotoPage(pageIdx, options); options的取值控制翻页效果,形式如下: var options = { transition: "",
// 过渡效果 exit: "",
// 退出效果 duration: 1,
// 过渡时间 }; 过渡效果的取值为:ladder(平移)、cover(覆盖)、appear(出现)、fadein(淡入)、box(三维翻转)、flip(门轴翻转);
退出效果的取值为:none(无)、zoomout(缩小)、fadeout(淡出)、zoomout fadeout(缩小淡出)、box(三维翻转)、flip(门轴翻转) 其中,当过渡效果为box或flip时,退出效果只可以是box活flip。
过渡时间的单位是毫秒,必须大于等于1。 三个参数可以省略一个或多个。
2. 播放片段
可以通过代码,将一小段时间轴标记为片段,将动画的播放范围限定在片段中。如下: mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene;
// 将主舞台的第0帧到第15帧标为片段1,循环播放 scene.setSegment("片段1", 0, 15, true);
// 将主舞台的第16帧到第30帧标为片段2,不循环播放 scene.setSegment("片段2", 16, 30, false);
// 播放第二个片段 scene.playSegment("片段2"); });
3. 物体遍历
舞台和元件作为容器,包含一系列的动画元素。
在IDE中,可以为物体命名,下面的代码通过名字查找到舞台上的元件实例A中的物体B。
mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene; var symA = scene.getObjectByName("A"); var symAScene = symA.scene; var objectB = symAScene.getObjectByName("B"); });
上述例子允许反遍历(由子元素寻找父元素),
例如: symAScene.object === symA; symAScene.parentScene === scene; symAscene.thisAni === mugeda; scene.thisAni === mugeda; symA.currentScene === scene; objectB.currentScene === symScene;
4. 增删物体 mugeda.addEventListener("renderready", function(){ var scene = mugeda.scene;
// 为元件1创建新的实例,并增加到主舞台 var aObject = mugeda.createInstanceOfSymbol("元件1"); scene.appendChild(aObject); // 删除刚刚加入的物体 scene.removeChild(aObject); });
aObject对象
aObject对象是舞台上动画元素(例如:图片、文字、组、元件实例)的抽象,每一个动画元素,都有对应的aObject对象。
获取aObject对象
1. 获取动画中,已有物体的aObject对象
在IDE中,可以在属性面板中为物体命名。同一个scene对象中(主舞台或元件实例),物体的名称是唯一的。要获取命名物体的aObject对象,可以在包含命名物体的scene上: Var aObject = scene.getObjectByName("命名物体的名字");
2. 复制已有的aObject对象 动画元素可以被复制: Var aObjectCloned = aObject.clone();
3. 使用元件产生元件实例: var aObjectSymbol = mugeda.createInstanceOfSymbol("元件1");
aObject对象的属性
aObject包含一系列属性控制动画元素的变换:
// 可读写属性 aObject.dom
// 获取或改变aObject对应的dom元素 aObject.width
// 获取或改变aObject的宽度 aObject.height
// 获取或改变aObject的高度 aObject.rotate
// 获取或改变aObject的旋转角度(弧度) aObject.visible
// 获取或改变aObject的可见性 aObject.text
// 对文本元素,获取或改变aObject对应的文字 aObject.alpha
// 获取或改变aObject的透明度 aObject.pers
// 获取或改变aObject透视角(角度) aObject.x
// 获取或改变aObject的参考点在舞台/元件空间的横坐标 aObject.left
// 获取或改变aObject的左边界在舞台/元件空间的横坐标 aObject.top
// 获取或改变aObject的上边界在舞台/元件空间的纵坐标 aObject.rotateCenterX
// 获取或改变aObject的参考点相对物体左边界的距离 aObject.scaleX
// 获取或改变aObject在横坐标方向上的缩放值 aObject.rotateX
// 获取或改变aObject在空间坐标系中沿横轴旋转值(弧度) aObject.y
// 获取或改变aObject的参考点在舞台/元件空间的纵坐标 aObject.right
// 获取或改变aObject的右边界在舞台/元件空间的横坐标 aObject.bottom
// 获取或改变aObject的下边界在舞台/元件空间的纵坐标 aObject.rotateCenterY
// 获取或改变aObject的参考点相对物体上边界的距离 aObject.scaleY
// 获取或改变aObject在纵坐标方向上的缩放值 aObject.rotateY
// 获取或改变aObject在空间坐标系中沿竖轴旋转值(弧度) aObject.url
// 对于具有动作为“链接”的物体,获取或设置链接目标
// 只读属性 aObject.name
// 获取物体的名字 aObject.scene
// 对元件实例,获取它的scene对象 aObject.currentScene
// 获取物体所在的scene对象 aObject.thisAni
// 获取物体所在的mugeda对象 aObject.getRealVisible
// 获取物体的真实可见性 其他话题:物体的变换过程是这样的?
变换过程是这样的: 对于一个物体,在没有做任何变换的情况下,处于舞台/元件坐标系的左上角(0,0)的位置。
移动物体,使得物体的参考点处于舞台/元件坐标系的(aObject.x,aObject.y)位置,此时。 以(aObject.x,aObject.y)为中心点,对物体做(aObject.scaleX,aObject.scaleY)的缩放。
此时,物体的大小变为宽为aObject.width,高为aObject.height。物体的左、上、右、下边界,分别离舞台/元件坐标系的左上角的距离为aObject.left、aObject.top、aObject.right、aObject.bottom。 以(aObject.x,aObject.y)为中心点,沿着空间坐标系的竖轴,做aObject.rotateY旋转。 以(aObject.x,aObject.y)为中心点,沿着空间坐标系的横轴,做aObject.rotateX旋转。
以(aObject.x,aObject.y)为中心点,沿着空间坐标系垂直屏幕方向,做aObject.rotate旋转。 对物体做视角为aObject.pers的透视变换。 其他话题:visible、时间轴上物体的生命周期、getRealVisible的关系 在IDE中,物体的可见范围,由该物体在时间轴上的生命周期决定。而当visible设置为false时,物体在生命周期范围内也不可见;若visible设置为true,则物体在生命周期内可见,在生命周期外不可见。 因此,生命周期和visible属性共同决定物体是否可见。在生命周期内,visible属性决定物体是否可见,而在生命周期外,物体永远不可见。 对于由scene.appendChild加入的物体,由于没有生命周期,只由visible属性控制其可见性。 若要获取一个物体的最终可见性,只需要读取它的getRealVisible属性就可以了。
其他话题:物体定位时候的坐标系是怎样的?
在Mugeda动画系统中,舞台、元件、组内的物体,都是以物体上上一层舞台、元件实例、组的左上角为定位圆点进行定位。举例来说,如果舞台上,距离坐标原点(10,10)的位置放置了元件实例,而双击元件实例,里面的图片距离左上角的距离是(20,20),此时读取物体对应aObject的left和top值都为20。
aObject的事件
可以在aObject上绑定绝大多数的鼠标/触摸事件:touchstart、touchmove、touchend、mousedown、mousemove、mouseup、click、dblclick、mouseover、blur、focus。此外,还提供inputstart、inputmove、inputend三个事件。
在PC上,这三个事件对应于mousedown、mousemove、mouseup,在手机和平板上,对应于touchstart、touchmove、touchend事件、click事件经过处理,已经不会有300ms的延迟问题。
使用如下:
aObject.addEventListener("click", function(e){
// this指向aObject
// 提供inputX和inputY属性,获取相对于舞台的坐标值 var x = e.inputX; var y = e.inputY;
// 提供e.preventDefault、e.stopPropagation、e.stopImmediatePropagation e.stopPropagation(); });
其他话题:aObject的dom属性有什么用?
在Mugeda渲染器中,除遮罩以外,其他的动画元素都对应于dom树中的一个dom元素。
得到dom元素后,可以采取操作dom元素的方式,是它具有其他行为。
例如,下面的代码,为文本对象对应的dom(是一个div)增加contentEditable属性,使得用户可以输入文本对象的内容:
var aObject = scene.getObjectByName("文字对象1"); var dom = aObject.dom; dom.setAttribute("contentEditable", "true"); 下面的例子,是组(名字:textG)中包含一个文本输入框(名字:textA)。
通过插入一个textArea,并将原来的文本输入框隐藏,使得原先的文本输入框的位置变成了多行文本输入框:
var text = '<textarea style="position: absolute; left:0; top:0; width:100%; height:100%; outline: none; background: transparent; border-radius: 0; border: 0;"> </textarea>'; var node = document.createElement('div'); node.innerHTML = text; // 把原先的输入框隐藏 mugeda.scene.getObjectByName('textA').visible = false;
// 将textarea加入组中,它为决定定位,宽、高100%,因此能撑满整个组。
微信转发
在微信中,经常需要定义微信转发的标题、描述、转发地址。
除了在IDE的文档信息中填写这些信息以外,还可以通过代码动态的更改这些值,代码如下:
// 在renderready后 defineWechatParameters({ url_callback: function(){ return "http://www.abc.com/"; }, img_url: "转发缩略图地址", desc: "转发的描述", title: "转发的标题" }); 上述函数可以多次调用,每调用一次,用新值覆盖旧值。上述4个参数可以省略1~3个。
信息提示
Mugeda渲染器提供通用的信息提示函数,代码如下:
Mugine.Utils.Toast.info('提示文字', {type:'toast'}); Mugine.Utils.Toast.info('提示文字', {type:'info'});
Mugeda素材管理
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 6976 次浏览 • 2016-06-20 16:58
除了“图片”以外的元素类型,都可以在“工具栏”中选择你需要的元素对象,直接拖动到舞台上。
如何添加与删除素材元素:
3种添加图片方式:从本地文件获取、从网页获取、批量上传三种。
一、点击“图片”元素按钮,打开“ 查看全部
除了“图片”以外的元素类型,都可以在“工具栏”中选择你需要的元素对象,直接拖动到舞台上。
如何添加与删除素材元素:
3种添加图片方式:从本地文件获取、从网页获取、批量上传三种。
一、点击“图片”元素按钮,打开“上传图片”对话框。点击“上传文件”-“选择文件”-“上传”-选择即可上传成功。(一定要先上传,然后才点击选择)
二、选择“输入网址”选项来网页获取图片
三、选择“批量上传”选项,可以(1张或多张图片同时)从本地直接拖拽图片到这个位置。
一旦图片上传,点击“选择”按钮就可以将图片添加到舞台上。
上传成功的图片可以在图片素材库中重复使用。
在图片库中可以双击图片或选中图片后点击添加图片,即可 讲图片添加到舞台上。
如何删除素材:
1、进入个人界面,通过“素材管理”可以对素材进行“删除”或“添加”。(如下图)
2、注意:当您的素材应用于您所创建的作品中,删除该素材会导致作品中素材丢失(即作品无法正常编辑),但发布后的作品链接无影响。
3、素材删除,无法恢复
Mugeda声音使用相关问题
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 8356 次浏览 • 2016-06-20 16:52
2、声音文件大小10m以内(通常建议压缩处理后声音文件大小500kb左右)。
3、上传的声音文件存储在媒体库中,添加到作品中时,声音文件会自动添加到元件库中,同时会在舞台中央生成一个音频图标。
4、添加到舞台中的音频元素可通过右侧属性栏中的相关属性, 查看全部
2、声音文件大小10m以内(通常建议压缩处理后声音文件大小500kb左右)。
3、上传的声音文件存储在媒体库中,添加到作品中时,声音文件会自动添加到元件库中,同时会在舞台中央生成一个音频图标。
4、添加到舞台中的音频元素可通过右侧属性栏中的相关属性,控制其在当前页面下的播放/暂停(针对单页)
5、元件库中的声音元件适用于全局,同时可以直接拖拽至舞台调用。
6、整个作品的背景音乐在属性栏——背景音乐处添加。
7、声音图标样式及大小在舞台下属性栏进行替换,声音图标位置可以通过【行为-其他-设置背景音乐-编辑】调整。
8、关于一些设备声音不能自动播放的问题是由于一些安卓设备微信不响应无手工触发(触屏点击操作)声音播放或停止,这属于系统层的限制,为了最大化设备兼容性,建议将声音操作(播放、停止)尽可能绑定在点击操作上。
9、个别设备不支持同时播放两个及两个以上的声音文件。
23个Mugeda新功能需求汇总
新功能需求 • mingyue 发表了文章 • 16 个评论 • 4241 次浏览 • 2016-06-20 16:52
你更期待哪个新功能上线?请在下方评论区直接回复”序号“即可,如:1、3、5、我们会根据大家的反馈,优先开发次功能哦。具体内容如下:
1、元件库应该加一个插入声音的按钮(如果添加一个声音为背景音乐或用行为播放,需要先上传 查看全部
小编整理了近期Mu友提出的,关于Mugeda新功能需求的建议(未开发完的)
你更期待哪个新功能上线?请在下方评论区直接回复”序号“即可,如:1、3、5、我们会根据大家的反馈,优先开发次功能哦。具体内容如下:
1、元件库应该加一个插入声音的按钮(如果添加一个声音为背景音乐或用行为播放,需要先上传声音到舞台,然后在删除,声音才会在元件库里面)
2、属性栏增加“模糊”的功能(一个物体从清晰满满变模糊的效果)
3、碰撞检测器
4、随时可以调用、改写的数据库(跨屏功能应该也可以通过这个数据库进行控制)
5、更多微信通讯接口(调用头像、微信名称,并可改写微信公众号授权、微信红包接口)(并可以将这个跟数据库连通,通过这个功能做排行榜)[已更新6月24日]
6、弹幕制作
7、重力和物体设定(可以吸引运动物体)
8、文本后台实时存储
9、点赞数值可以调取
10、协同共享,主账号共享子账号的作品,可以在子账号的动画作品中查看,并编辑
11、幻灯片自动播放功能
12、API的部分开源
13、完善API的用例和文档
14、添加多点触控的选项
15、导入的声音和图片等文件与原文件(本地)名称一致
16、上传文件自动压缩功能(图片或视频)
17、行为-编辑行为(可以缩放),可以在编辑行为对话框“复制行为”
18、属性栏:翻页分享加载项合并
19、IDE隔一段时间自动保存作品的功能
20、地图添加导航功能
21、表单可以直接显示在H5里面
22、表单添加一项“回调函数”
23、添加素材后可以自动等比例缩放(导进来的作品素材,还得手动,等比例去缩放,建议在属性一栏加上自动缩放50%)