API
【经验分享】点击复制文本效果
原创分享 • qq3a937a8af6 回复了问题 • 4 人关注 • 3 个回复 • 4701 次浏览 • 2022-02-10 11:42
【代码分享】屏蔽长按图片出现的保存图片系统菜单
原创分享 • wxb95416ac84 回复了问题 • 13 人关注 • 5 个回复 • 11643 次浏览 • 2021-11-25 17:14
【经验分享】在app中如何处理发布链接的分享信息
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 1812 次浏览 • 2021-11-08 11:45
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法 查看全部
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法读取这个变量,必要时可修改分享信息。
以安卓为例,在Java中,定义接口:
private inner class JavaGetFromJavascript{
@JavascriptInterface
fun getShareDataStr(shareDataStr: String?) {
//shareDataStr 即为 html 文件中的变量参数值
Log.d("Mugeda","test:$shareDataStr")
}
}
然后将这个方法注入webview中
webView.addJavascriptInterface(JavaGetFromJavascript(),"android_js")
在需要获取的时候,调用这个方法
webView.loadUrl("javascript:window.android_js.getShareDataStr(JSON.stringify(window.weiParam))")
iOS的方法类似,但使用的函数略有不同,可以自行搜索一下。
【代码分享】强制横屏下的视频在iOS无控制条问题
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 2067 次浏览 • 2021-06-25 17:00
大概现象如下图
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
document.styleSheets[0].insertRule('[data 查看全部
大概现象如下图
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
document.styleSheets[0].insertRule('[data-type="stage"],body,.mugine_scene_clip{ overflow: visible!important; }', 0);
修复后的效果如下:
你可以使用苹果手机访问以下链接看一下效果
https://6.u.mgd5.com/c/n20h/x4hw/index.html
【代码分享】使用代码处理大量数据显示的效果
原创分享 • ddbackhome 发表了文章 • 1 个评论 • 2199 次浏览 • 2021-05-14 18:15
https://dag.h5.xeknow.com/s/7HOQd
里面使用到的代码放到这里了,你可以打开下边的链接另存一下
https://www.mugeda.com/animation/edit/8d5bd33 查看全部
https://dag.h5.xeknow.com/s/7HOQd
里面使用到的代码放到这里了,你可以打开下边的链接另存一下
https://www.mugeda.com/animation/edit/8d5bd33a
或者在手机上打开这个链接观察效果
https://6.u.mgd5.com/c/n20h/lqlm/index.html
【代码分享】随机不重复跳帧或跳页面
原创分享 • qq213bcdccd2 回复了问题 • 9 人关注 • 3 个回复 • 10521 次浏览 • 2021-05-13 11:11
【经验分享】逻辑表达式判断输入的数字奇偶
原创分享 • qq3a937a8af6 回复了问题 • 3 人关注 • 2 个回复 • 5555 次浏览 • 2021-04-20 23:12
【已解决】api 修改文本字体颜色
BUG反馈 • wx2199026830 回复了问题 • 4 人关注 • 2 个回复 • 6053 次浏览 • 2021-04-01 17:58
制作格式为天/时/分/秒的倒计时动画
案例分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 2317 次浏览 • 2021-03-30 14:35
欢迎交流谢谢
有没有api导入地图的教程
问题答疑 • ddbackhome 回复了问题 • 1 人关注 • 1 个回复 • 2566 次浏览 • 2021-03-26 14:40
【经验分享】使用计数器功能实现简易抽奖功能
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 3246 次浏览 • 2020-09-11 11:44
https://cn.mugeda.com/animation/edit/46ca79b5
原理说明:
计数器功能可以让多个用户从服务器获取计数值,而这个数值会根据用户点击的时间不同而不同,显示计数的文本上可以设置多个行为,根据数值的不同来显示给用户分别中什么奖了。
查看全部
https://cn.mugeda.com/animation/edit/46ca79b5
原理说明:
计数器功能可以让多个用户从服务器获取计数值,而这个数值会根据用户点击的时间不同而不同,显示计数的文本上可以设置多个行为,根据数值的不同来显示给用户分别中什么奖了。
这种方法只适合简易的、短时间的、现场的多人抽奖活动,大型抽奖活动请考虑使用官方的抽奖控件。
这种方法只适合简易的、短时间的、现场的多人抽奖活动,大型抽奖活动请考虑使用官方的抽奖控件。
这种方法只适合简易的、短时间的、现场的多人抽奖活动,大型抽奖活动请考虑使用官方的抽奖控件。
抽奖按钮上添加的是增加计数行为
最上方的是显示计数的文本,它上边需要添加多个行为,根据它自己本身的值(也就是计数的值)来确认哪个用户中奖了,是中奖时,修改中奖结果的文本值
需要注意的是,中奖结果建议使用提交表单提交到后台,或者让用户当场截图,不然用户刷新后,计数的值就是新的了,用户的中奖状态就无法证明了。如果为了防止现场用户多次抽奖刷票,可以给抽奖按钮添加行为,点击时让它自己移出舞台,这样用户多次点击的行为就可以被控制。
【代码分享】自定义视频的进度条(控制块)
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4563 次浏览 • 2020-08-21 17:30
发布链接
https://6.u.mgd5.com/c/n20h/hwr3/index.html
扫码看效果
使用的代码如下mugeda.addEventListener("renderready", function(){
var scene 查看全部
发布链接
https://6.u.mgd5.com/c/n20h/hwr3/index.html
扫码看效果
使用的代码如下
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var myvideo = scene.getObjectByName('播放的视频');
var videodom;
var durationBtn = scene.getObjectByName('进度');
window.changeduration = function(){
videodom = myvideo.dom.childNodes[3];
console.log('btn position changed');
videodom.currentTime = videodom.duration*(scene.getObjectByName('进度').left - 100)/(500-100)
}
window.getvideoduration = function(){
if(!myvideo.dom) return;
videodom = myvideo.dom.childNodes[3];
console.log(videodom)
}
window.myScript = function(){
if(!videodom) return;
console.log(videodom.currentTime)
durationBtn.left = 100+(500-100)*videodom.currentTime/videodom.duration
}
});
代码里使用到aObject对象的dom属性。在木疙瘩里舞台上每个取了名的物体都可以用api来定位到,定位的就是它的aObject对象,aObject对象可以使用dom属性获取元素实际的dom。
api地址
https://card.mugeda.com/mugedaApiDoc/index.html
作品中添加代码的地方在
在以下公众号回复“视频进度块”,获取本文的源文件链接
2.9.1 API的应用:在动画中添加代码
原创分享 • m8499519 回复了问题 • 6 人关注 • 1 个回复 • 12562 次浏览 • 2020-06-08 08:43
【经验分享】预置考题 拖拽题目 设置方法
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 8089 次浏览 • 2020-06-02 17:49
可以打开这个链接,看里面的效果
https://www.mugeda.com/animation/edit/96592bf9
首先点插入拖放控件,直 查看全部
可以打开这个链接,看里面的效果
https://www.mugeda.com/animation/edit/96592bf9
首先点插入拖放控件,直接点确定
作品里会生成一个新页面,新页面里好多帧,好多物体上也会有一些配套的行为设置
这里,在舞台上添加拖放容器,并取名
同时放一些可以自由拖动的物体,并取名
然后,就可以点击舞台右边的铅笔图标来编辑 拖拽题 ,来进行一些配置,比如正确后的得分,什么物体放到什么容器算正确。
在这里直接设置 aaa 可以放到容器1 里,就代表 aaa 放到 容器1 里以后,可以算是正确答案
确定后,预览效果,发现把aaa放到容器1以后,点确定按钮,会弹窗正确的提示。
【代码分享】点屏幕时出现爱心动画效果
原创分享 • lx_mgd 发表了文章 • 3 个评论 • 3774 次浏览 • 2020-05-20 14:48
可扫这个码在手机上看效果
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它mugeda.addEventListener("renderready", function(){
var scene = muge 查看全部
可扫这个码在手机上看效果
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var dianjiquyu = scene.getObjectByName("点击区域");
dianjiquyu.addEventListener("click", function(e){
// 为元件创建新的实例,并增加到主舞台
var aObject = mugeda.createInstanceOfSymbol("爱心");
// this指向aObject
// 提供inputX和inputY属性,获取相对于舞台的坐标值
var x = e.inputX;
var y = e.inputY;
scene.appendChild(aObject);
aObject.left = x - aObject.width/2;
aObject.top = y - aObject.height;
// 1秒后删除刚刚加入的物体
setTimeout(function(){
scene.removeChild(aObject);
}, 1000);
});
//scene.appendChild(aObject, behaindAObject, pageIndex);
//可以将物体添加到舞台上
//第二个参数behaindAObject是舞台上某个动画元素,这个参数也可以是null
//第三个参数是页面的编号
});
api文档: https://card.mugeda.com/mugedaApiDoc/index.html
在以下公众号回复”爱心效果“,获取本文的源文件链接
【代码分享】使用回调函数去掉发布链接里多余的参数
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 3046 次浏览 • 2020-02-10 14:13
比如,绘画板画好后转给新用户,不想让新用户看到上一个用户绘画板的内容。
解决方法是某些地方添加回调函数 reseturl,让用户转发时去掉多余的参数 查看全部
比如,绘画板画好后转给新用户,不想让新用户看到上一个用户绘画板的内容。
解决方法是某些地方添加回调函数 reseturl,让用户转发时去掉多余的参数。其中发布链接那里需要修改成你作品的发布链接。
mugeda.addEventListener("renderready", function(){
window.reseturl = function(){
defineWechatParameters({
url_callback: function(){
return "发布链接";
}
});
}
});
下边是demo链接,可以打开另存https://www.mugeda.com/animation/edit/95388534
【代码分享】模拟手机通话时间效果
原创分享 • ddbackhome 发表了文章 • 2 个评论 • 3145 次浏览 • 2020-01-16 15:07
可以打开另存一下
效果如图:
【代码分享】禁止长按保存,鼠标右键另存图片
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3733 次浏览 • 2019-10-21 15:41
查看地址
源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
mugeda.addEventListe 查看全部
查看地址
源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
scene.getObjectByName('微信号').dom.style.cssText += "pointer-events:none";
});
【经验分享】装13印章生成器
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 2831 次浏览 • 2019-10-13 01:31
【经验分享】木疙瘩制作行走的时钟效果
原创分享 • qqf35714a4fc 发表了文章 • 3 个评论 • 3389 次浏览 • 2019-10-07 15:03
木疙瘩制作如需源码请留言
【代码分享】代码实现倒计时效果
原创分享 • qqf35714a4fc 发表了文章 • 1 个评论 • 2928 次浏览 • 2019-10-07 12:09
【代码分享】ios12 ios13系统部分手机键盘无法自动收回问题
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 5000 次浏览 • 2019-09-25 17:50
window.addEventListener('focusin', function(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
});
查看全部
【代码分享】显示前一个人的微信头像
原创分享 • gaao 回复了问题 • 11 人关注 • 4 个回复 • 8297 次浏览 • 2019-07-18 22:54
【代码分享】单选框设置一个默认值
原创分享 • ddbackhome 回复了问题 • 3 人关注 • 1 个回复 • 6252 次浏览 • 2019-06-25 15:34
【代码分享】首行缩进2个文字(2个空格)
原创分享 • lx_mgd 发表了文章 • 1 个评论 • 4494 次浏览 • 2019-06-20 10:53
windo 查看全部
document.addEventListener('touchmove',function(e){
e.preventDefault... 显示全部 »
document.addEventListener('touchmove',function(e){
e.preventDefault();
},false);
});
【代码分享】屏蔽长按图片出现的保存图片系统菜单
回复原创分享 • wxb95416ac84 回复了问题 • 13 人关注 • 5 个回复 • 11643 次浏览 • 2021-11-25 17:14
【已解决】如何导出代码后,在第三方服务器上实现自定义分享标题和图标
回复问题答疑 • wangqiezi119 回复了问题 • 7 人关注 • 5 个回复 • 8491 次浏览 • 2018-05-10 13:43
【经验分享】在app中如何处理发布链接的分享信息
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 1812 次浏览 • 2021-11-08 11:45
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法 查看全部
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法读取这个变量,必要时可修改分享信息。
以安卓为例,在Java中,定义接口:
private inner class JavaGetFromJavascript{
@JavascriptInterface
fun getShareDataStr(shareDataStr: String?) {
//shareDataStr 即为 html 文件中的变量参数值
Log.d("Mugeda","test:$shareDataStr")
}
}
然后将这个方法注入webview中
webView.addJavascriptInterface(JavaGetFromJavascript(),"android_js")
在需要获取的时候,调用这个方法
webView.loadUrl("javascript:window.android_js.getShareDataStr(JSON.stringify(window.weiParam))")
iOS的方法类似,但使用的函数略有不同,可以自行搜索一下。
【代码分享】强制横屏下的视频在iOS无控制条问题
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 2067 次浏览 • 2021-06-25 17:00
大概现象如下图
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
document.styleSheets[0].insertRule('[data 查看全部
大概现象如下图
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
document.styleSheets[0].insertRule('[data-type="stage"],body,.mugine_scene_clip{ overflow: visible!important; }', 0);
修复后的效果如下:
你可以使用苹果手机访问以下链接看一下效果
https://6.u.mgd5.com/c/n20h/x4hw/index.html
【代码分享】使用代码处理大量数据显示的效果
原创分享 • ddbackhome 发表了文章 • 1 个评论 • 2199 次浏览 • 2021-05-14 18:15
https://dag.h5.xeknow.com/s/7HOQd
里面使用到的代码放到这里了,你可以打开下边的链接另存一下
https://www.mugeda.com/animation/edit/8d5bd33 查看全部
https://dag.h5.xeknow.com/s/7HOQd
里面使用到的代码放到这里了,你可以打开下边的链接另存一下
https://www.mugeda.com/animation/edit/8d5bd33a
或者在手机上打开这个链接观察效果
https://6.u.mgd5.com/c/n20h/lqlm/index.html
制作格式为天/时/分/秒的倒计时动画
案例分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 2317 次浏览 • 2021-03-30 14:35
欢迎交流谢谢
【代码分享】自定义视频的进度条(控制块)
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4563 次浏览 • 2020-08-21 17:30
发布链接
https://6.u.mgd5.com/c/n20h/hwr3/index.html
扫码看效果
使用的代码如下mugeda.addEventListener("renderready", function(){
var scene 查看全部
发布链接
https://6.u.mgd5.com/c/n20h/hwr3/index.html
扫码看效果
使用的代码如下
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var myvideo = scene.getObjectByName('播放的视频');
var videodom;
var durationBtn = scene.getObjectByName('进度');
window.changeduration = function(){
videodom = myvideo.dom.childNodes[3];
console.log('btn position changed');
videodom.currentTime = videodom.duration*(scene.getObjectByName('进度').left - 100)/(500-100)
}
window.getvideoduration = function(){
if(!myvideo.dom) return;
videodom = myvideo.dom.childNodes[3];
console.log(videodom)
}
window.myScript = function(){
if(!videodom) return;
console.log(videodom.currentTime)
durationBtn.left = 100+(500-100)*videodom.currentTime/videodom.duration
}
});
代码里使用到aObject对象的dom属性。在木疙瘩里舞台上每个取了名的物体都可以用api来定位到,定位的就是它的aObject对象,aObject对象可以使用dom属性获取元素实际的dom。
api地址
https://card.mugeda.com/mugedaApiDoc/index.html
作品中添加代码的地方在
在以下公众号回复“视频进度块”,获取本文的源文件链接
【代码分享】点屏幕时出现爱心动画效果
原创分享 • lx_mgd 发表了文章 • 3 个评论 • 3774 次浏览 • 2020-05-20 14:48
可扫这个码在手机上看效果
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它mugeda.addEventListener("renderready", function(){
var scene = muge 查看全部
可扫这个码在手机上看效果
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var dianjiquyu = scene.getObjectByName("点击区域");
dianjiquyu.addEventListener("click", function(e){
// 为元件创建新的实例,并增加到主舞台
var aObject = mugeda.createInstanceOfSymbol("爱心");
// this指向aObject
// 提供inputX和inputY属性,获取相对于舞台的坐标值
var x = e.inputX;
var y = e.inputY;
scene.appendChild(aObject);
aObject.left = x - aObject.width/2;
aObject.top = y - aObject.height;
// 1秒后删除刚刚加入的物体
setTimeout(function(){
scene.removeChild(aObject);
}, 1000);
});
//scene.appendChild(aObject, behaindAObject, pageIndex);
//可以将物体添加到舞台上
//第二个参数behaindAObject是舞台上某个动画元素,这个参数也可以是null
//第三个参数是页面的编号
});
api文档: https://card.mugeda.com/mugedaApiDoc/index.html
在以下公众号回复”爱心效果“,获取本文的源文件链接
【代码分享】使用回调函数去掉发布链接里多余的参数
原创分享 • ddbackhome 发表了文章 • 0 个评论 • 3046 次浏览 • 2020-02-10 14:13
比如,绘画板画好后转给新用户,不想让新用户看到上一个用户绘画板的内容。
解决方法是某些地方添加回调函数 reseturl,让用户转发时去掉多余的参数 查看全部
比如,绘画板画好后转给新用户,不想让新用户看到上一个用户绘画板的内容。
解决方法是某些地方添加回调函数 reseturl,让用户转发时去掉多余的参数。其中发布链接那里需要修改成你作品的发布链接。
mugeda.addEventListener("renderready", function(){
window.reseturl = function(){
defineWechatParameters({
url_callback: function(){
return "发布链接";
}
});
}
});
下边是demo链接,可以打开另存https://www.mugeda.com/animation/edit/95388534
【代码分享】模拟手机通话时间效果
原创分享 • ddbackhome 发表了文章 • 2 个评论 • 3145 次浏览 • 2020-01-16 15:07
可以打开另存一下
效果如图:
【代码分享】禁止长按保存,鼠标右键另存图片
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3733 次浏览 • 2019-10-21 15:41
查看地址
源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
mugeda.addEventListe 查看全部
查看地址
源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
scene.getObjectByName('微信号').dom.style.cssText += "pointer-events:none";
});
【经验分享】装13印章生成器
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 2831 次浏览 • 2019-10-13 01:31
【经验分享】木疙瘩制作行走的时钟效果
原创分享 • qqf35714a4fc 发表了文章 • 3 个评论 • 3389 次浏览 • 2019-10-07 15:03
木疙瘩制作如需源码请留言
【代码分享】代码实现倒计时效果
原创分享 • qqf35714a4fc 发表了文章 • 1 个评论 • 2928 次浏览 • 2019-10-07 12:09
【代码分享】ios12 ios13系统部分手机键盘无法自动收回问题
问题答疑 • ddbackhome 发表了文章 • 0 个评论 • 5000 次浏览 • 2019-09-25 17:50
window.addEventListener('focusin', function(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
});
查看全部
【代码分享】首行缩进2个文字(2个空格)
原创分享 • lx_mgd 发表了文章 • 1 个评论 • 4494 次浏览 • 2019-06-20 10:53
windo 查看全部
【代码分享】超少代码实现到特定时间活动结束的效果
原创分享 • qqf35714a4fc 发表了文章 • 0 个评论 • 3612 次浏览 • 2019-06-10 23:45
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();// 查看全部
var scene = mugeda.scene;
var d = new Date();//获取现在的时间
var x = d.getTime();//返回自 1970 年 1 月 1 日以来的毫秒数:
var aObject = scene.getObjectByName("time");
mugeda.scene.getObjectByName('time').text = x;
});
我们先看看案例效果点击查看案例,到了明天下午1点钟后就会显示活动已结束。
把以上代码复制到你的作品js里面,然后在舞台新建一个文本命名为time。
然后你就会发现time文本就会变成 一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。
【代码分享】设置作品只能在微信浏览器打开
原创分享 • qqf35714a4fc 发表了文章 • 1 个评论 • 3791 次浏览 • 2019-06-09 17:26
var isWeixin = ua.indexOf('micromessenger') != -1; //这里判断是不是微信浏览器
if (!isWeix 查看全部
var isWeixin = ua.indexOf('micromessenger') != -1; //这里判断是不是微信浏览器
if (!isWeixin) {
document.head.innerHTML = '<title>请在微信客户端打开</title>'; //可更改里面的提示文字
document.body.innerHTML = '<h3 style="text-align: center">请在微信客户端打开 </h3><div align="center"><img src="http://t.im/h4w1" width="300" /></div>';
}
//页面提示内容 src=""双引号里面的网址可更换为自己作品的二维码链接
//if (!isWeixin) {} 这个是执行内容
复制上方加粗代码到mugeda代码框里即可,有问题可回复或点击我空间联系。
【代码分享】检测用户屏幕是否是横的,并给出需要横屏的提示
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4937 次浏览 • 2019-06-06 14:29
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思mugeda.addEventListene 查看全部
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var tips = scene.getObjectByName('提示');
var screenDirection = window.matchMedia("(orientation: portrait)");
screenDirection.addListener(handleOrientationChange);
handleOrientationChange(screenDirection);
function handleOrientationChange(screenDirection) {
if (screenDirection.matches) {
/* 竖屏处理事件 */
tips.top = 0;
} else {
/* 横屏屏处理事件 */
tips.top = -350;
}
}
});
在以下公众号回复“横屏提示”,获取本文的源文件链接
【代码分享】H5里实现微信点击图片全屏预览预览效果,可双指缩放图片
原创分享 • lx_mgd 发表了文章 • 6 个评论 • 7853 次浏览 • 2019-05-31 14:17
https://e.u.mgd5.com/c/ams9/uni0/index.html
下边的是内容里需要添加的代码mugeda.addEventListener("renderready", function(){
var 查看全部
https://e.u.mgd5.com/c/ams9/uni0/index.html
下边的是内容里需要添加的代码
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
window.checkuseragent = function(){
var useragent = navigator.userAgent;
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
return false;
}else{
return true;
}
}
var picArr = ;
window.getimgurl = function(){
var max = 5; //这里的数字是需要按你自己图片的数量修改的
var j;
var picdom;
for (i = 0; i < max; i++) {
j = i+1;
picdom = scene.getObjectByName('pic'+j).dom;
picArr.push(picdom.src);
}
}
window.customview = function(){
if(checkuseragent()){
wx.previewImage({
current: picArr[0],
urls: picArr
});
}
}
});
需要注意的:
1.把需要用户点击的元素放在舞台中,并上添加点击时执行回调函数customview,其他图片需要上传到素材库后再放到舞台外,图片命名规则是pic1,pic2,pic3,pic4等,本例子中是把pic1设置成需要用户点击的物体了
2.图片加载需要时间,所以最好使用一个定时器来初始化预览效果,定时器加回调函数getimgurl,等待定时器结束时执行回调
3.这个效果只在微信里生效,其他地方无效
4.如果你的图片数量不是5,那么需要在代码里把 var max = 5; 这里的数字修改成你图片的数量
在以下公众号回复“全屏预览图片”,获取本文的源文件链接
【代码分享】判断多选控件选中了几个
原创分享 • lx_mgd 发表了文章 • 0 个评论 • 4212 次浏览 • 2019-05-15 14:07
mugeda.addEventListener("renderready", function(){
var scene = muge 查看全部
如果选中了3个,点“验证”文本时,会判断出选中了3个,不然会判断没选中3个。“验证”文本上设置了回调函数,会去检查“复选框1”的内容。
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var fuxuankuang = scene.getObjectByName('复选框1');
window.selectchecklist = function(){
var _arr = fuxuankuang.text.split(';');
if(_arr.length == 3){
scene.getObjectByName('判断结果').text = '已选3个';
}else{
scene.getObjectByName('判断结果').text = '不是3个'
}
}
});
在以下公众号回复“判断多选”,获取本文的源文件链接
【代码分享】在木疙瘩中添加雷达图的方法
原创分享 • ddbackhome 发表了文章 • 2 个评论 • 5772 次浏览 • 2019-03-13 11:34
发布链接:https://6.u.mgd5.com/c/n20h/q8hp/index.html
发布链接预览:
打开下边的链接并另存
https://www.mugeda.com/animation/edit 查看全部
发布链接:https://6.u.mgd5.com/c/n20h/q8hp/index.html
发布链接预览:
打开下边的链接并另存
https://www.mugeda.com/animation/edit/6b202b89
作品中用到了js来生成canvas,并在canvas中绘制了雷达图,两个文本上分别设置了两个回调函数,点击文本,即可调用回调函数生成雷达图。代码使用 scene.getObjectByName('chartContainer').dom 把mugeda对象转换成dom对象,然后才可以使用原生js来进行操作,这里是api文档,可以参考一下:http://card.mugeda.com/mugedaApiDoc/index.html
mugeda.addEventListener("renderready", function(){
var scene = mugeda.scene;
var chartContainer = scene.getObjectByName('chartContainer').dom;
var mW = 300; //雷达图的宽
var mH = 300; //雷达图的高
var mData = [['速度', 77],['力量', 72],['防守', 46],['射门', 50],['传球', 80],['耐力', 60]];
var mCount = mData.length; //边数
var mCenter = mW /2; //中心点
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount; //角度
var mCtx = null;
var mColorPolygon = '#B8B8B8'; //多边形颜色
var mColorLines = '#B8B8B8'; //顶点连线颜色
var mColorText = '#000000';
var canvas;
//回调函数
window.createRadarChat = function(){
//初始化
// (function(){
// var canvas = document.createElement('canvas');
// document.body.appendChild(canvas);
// chartContainer.appendChild(canvas);
chartContainer.innerHTML = '<canvas id="myCart"></canvas>';
canvas = document.getElementById('myCart');
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
// })();
}
//回调函数
window.changeChart = function(){
mData = [['速度', 70],['力量', 32],['防守', 16],['射门', 90],['传球', 80],['耐力', 60]];
chartContainer.innerHTML = '<canvas id="myCart"></canvas>';
canvas = document.getElementById('myCart');
canvas.height = mH;
canvas.width = mW;
mCtx = canvas.getContext('2d');
drawPolygon(mCtx);
drawLines(mCtx);
drawText(mCtx);
drawRegion(mCtx);
drawCircle(mCtx);
}
// 绘制多边形边
function drawPolygon(ctx){
ctx.save();
ctx.strokeStyle = mColorPolygon;
var r = mRadius/ mCount; //单位半径
//画6个圈
for(var i = 0; i < mCount; i ++){
ctx.beginPath();
var currR = r * ( i + 1); //当前半径
//画6条边
for(var j = 0; j < mCount; j ++){
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
ctx.lineTo(x, y);
}
ctx.closePath()
ctx.stroke();
}
ctx.restore();
}
//顶点连线
function drawLines(ctx){
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorLines;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
}
//绘制文本
function drawText(ctx){
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorText;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
ctx.fillText(mData[i][0], x, y + fontSize);
}else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
}else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2){
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
}else{
ctx.fillText(mData[i][0], x, y);
}
}
ctx.restore();
}
//绘制数据区域
function drawRegion(ctx){
ctx.save();
ctx.beginPath();
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
ctx.restore();
}
//画点
function drawCircle(ctx){
ctx.save();
var r = mCenter / 30;
for(var i = 0; i < mCount; i ++){
var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;
var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255, 0, 0, 0.8)';
ctx.fill();
}
ctx.restore();
}
// 代码参考以下博客
// 原文:https://blog.csdn.net/lecepin/ ... 66711
});
【代码分享】H5拜年模版定制分享信息的优化方法
原创分享 • qz 发表了文章 • 0 个评论 • 5217 次浏览 • 2019-01-31 11:21
方法一(推荐):
直接另存升级后的源文件地址:
https://www.mugeda.com/animation/edit/6c678499
方法二:
1、在已有的模版基础上添加一段代码window.a 查看全部
方法一(推荐):
直接另存升级后的源文件地址:
https://www.mugeda.com/animation/edit/6c678499
方法二:
1、在已有的模版基础上添加一段代码
window.aaaa = function(){2、在第3页右侧的确定按钮上添加行为
var to = mugeda.scene.getObjectByName('收件人');
var greeting = mugeda.scene.getObjectByName('祝福语');
var from = mugeda.scene.getObjectByName('发件人');
defineWechatParameters({
title: from.text + "给您拜年啦",
desc: greeting.text
});
}
双击第3页舞台右侧定制弹窗组;
点击“确定”按钮,打开行为窗口;
添加行为:属性控制 > 回调函数;
点击编辑行为,输入函数名为:aaaa
这样,在用户定制祝福后,分享时祝福语、发卡人就即时出现在分享信息中了,效果如下:
【代码分享】设置视频从第几秒开始播放
原创分享 • lx_mgd 发表了文章 • 2 个评论 • 4033 次浏览 • 2019-01-17 14:26
可以向智能客服回复“api”得到官方的api地址。
视频取名为vvvv,然后在代码里使用api获取了它。
红色框住的是名字为 jumpto 的回调函数
这个是文字上加的回调函数,其中参数1是要跳的秒数 查看全部
【代码分享】在mugeda里使用高德地图或腾讯地图以及导航的方法
原创分享 • lx_mgd 发表了文章 • 2 个评论 • 9588 次浏览 • 2018-12-13 13:59
方法一,使用默认的木疙瘩地图行为:
比如从地图上获得的这些信息
奥林匹克森林公园
北京市朝阳区科荟路33号
需要分别填到两个输入框里。
方法二,使用跳转链接,直接跳到网页链接:
一般而言,地图服务都会有一个电脑版本和手机版,
比如高德 查看全部
方法一,使用默认的木疙瘩地图行为:
比如从地图上获得的这些信息
奥林匹克森林公园
北京市朝阳区科荟路33号
需要分别填到两个输入框里。
方法二,使用跳转链接,直接跳到网页链接:
一般而言,地图服务都会有一个电脑版本和手机版,
比如高德电脑版本是:https://ditu.amap.com,可以搜索到高德手机版网址是:https://m.amap.com
现在需要做的就是直接用手机的默认浏览器去访问高德地图的手机版本网址,搜索你的结果,比如说“中关村”。
得到结果后,手机上浏览器的网址会变
成 https://m.amap.com/search/mapview/keywords=%E4%B8%AD%E5%85%B3%E6%9D%91
现在需要把这个网址复制一下,填到mugeda里的跳转链接行为里
最后一步,保存,发布作品,完成。效果就是用户点击这个行为,会跳转到网页链接。
编辑链接:
https://www.mugeda.com/animation/edit/4e3a0bb4
最终效果:
https://e.u.mgd5.com/c/ams9/3whw/index.html
方法三,使用代码:
这个方法会调用微信自带的地图功能,效果最为流畅, 大概效果如下图。
使用此方法打开地图功能后,可以调用手机上其他的地图app,比如苹果地图,高德地图等。
这是公众号文章链接,可以直接打开看描述: https://mp.weixin.qq.com/s/NIiJRkGvqkixw2jJjcQQVg
你可以在以下公众号回复“地图导航预览效果”,得到预览链接,在手机上测试效果。
【代码分享】播放音频的时候减少背景音乐的音量
原创分享 • lx_mgd 发表了文章 • 1 个评论 • 6369 次浏览 • 2017-12-05 17:52
主要思路是,物体上加行为来使用回调函数来减少音量,同时控制音频播放,然后在音频上加回调来恢复音量
使用到的代码:mugeda.addEventListener("renderready" 查看全部
主要思路是,物体上加行为来使用回调函数来减少音量,同时控制音频播放,然后在音频上加回调来恢复音量
使用到的代码:
mugeda.addEventListener("renderready", function(){实际使用时可能需要把音频放到舞台外
var scene = mugeda.scene;
var bg;
window.lowerBgmusic = function(){
bg = window.backgroundMusic;
bg.volume = 0.2;
}
window.normalBgmusic = function(){
bg = window.backgroundMusic;
bg.volume = 1;
}
});
在以下公众号回复“控制背景音乐”,获取本文的源文件链接
【代码分享】设置视频循环播放
原创分享 • lx_mgd 发表了文章 • 6 个评论 • 6914 次浏览 • 2017-11-10 13:33
setInterval(function(){
Array.prototype.forEach.call(Mugeda.currentAni.dom.qu 查看全部
mugeda.addEventListener("renderready", function(){把上面的代码放到js框中,这样作品里的视频就可以自动循环了。
setInterval(function(){
Array.prototype.forEach.call(Mugeda.currentAni.dom.querySelectorAll('video'), function(video){
video.setAttribute('loop', 'true');
});
}, 2000);
});
现在可以直接点中视频,在属性里面选中循环就好了。
【代码分享】分享直播课里的倒计时代码
原创分享 • lx_mgd 发表了文章 • 3 个评论 • 7586 次浏览 • 2017-07-04 11:28
大家需要自己配置代码下面加粗的部分
var eventTime = moment('2017-10-01 19:22:30').unix();
把这行代码里的时间改为自己的活动时间,
djs. 查看全部
大家需要自己配置代码下面加粗的部分
var eventTime = moment('2017-10-01 19:22:30').unix();
把这行代码里的时间改为自己的活动时间,
djs.text = '活动已结束';
这行代码里的文字说明改为自己想要的文字
对显示的时间做修改
djs.text = duration.years() + '年'+ duration.months() + '月' + duration.days() + '天' + duration.hours()+ '小时' + duration.minutes()+ '分' + duration.seconds() + '秒';
其他的使用方法,可以到moment.js的官网查看
http://momentjs.cn/
更多内容可以关注以下公众号
如何添加第三方统计代码
原创分享 • ddbackhome 发表了文章 • 4 个评论 • 5392 次浏览 • 2017-04-27 15:42
1. 获取统计代码
每个统计平台都会提供相应的JavaScript统计插入 代码,百度的统计代码形式为:
var _hmt = _hmt || [];
(functio 查看全部
1. 获取统计代码
每个统计平台都会提供相应的JavaScript统计插入 代码,百度的统计代码形式为:
var _hmt = _hmt || [];2. 在工具中插入以上代码,如下图所示:
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?xxx";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
点击保存,这样就轻松的 完成了统计代码插入的操作。
2.9.7 API的应用:获取Mugeda后台数据
原创分享 • songyue 发表了文章 • 1 个评论 • 8712 次浏览 • 2016-11-03 15:04
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。
方法二:
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是 查看全部
跳过Mugeda后台,把在Mugeda里做的作品导出,放到自己的服务器上,然后通过添加代码的方式获取数据。
方法二:
可以在api中使用ajax的方式发送和获取数据,但是要注意跨域问题,当你的动画直接使用Mugeda平台发布的时候,使用ajax向自己所在域名的服务器发送请求的时候,是存在跨域问题的,这个时候推荐使用jsonp的方式来请求数据,如果你的动画部署在自己的服务器上,这个时候就不会存在跨域问题,你可以使用ajax方式来请求数据。
推荐在动画中引入jQuery,这样你可以使用jQuery ajax方法来发送请求,以下是例子,其中url需要执行你自己后台的请求地址,注意,跨域情况下使用jsonp的请求需要服务器后台支持。
1.没有跨域的情况:
$.ajax({
url: '/submit',
type: 'POST',
data: {name: 'test'},
success: function (response) {
//TODO;
}
});
2.跨域的情况:
$.ajax({
url: "/submit.jsonp",
jsonp: "callback",
dataType: "jsonp",
data: {name: 'test'},
success: function( response ) {
//TODO;
}
});
2.9.6 API的应用:工具API
2.9.5 API的应用:aObject对象
2.9.4 API的应用:scene对象
2.9.3 API的应用:Mugeda对象
2.9.2 API的应用:Mugeda API的整体结构
2.9.1 API的应用:在动画中添加代码
2.9.6 API的应用:工具API
原创分享 • mingyue 发表了文章 • 1 个评论 • 10259 次浏览 • 2016-09-07 13:58
在微信中,经常需要定义微信转发的标题、描述、转发地址。除了在IDE的文档信息中填写这些信息以外,还可以通过代码动态的更改这些值,代码如下:
上述函数可以多次调用,每调用一次,用新值覆盖旧值。上述4个参数可以省略1~3个。
信息提示
Mugeda渲染器提供通用的信息提示 查看全部
在微信中,经常需要定义微信转发的标题、描述、转发地址。除了在IDE的文档信息中填写这些信息以外,还可以通过代码动态的更改这些值,代码如下:
上述函数可以多次调用,每调用一次,用新值覆盖旧值。上述4个参数可以省略1~3个。
信息提示
Mugeda渲染器提供通用的信息提示函数,代码如下:
2.9.5 API的应用:aObject对象
2.9.4 API的应用:scene对象
2.9.3 API的应用:Mugeda对象
2.9.2 API的应用:Mugeda API的整体结构
2.9.1 API的应用:在动画中添加代码