功能详解

功能详解

【经验分享】点击复制文本效果

原创分享qq3a937a8af6 回复了问题 • 4 人关注 • 3 个回复 • 4702 次浏览 • 2022-02-10 11:42 • 来自相关话题

【代码分享】屏蔽长按图片出现的保存图片系统菜单

原创分享wxb95416ac84 回复了问题 • 13 人关注 • 5 个回复 • 11643 次浏览 • 2021-11-25 17:14 • 来自相关话题

【经验分享】在app中如何处理发布链接的分享信息

原创分享ddbackhome 发表了文章 • 0 个评论 • 1813 次浏览 • 2021-11-08 11:45 • 来自相关话题

有一些用户需要在自己的app里动态地修改发布链接的分享信息,这个需求一般需要修改app自身的代码来完成。以下是实现的思路和大概方法,可供大家参考。
 
mugeda作品的分享信息保存在了window.weiParam变量中,可以在作品加载完成后读取。用户在app中可以在webview中注入js的方法 查看全部
有一些用户需要在自己的app里动态地修改发布链接的分享信息,这个需求一般需要修改app自身的代码来完成。以下是实现的思路和大概方法,可供大家参考。
 
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 • 来自相关话题

经确认上述问题为iOS系统存在的bug,可能需要等待苹果官方更新系统来真正修复
 
大概现象如下图
 










 





 
 
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
 document.styleSheets[0].insertRule('[data 查看全部
经确认上述问题为iOS系统存在的bug,可能需要等待苹果官方更新系统来真正修复
 
大概现象如下图
 

横屏.png


强制横屏.png

 

修复前.PNG

 
 
现在有一个临时的解决办法,就是把以下的代码复制到作品的代码框中
 
document.styleSheets[0].insertRule('[data-type="stage"],body,.mugine_scene_clip{ overflow: visible!important; }', 0); 


加代码.png

 
 
 
修复后的效果如下:
 

修复后.PNG

 
 
你可以使用苹果手机访问以下链接看一下效果
 
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 • 来自相关话题

【已解决】身份证的验证代码,各种表单验证

回复

BUG反馈qqf35714a4fc 发起了问题 • 1 人关注 • 0 个回复 • 3331 次浏览 • 2021-04-02 17:35 • 来自相关话题

【已解决】api 修改文本字体颜色

BUG反馈wx2199026830 回复了问题 • 4 人关注 • 2 个回复 • 6053 次浏览 • 2021-04-01 17:58 • 来自相关话题

【已解决】木疙瘩制作京东秒杀倒计时效果

回复

BUG反馈qqf35714a4fc 发起了问题 • 1 人关注 • 0 个回复 • 3153 次浏览 • 2021-03-30 17:07 • 来自相关话题

【已解决】如何在木疙瘩中用代码添加倒计时功能

回复

BUG反馈qqf35714a4fc 发起了问题 • 1 人关注 • 0 个回复 • 3235 次浏览 • 2021-03-30 14:40 • 来自相关话题

制作格式为天/时/分/秒的倒计时动画

案例分享qqf35714a4fc 发表了文章 • 0 个评论 • 2317 次浏览 • 2021-03-30 14:35 • 来自相关话题

制作格式为天/时/分/秒的倒计时动画做出当前时间的倒计时?如何在木疙瘩中用代码添加倒计时功能


欢迎交流谢谢
  1. 制作格式为天/时/分/秒的倒计时动画
  2. 做出当前时间的倒计时?
  3. 如何在木疙瘩中用代码添加倒计时功能
  4. QQ截图20210330142506.jpg
  5. 欢迎交流
  6. 谢谢

有没有api导入地图的教程

问题答疑ddbackhome 回复了问题 • 1 人关注 • 1 个回复 • 2566 次浏览 • 2021-03-26 14:40 • 来自相关话题

【代码分享】自定义视频的进度条(控制块)

原创分享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 

扫码看效果

代码版进度条.png



使用的代码如下
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
 
作品中添加代码的地方在
 

视频进度条添加代码.png

 
 
 
在以下公众号回复“视频进度块”,获取本文的源文件链接

扫码.png

 

 

2.9.1 API的应用:在动画中添加代码

原创分享m8499519 回复了问题 • 6 人关注 • 1 个回复 • 12563 次浏览 • 2020-06-08 08:43 • 来自相关话题

【代码分享】点屏幕时出现爱心动画效果

原创分享lx_mgd 发表了文章 • 3 个评论 • 3774 次浏览 • 2020-05-20 14:48 • 来自相关话题

 
可扫这个码在手机上看效果





 
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它mugeda.addEventListener("renderready", function(){
var scene = muge 查看全部
 
可扫这个码在手机上看效果

爱心效果.png

 
主要是用了这些代码,从元件库里新建元件并添加到舞台,然后设置舞台上元件实例的坐标,最后删除它
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
 
 
 

在以下公众号回复”爱心效果“,获取本文的源文件链接
 
扫码.png

 

【代码分享】使用回调函数去掉发布链接里多余的参数

原创分享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 • 来自相关话题

https://www.mugeda.com/animation/edit/300ac6ca
 
可以打开另存一下
 
效果如图:
 





 
https://www.mugeda.com/animation/edit/300ac6ca
 
可以打开另存一下
 
效果如图:
 

sss.png

 

【代码分享】禁止长按保存,鼠标右键另存图片

原创分享qqf35714a4fc 发表了文章 • 0 个评论 • 3733 次浏览 • 2019-10-21 15:41 • 来自相关话题

安卓系统实测可以,ios系统未测试。
查看地址







源码地址:https://cn.mugeda.com/animation/edit/c376fde2
把下面代码复制到脚本窗口,把你要禁止长按保存的图片命名,微信号替换为你命名的图片名字。
 

mugeda.addEventListe 查看全部
安卓系统实测可以,ios系统未测试。
查看地址


禁止另存图片.gif


源码地址: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 发表了文章 • 0 个评论 • 3598 次浏览 • 2019-10-11 17:01 • 来自相关话题

查看地址

【经验分享】木疙瘩制作行走的时钟效果

原创分享qqf35714a4fc 发表了文章 • 3 个评论 • 3389 次浏览 • 2019-10-07 15:03 • 来自相关话题

demo地址




木疙瘩制作如需源码请留言
demo地址
时钟.gif

木疙瘩制作如需源码请留言

【代码分享】代码实现倒计时效果

原创分享qqf35714a4fc 发表了文章 • 1 个评论 • 2928 次浏览 • 2019-10-07 12:09 • 来自相关话题

demo地址共享源码地址有问题请联系 查看全部




【代码分享】ios12 ios13系统部分手机键盘无法自动收回问题

问题答疑ddbackhome 发表了文章 • 0 个评论 • 5000 次浏览 • 2019-09-25 17:50 • 来自相关话题

var scrollTop = 0;

window.addEventListener('focusin', function(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
});
查看全部
var scrollTop = 0;

window.addEventListener('focusin', function(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
});

window.addEventListener('focusout', function(){
window.scrollTo({
top: scrollTop,
behavior: "smooth"
});
});
 
 
把上面的代码加到作品的代码框里,然后保存,发布。
 
效果如图

ios13.png

 
 

【代码分享】首行缩进2个文字(2个空格)

原创分享lx_mgd 发表了文章 • 1 个评论 • 4495 次浏览 • 2019-06-20 10:53 • 来自相关话题

原理是使用回调函数来给文本和文本段落加上2文字宽度的缩进。使用时,给需要的文本或文本段落加上出现就执行的回调行为。回调函数的名称是 customindent mugeda.addEventListener("renderready", function(){

windo 查看全部
原理是使用回调函数来给文本和文本段落加上2文字宽度的缩进。使用时,给需要的文本或文本段落加上出现就执行的回调行为。回调函数的名称是 customindent 
mugeda.addEventListener("renderready", function(){

window.customindent = function(ele){
ele.dom.childNodes[0].style.cssText += "text-indent:2em"
}

});

 在以下公众号回复“缩进2文字”,获取本文的源文件链接
 

扫码.png

 

【代码分享】超少代码实现到特定时间活动结束的效果

原创分享qqf35714a4fc 发表了文章 • 0 个评论 • 3612 次浏览 • 2019-06-10 23:45 • 来自相关话题

mugeda.addEventListener("renderready", function(){
    var scene = mugeda.scene;
    var d = new Date();//获取现在的时间
    var x = d.getTime();// 查看全部
mugeda.addEventListener("renderready", function(){
    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文本就会变成
微信截图_20190610233239.png
一串类似这样的数字。
这个数字就是自 1970 年 1 月 1 日以来到现在的时间的毫秒数。
这个数字每次打开作品或刷新都会改变,然后你就在这串数字上做行为就行啦!
我是这样做的,新建一个定时器然后这样设置
微信截图_20190610234018.png

我图片里面这个数字就是,
1970 年 1 月 1 日到2019年6月11日13.00的毫秒数。
然后你就会发现我这个作品
到了明天下午1点中后打开就会显示活动已结束了。
这个毫秒数怎么来呢?
时间戳(Unix timestamp)转换工具
点上面的工具转换你要的时间即可。
当然这是一个,不完美的代码。
正如我所说要以超少代码实现到特定时间活动结束的效果。
下次再更新更好更快捷的代码方法。
有问题可回复或点击我空间联系。

【代码分享】设置作品只能在微信浏览器打开

原创分享qqf35714a4fc 发表了文章 • 1 个评论 • 3791 次浏览 • 2019-06-09 17:26 • 来自相关话题

var ua = navigator.userAgent.toLowerCase();  
            var isWeixin = ua.indexOf('micromessenger') != -1;   //这里判断是不是微信浏览器
             if (!isWeix 查看全部
var ua = navigator.userAgent.toLowerCase();  
            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 查看全部
可以直接扫码看效果

横竖.png

 
 
作品用到了代码去检测屏幕是否是横的,如果是横的,就把提示移开,如果是竖直的,就把提示移到舞台中。
提示是一张图片,你可以自己修改替换,提示的图片最好加上怎样打开屏幕锁的说明,因为不是所有用户都明白打开屏幕锁是什么意思
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;

}
}

});
 
 
在以下公众号回复“横屏提示”,获取本文的源文件链接

扫码.png

 

【代码分享】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 查看全部
先预览一下看效果:

sss.png

 
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; 这里的数字修改成你图片的数量
 
 
在以下公众号回复“全屏预览图片”,获取本文的源文件链接
 

扫码.png

 
 

【代码分享】判断多选控件选中了几个

原创分享lx_mgd 发表了文章 • 0 个评论 • 4212 次浏览 • 2019-05-15 14:07 • 来自相关话题

如果选中了3个,点“验证”文本时,会判断出选中了3个,不然会判断没选中3个。“验证”文本上设置了回调函数,会去检查“复选框1”的内容。
 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个'
}
}

});

 
在以下公众号回复“判断多选”,获取本文的源文件链接

扫码.png

 
 

【代码分享】在木疙瘩中添加雷达图的方法

原创分享ddbackhome 发表了文章 • 2 个评论 • 5773 次浏览 • 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
发布链接预览:

下载.png

 
 
打开下边的链接并另存
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里实现地图实时导航功能?

回复

问题答疑wx1b6e76a244 发起了问题 • 1 人关注 • 0 个回复 • 18 次浏览 • 2024-03-23 22:11 • 来自相关话题

能否增加以分秒计时的排行榜和计时器

回复

新功能需求ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 615 次浏览 • 2022-11-02 15:53 • 来自相关话题

如何实现自由缩放同时宽度适配

回复

新功能需求qq974dc51182 发起了问题 • 1 人关注 • 0 个回复 • 754 次浏览 • 2022-09-23 18:19 • 来自相关话题

木疙瘩怎么绑定

回复

问题答疑ddbackhome 回复了问题 • 2 人关注 • 1 个回复 • 1606 次浏览 • 2022-04-28 17:08 • 来自相关话题

2.9.1 API的应用:在动画中添加代码

回复

原创分享m8499519 回复了问题 • 6 人关注 • 1 个回复 • 12563 次浏览 • 2020-06-08 08:43 • 来自相关话题

【Mugeda简约版】※Mugeda简约版编辑界面介绍※

回复

原创分享lichun761014 回复了问题 • 3 人关注 • 1 个回复 • 8841 次浏览 • 2017-05-16 12:16 • 来自相关话题

2.1.4 Mugeda界面与舞台:时间轴

回复

原创分享15899622371 回复了问题 • 6 人关注 • 3 个回复 • 11001 次浏览 • 2017-05-06 11:28 • 来自相关话题

2.2.4 素材与媒体:幻灯片

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 8485 次浏览 • 2016-09-20 16:02 • 来自相关话题

2.1.7 Mugeda界面与舞台:什么是舞台?

回复

问题答疑mingyueliu 发起了问题 • 1 人关注 • 0 个回复 • 7724 次浏览 • 2016-09-20 14:42 • 来自相关话题

2.1.3 Mugeda界面与舞台:快捷工具栏

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 7248 次浏览 • 2016-09-19 17:39 • 来自相关话题

2.1.2 Mugeda界面与舞台:菜单栏

回复

原创分享mingyueliu 发起了问题 • 2 人关注 • 0 个回复 • 7961 次浏览 • 2016-09-19 17:32 • 来自相关话题

2.9.3 API的应用:Mugeda对象

回复

原创分享mingyue 发起了问题 • 1 人关注 • 0 个回复 • 9232 次浏览 • 2016-09-07 11:37 • 来自相关话题

【经验分享】木疙瘩转盘抽奖模板分析和修改办法

原创分享lx_mgd 发表了文章 • 0 个评论 • 4627 次浏览 • 2021-03-23 11:57 • 来自相关话题

 
木疙瘩自带了一些模板,比如这个转盘抽奖的模板
 





 
 
但是这个转盘模板的中奖行为设置并不是真正的抽奖控件,而是使用随机数来模拟的中奖效果,如果你使用这个模板来抽奖,需要修改成真正的抽奖控件,下边的链接是对这个模板的分析和修改办法。
 
 木疙瘩转盘抽奖模板分析和修改办法
 
 
查看全部
 
木疙瘩自带了一些模板,比如这个转盘抽奖的模板
 

转盘.png

 
 
但是这个转盘模板的中奖行为设置并不是真正的抽奖控件,而是使用随机数来模拟的中奖效果,如果你使用这个模板来抽奖,需要修改成真正的抽奖控件,下边的链接是对这个模板的分析和修改办法。
 
 木疙瘩转盘抽奖模板分析和修改办法
 
 
 
你可以在以下公众号回复“转盘抽奖模板”,得到视频中修改好的作品链接

关注木箱子啊.png

 
 
 

【新功能】图文编辑器的动态数据功能简介

新功能需求lx_mgd 发表了文章 • 0 个评论 • 5975 次浏览 • 2021-02-05 17:48 • 来自相关话题

 最新上线了一个新功能:动态数据。
 
你可以把它理解为一个特殊的数据库,数据库里的数据是你账号里的作品(特指发布链接)、图片、视频。这些数据可以显示在图文作品的固定区域,这个固定区域可以动态地更新内容。

举个例子,某些图文作品的固定区域需要时不时地新增、减少或者定期更新内容,如果是以前,用户会多 查看全部
 最新上线了一个新功能:动态数据
 
你可以把它理解为一个特殊的数据库,数据库里的数据是你账号里的作品(特指发布链接)、图片、视频。这些数据可以显示在图文作品的固定区域,这个固定区域可以动态地更新内容。

举个例子,某些图文作品的固定区域需要时不时地新增、减少或者定期更新内容,如果是以前,用户会多次经历这样的步骤:编辑图文作品,保存,重新发布,编辑图文作品,保存,重新发布等等。

新闻网站里有个今日话题的栏目,网站运营者只用设置好这个区域叫做“今日话题”,里面显示7条数据,以后就只用在新闻库里一直更新新闻就好,今日话题栏目会自动从新闻库里获取最新的7条显示。动态数据功能跟这个效果是一致的。

今日话题.png


当作品规划好动态更新区域后,用户不用编辑图文作品本身,也不用多次重新发布图文作品,只需要去编辑和更新动态数据库里的内容,图文作品的动态区域会自动从动态数据库获取内容并更新到图文作品的发布链接里。

 
要完成这个功能,需要三个步骤

1.账号设置动态数据源

2.图文作品设置动态更新区域

3.后期维护数据源

 
 


下面的例子,把账号里的作品(特指发布链接)作为数据源。
 


第一步:设置动态数据源

动态数据的入口在左边
 

image_(2).png

 
 
新增文件夹,取名为“春节专用”


image_(3).png


进入文件夹


image_(4).png


点添加内容

image_(5).png



可以从已发布的作品中选择几个作品添加到此文件夹里
 

image_(6).png



第二步:图文作品设置动态更新区域

新建图文作品

image_(7).png


在左侧菜单里,动态数据被分类到了“样式”里面。点加号,将此样式添加到舞台中,这样就添加好了动态数据区域

image_(8).png


在舞台中,选中某个动态数据样式中间的任意元素,再点设置按钮。

image_(9).png


数据来源选择第一步新建的“春节专用”,显示数量选5,意思是从“春节专用”这个数据库里选5条显示在这个区域。

image_(10).png



保存一下,点预览,可以看到动态数据区域的这里显示了3条,而不是5条。因为数据源里只有3条信息。

image_(11).png


image_(12).png



到这时,可以保存并发布此图文了。再次提示,微信公众号不支持动态数据,所以即使推到微信草稿箱了,微信那边也不显示,建议使用发布作品。

image_(13).png



第三步:编辑数据源,发布链接自动更新

回到动态数据菜单,编辑某个文件夹里面的内容,比如进入“春节专用”文件夹

image_(14).png


可在这里拖动作品,改变排序,它在发布链接里的顺序也会改变,新增或减少作品数量,发布链接里显示的作品数量也会新增或减少。

这边已经添加了7个作品
 

image_(15).png



打开第二步最后生成的发布链接,发现已经有显示5条信息了。因为第二步设置动态区域时规定了这里显示数量为5个。
 

image_(16).png


image_(17).png



至此就完成了作品(发布链接)作为动态数据,显示到图文的发布链接里,并维护和更新数据的作品。


图片和视频作为动态数据,显示到图文作品发布链接里的方法跟上述的类似,你可以自己试一下。



微信公众号文章群发以后不能动态显示部分内容。而动态数据功能会在图文内容的部分区域动态更新,所以有这个功能的图文作品推送到微信那边后,会被微信去掉这部分的功能,导致不能正常使用。

所以,动态数据功能目前暂时只支持图文编辑器,发布作品得到发布链接来使用,而不支持推送到公众号。如果需要在公众号访问这个作品的发布链接,可以把生成好的发布链接添加到微信的原文链接或者把发布链接的二维码图片放到微信公众号文章里当图片。

4.1.18【新功能教程】视频的跳转并播放功能(精确到秒)

原创分享qz 发表了文章 • 6 个评论 • 11202 次浏览 • 2019-11-08 19:21 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
木疙瘩可以方便的插入一个视频,并控制视频的播放、暂停、停止等。
现在,木疙瘩可以更自由的控制视频播放,可以跳转到视频的某个时间点并播放哦!

下面来看具体操作方法吧!
 
第一步给放置在舞台的视频命名





 
查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
木疙瘩可以方便的插入一个视频,并控制视频的播放、暂停、停止等。
现在,木疙瘩可以更自由的控制视频播放,可以跳转到视频的某个时间点并播放哦!

下面来看具体操作方法吧!
 
第一步给放置在舞台的视频命名

图片_1.png

 
第二步设置视频的跳转行为:1.打开行为弹窗——2.媒体播放控制——3.控制视频——4.编辑行为——5.选择视频——设置控制方式为:跳转并播放或跳转并暂停——设置跳转位置(时间单位为秒)——6.确定。这样我们就设置完成了。

图片_2.png

 
音频的跳转同理,如下图

图片_3.png

 
学会了吗?这功能是不是很实用?赶快尝试吧!

4.1.17【新功能教程】VR全景视频

原创分享qz 发表了文章 • 1 个评论 • 12356 次浏览 • 2019-10-31 11:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
 
木疙瘩的虚拟现实VR功能大家都用过,添加一张全景图片即可实现VR全景效果。
现在,木疙瘩对全景视频开放支持了!
这都得利于广大木友的热情投票参与,感谢木友们积极提出宝贵的新功能建议,让木疙瘩不断地加入用户最需要的新功 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
 
木疙瘩的虚拟现实VR功能大家都用过,添加一张全景图片即可实现VR全景效果。
现在,木疙瘩对全景视频开放支持了!
这都得利于广大木友的热情投票参与,感谢木友们积极提出宝贵的新功能建议,让木疙瘩不断地加入用户最需要的新功能,笔芯~
 
下面来看在虚拟现实控件中,如何使用并控制全景视频吧!

第一步:在工具栏选择全景组件并添加至舞台

图片_1.png


第二步:添加视频长宽尺寸比例符合2:1或6:1的全景视频

图片_2.png


系统提示:全景视频场景,由于不同的浏览器策略不同,在用户和内容交互之前,不同浏览器的策略可能不允许视频自动播放。因此,如果你想要视频自动播放,需要在播放视频之前,在内容流程中引导用户进行“点击”等操作后在播放全景视频。
 
图片_3.png

 
第三步:引导用户进行“点击”等操作我们可以在全景视频页面的前面一页增加一个引导页,通过用户点击跳转至全景页面

图片_4.png

 
注:上面只是一个例子,你也可以通过增加添加其他帧或页面的交互行为来引导用户跳转至全景视频的播放。
 
第四步:添加完成,我们可以像设置全景图片一样给全景视频设置一些交互热点及其他配置

图片_5.png

 
马上去试试吧!
 

4.1.9【新功能教程】改变行为属性增加边框颜色和填充色

原创分享mingyueliu 发表了文章 • 0 个评论 • 7149 次浏览 • 2018-08-17 17:32 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址: http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 现在我们可以通过行为改变元素的填充颜色以及元素的边框颜色.

演示地址: http://cn.mugeda.com/animation/edit/a604a6ac

首先在页面上绘制两个图形以及两个对应的行为按钮,,一个按钮用来改变对应图形的填充色,另一个按钮用来改变对应图形的边框颜色。

1.gif


然后分别给被改变填充色和边框颜色的两个图形分别命名。

2.gif


33.gif


然后分别给下面的两个按钮绑定上行为。

3.gif


4.gif


5.gif


然后在作品里点击这个按钮,对应元素的填充色就会变为行为里所选择的颜色。


6.gif


改变元素边框颜色的行为操作与之类似,选择另一个按钮,,然后点击改变元素属性,点击编辑。

7.gif


8.gif



4.1.16【新功能教程】屏幕适配范围与安全框

原创分享mingyueliu 发表了文章 • 0 个评论 • 5392 次浏览 • 2018-08-17 17:26 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。






选择后 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

为了方便设计师更好的编辑内容,防止内容在设备上超出可见显示范围(安全框),木疙瘩支持显示屏幕适配范围辅助线。在IDE中舞台的右上角,可以通过选择屏幕适配方式和设备类型来在舞台上显示屏幕适配范围辅助线。

1.gif


选择后,物体上会出现一个方框指示指定设备的可见范围(安全框)。如果舞台上添加的内容超出了指定设备的安全框,方框会显示为红色以提示设计师调整元素位置。如果没有元素超出安全框,方框会显示为绿色。

2.gif

 

4.1.15【新功能教程】计数器组件

原创分享mingyueliu 发表了文章 • 2 个评论 • 8640 次浏览 • 2018-08-17 17:24 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。






我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
通常我们在制作作品时,涉及到用户在传播过程中累加计数的功能时就会用到计数器。
如图,我们点击计数器工具在舞台上添加一个计数器,设置默认值和计数值。

1.png


我们先在舞台上添加相关按钮素材。如图,添加两个文本框分别命名为“显示计数”“获取计数”

2.png


为“增加计数”按钮添加“增加计数”行为
数据服务→增加计数→触发条件:点击→设置参数 
计数器名称:“计数器1” 
显示计数元素:“显示计数”

3.png


4.png


同理,为“获取计数”按钮添加“获取计数”行为。可点击预览观看效果。
双击舞台上的计数器弹出“计数器”对话框,点击“管理实时数据”,可以修改当前数据。

5.png

 

4.1.14【新功能教程】运动曲线编辑

原创分享mingyueliu 发表了文章 • 0 个评论 • 6229 次浏览 • 2018-08-17 17:21 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线,关键 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址:http://prerelease.mugeda.com/a ... 15485
预览地址:http://prerelease.mugeda.com/c ... 15485

为了支持更加灵活的编辑运动曲线,关键帧动画增加了“自定义运动曲线”的功能。

1.gif


选择“自定义运动曲线”后,可以点击编辑对运动曲线进行编辑。以一个包含有2个关键帧的基本动画为例,打开“编辑运动曲线”对话框后可以在左侧点击选择想要编辑的运动曲线,即可在右侧显示出运动曲线并可进行编辑。

2.gif


第一次打开时,默认曲线是线性,并且显示为半透明,表示还没有指定任何曲线。可以从“预置曲线”中选择一个曲线类型,这时候,曲线会显示为实线。运动曲线的横坐标代表时间,纵坐标代表运动进度(即0%指100%)。每一段运动曲线由首尾的两个绿色节点表示,左下角的绿色节点代表对应关键帧动画段的开始时刻和运动进度0%,右上角的绿色节点代表对应关键帧动画段的结束时刻和运动进度100%。运动曲线可以通过拖动红色控制节点进行编辑,实现不同运动特征的运动。

4.gif


添加了运动曲线后,左侧对应的的属性列表会显示一个关闭按钮,表明该属性已经指定了一个自定义的运动曲线。每一个列出的属性(例如宽度、透明度、滤镜等),都可以定义自己独立的运动曲线。如果没有指定,对应的属性就会采用默认属性的运动曲线。如果没有指定默认运动曲线,则会采用线性运动曲线。

如果关键帧动画包含有多个关键帧动画,运动曲线会显示为多段。每一段都由首尾两个节点来分割。其中,显示为绿色的为当前正在编辑的关键帧动画段。点击任意曲线段可以切换当前编辑的动画段。如果想要只显示当前动画段,可以切换曲线上方“显示所有关键帧”选项。

5.gif


运动曲线编辑目前支持关键帧动画和变形动画,并支持如下参数的动画曲线定制:


x偏移量
y偏移量
宽度
高度
透明度
旋转角度
滤镜(阴影、模糊、灰度、亮度、对比度、色调等)
变形动画参数(字体大小、字间距、行间距、填充颜色、线条颜色等)



下面是2个常见的运动曲线的例子:

自由落体:自由落体可以由在水平方向上的匀速运动和在垂直方向上的加速运动来模拟。其运动曲线类似下图:

6.gif


缓动进度:这是一种常见的进度显示方式,即一个减速移动,连接一个匀速缓动,再连接一个加速移动。其运动曲线类似下图:

7.gif


上述提供的演示地址包含了这两种运动的实现方法和效果。

在连接多段运动曲线时需要注意,由于控制自由度的限制,有时候为了实现平滑的多段运动,需要调整关键帧的位置或者每一段运动的位移数值,以便对运动速度进行微调,实现想要达到的运动效果。

4.1.13【新功能教程】文字变形动画

原创分享mingyueliu 发表了文章 • 0 个评论 • 5665 次浏览 • 2018-08-17 17:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程

编辑地址(第4页):
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

变形动画新增对文本的支持。即:可以为文本添加变形动画, 并在关键帧上设置文本的属性进行变形动画。目前支持的文本变形动画的属性有:


字体颜色
字体大小
行间距
字间距
滤镜效果


4.1.12【新功能教程】投票、抽奖实时数据管理

原创分享mingyueliu 发表了文章 • 0 个评论 • 5911 次浏览 • 2018-08-17 17:13 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 设计师可以通过实时数据管理的功能,用来管理投票、抽奖的当前数据(被投票对象的当前票数,奖品剩余数量以及领奖码剩余数量).

演示地址:http://cn.mugeda.com/animation/edit/ed60ab32

以投票为例:
现在舞台上已经生成了一个标准的投票组件以及给一个按钮绑定了抽奖的行为,当用户发生投票行为时,被投票目标的票数会在当前基础上+1,,假如现在有北京,上海两个投票对象,假如北京目前所得票数为100,现在我们想把北京所得的票数改为50,通过实时数据管理即可轻松修改。

1.gif


首先点击管理实时数据,会弹出如下对话框。

2.gif


我们现在想要把北京改为50票,只需要把北京后面的输入框内的数值改为50,点击确定即可。

3.gif


保存以后,打开作品,会发现北京的票数由原先票数改变成了50票。

4.gif


同样的,通过抽奖组件的实时数据管理,可以去修改奖品的剩余数量以及领奖码的剩余数量。

5.gif

 

4.1.11【新功能教程】首页加载的静态导出

原创分享mingyueliu 发表了文章 • 0 个评论 • 4874 次浏览 • 2018-08-17 17:11 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。

目前符合条件的动画特征 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 动画导出器在动画导出的时候做一层检测,当用了首页作为加载的时候,符合条件的时候会将动画的首页在服务器上做静态的导出。静态导出的首页后,当用户打开动画,可以在第一时间看到首页,减少了以前黑屏的时间。

目前符合条件的动画特征:

组件只包含文字、图片、形状、元件、组

填充效果只支持纯色填充、图片背景填充

动画支持关键帧、形状、变形的线性变换

支持组件的2d定位

所有使用的图片的总面积不大于某个阈值

支持新的预定义文字——加载进度,取值0到100

文字组件支持非云字体

屏幕适配支持默认

不含有交互特性(如行为、预置动画)

动画在导出或者发布的时候,如果上述条件满足,则自动将首页作为加载做静态导出。可以观察到的特征是:
导出:在导出包里出现了新的文件msl.js。
发布:查看msl.js链接的存在性。例如:发布地址是http://xxx.xxx.xxx/xxxx/xxxx/index.html,查看http://xxx.xxx.xxx/xxxx/xxxx/msl.js的存在性。

4.1.10【新功能教程】滤镜效果

原创分享mingyueliu 发表了文章 • 0 个评论 • 5592 次浏览 • 2018-08-17 17:09 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜:

查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 编辑地址:
http://beta.mugeda.com/animation/edit/d76c44f6
演示地址:http://b13b5c18.u.mgd5.com/cam ... .html

目前支持如下滤镜:


灰度 Grayscle
亮度 Brightness
对比度 Contrast
饱和度 Saturation
色调 Hue
模糊 Blur
阴影 Shadow
泛黄做旧 Sepia
负片 Invert



为了给元素添加滤镜,选中元素后,在属性面板选择想要添加的滤镜效果,然后点击“+”图标即可将指定的滤镜效果添加到元素上。

1.gif


根据需要,可以添加1个或者多个滤镜效果。每一个添加的滤镜都可以通过调节滤镜参数来调整滤镜的渲染效果。例如,模糊滤镜可以调节模糊程度。其中,阴影滤镜包含有多个参数,可以将鼠标移动到阴影效果上显示参数并编辑。

2.gif


如果不想要使用一个已经添加的滤镜效果,可以通过对应的滤镜效果右侧的删除按钮移除。

3.gif


滤镜效果也支持动画。即:在关键帧上添加的滤镜效果,可以在关键帧动画时进行插值,实现滤镜效果的动画渲染。在动画插值过程中,如果某个关键帧上没有添加指定的滤镜,那么将会采用默认滤镜效果参数进行插值。例如:

如果第1个关键帧添加了100%的灰度,而第2个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认灰度(0%)进行插值;

如果第2个关键帧添加了8像素的模糊,而第1个关键帧没有添加灰度滤镜,那么在动画过程中,第二个关键帧将会用默认模糊(0像素,即没有模糊)进行插值;

其它的以此类推。

目前滤镜效果的局限是,由于安卓和iOS手机上仅支持CSS滤镜,不支持Canvas滤镜,
因此手机上需要用Canvas进行渲染的部分(例如遮罩和截屏)暂时不支持滤镜,这一
点在使用中需要注意。

4.1.8【新功能教程】辅助线功能

原创分享mingyueliu 发表了文章 • 0 个评论 • 5787 次浏览 • 2018-08-17 16:12 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。






具体使用方法
1、绘制一 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 辅助线的作用于photoshop里的辅助线功能类似,开启辅助线后,设计师在拖拽物体至辅助线时,物体会自动停靠至辅助线位置,,辅助线仅仅在ide内可以看到,,渲染后的作品看不到辅助线。

1.gif


具体使用方法
1、绘制一条辅助线
按住alt键不要松开,然后在舞台上拖拽鼠标左键至某个方向(上下左右),即可绘制出一条辅助线。

2.gif


当鼠标移动至辅助线附近时,即可拖动辅助线,同时显示鼠标所在辅助线的坐标.

2、隐藏\显示辅助线及删除辅助线的几种方法

拖拽辅助线的时候,,和pshotoshop一样,将辅助线拖拽至舞台之外即可删除辅助线。

3.gif


4.gif


也可以通过视图菜单中的删除所有辅助线进行删除。

5.gif


6.gif


点击工具栏中的辅助线工具,即可快速显示\隐藏所有辅助线,也可以通过视图菜单中的辅助线选项,来进行显示隐藏。
 

3.2.2 UI原型:用Mugeda巧做GIF

原创分享mingyueliu 发表了文章 • 0 个评论 • 3844 次浏览 • 2018-08-17 16:02 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法:

1.序列帧动画导出GIF动画

如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​

 下面我们介绍用Mugeda导出GIF动画的方法:

1.序列帧动画导出GIF动画

如图,以序列帧形式添加几张图片至舞台,使其形成一个整体的动画效果
导出GIF动画步骤:文件→导出→GIF动画注意:所有导出只支持导出第1页

11.png


可修改舞台大小改变导出的GIF动画大小

22.png


2.关键帧动画导出GIF动画

同时,我们也可以在第1页制作一个关键帧动画,点击文件→导出→GIF动画,同样可以导出GIF动画

33.png


3.元件动画导出GIF动画

我们制作一个车轮360度旋转的元件动画

44.png


将该元件放置舞台第1页(对齐小汽车元素合适的位置),同时在舞台上制作一个小汽车从左到右移动的关键帧动画效果

55.png


点击:文件→导出→GIF动画,同样可以导出GIF动画
注意:舞台帧数大于等于元件内帧数

66.png


4.曲线变形动画导出GIF动画舞台上的曲线变形动画可以导出GIF动画,元件内的曲线变形动画则不可以导出

77.png


5.进度动画导出GIF动画

如图,我们将需导出的进度动画移至第1页,点击:文件→导出→GIF动画,导出GIF动画

88.png


以上列举了一些支持导出GIF动画的几种形式,如下图,是一些不支持导出GIF动画的形式

99.png

 

3.1.11【展示动画】小爷吴亦凡

原创分享mingyueliu 发表了文章 • 1 个评论 • 5646 次浏览 • 2018-08-17 15:57 • 来自相关话题

要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。






上传视频素材
注意:为防止视频在不同手机的不兼 查看全部
要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例的原理是用陀螺仪控制舞台上的图片或视频。
 
在讲解本案例之前,我们首先需熟悉陀螺仪旋转轴的原理,如下图解释了陀螺仪控制手机如何绕X、Y、Z轴旋转的情况。

1.png


上传视频素材
注意:为防止视频在不同手机的不兼容性,我们在制作案例前可先将视频导成序列帧的形式再上传进编辑页面

2.png

 
在舞台上添加一个陀螺仪,选择旋转类型,如下图为“绕Y轴旋转角”,同时将其命名为“Y”

3.png


设置关联属性

选择视频素材,点击其“左”属性右边的“关联”按钮,设置关联属性:
参考物体:“Y” 
参考属性:“文本取值” 
关联方式:“控制点插值”
 主控量:“-40” 
被控量:“0” 
主控量:“40” 
被控量:“-1198” 
(注意:具体数值可提前在手机上观察得出)

4.png

 
同时添加另外一个陀螺仪,设置其类型为“绕X轴旋转角”,为其命名为“X”。

5.png


选择视频素材,点击其“上”属性右边的“关联”按钮,
 
设置关联属性:
参考物体:“X” 
参考属性:“文本取值” 
关联方式:“控制点插值”
主控量:“20” 
被控量:“0” 
主控量:“80”
被控量:“-173”

6.png

 

3.1.10【展示动画】拖动长图类H5制作

原创分享mingyueliu 发表了文章 • 0 个评论 • 8739 次浏览 • 2018-08-17 15:50 • 来自相关话题

 要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面






可为每个素材添加预置动画效果






将“点击”图标右键转换为元件,双 查看全部
 要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
设置首页
如下图,点击“导入Photoshopshop(PSD)素材”按钮,将PSD格式内的图片素材原位置“分层导入”编辑页面

1.png


可为每个素材添加预置动画效果

2.png


将“点击”图标右键转换为元件,双击在元件页面为其设置一个放大缩小的动画效果。点击回到舞台后可重新为其添加一个预置动画效果。

3.png


设置长图元件动画

新建图层,在第3帧插入帧,插入关键帧,同时添加进长图背景素材

4.png


将背景图片右键转换为元件,进入元件页面。
新建图层,分层导入其他图片素材。

5.png


为所有素材图层插入关键帧动画,分别设置素材的动画效果,例如给人物素材设置放大缩小动画,为“向左滑动”图标设置向左滑动动画效果。

6.png


回到舞台,补全所有图层的帧数,为长图元件添加预置动画,如图为“向右移入”

7.png


如下图,为“点击”图标添加“点击跳转到第3帧并停止”的行为。同时新建图层“行为层”,添加矩形,为其添加一个“出现即暂停”的行为。注意随时保存作品。

8.png


选中长图元件,在其属性栏内设置“拖动/旋转”为“水平拖动”

9.png


设置点击出现提示效果
新建图层“提示层”,在第4帧插入空白关键帧,同时导入原先预备好的提示素材。可为其添加预置动画效果等。

10.png


新建两个按钮层,分别在一个图层的第3帧放置“分享”按钮,在另一个图层第4帧提示页面放置一个“返回”按钮。

11.png


补全“行为层”及其他图层帧数,为其中一个需提示介绍的人物素材添加“点击跳转到第4帧并停止”的行为

12.png


为第4帧的“返回”按钮添加“点击跳转到第3帧并停止”的行为。即为第一个人物素材设置好了提示出现和消失的动画,同理可为接下来的人物素材设置提示出现消失的动画。

13.png


设置分享动画的提示:如下图,新建“分享”图层,添加分享提示的素材,命名为“分享”,将其移至舞台之外。

14.png


为“分享”按钮添加“改变元素属性”行为属性控制→改变元素属性→触发条件:点击。 设置“参数” 元素名称:“分享” 元素属性:“左” 赋值方式:“用设置的值替换现有值” 取值:“0”

15.png


16.png


同理为“分享”素材组合添加“点击改变其左坐标为‘1000’”的行为,即点击将其移至舞台之外。

17.png

 

3.1.9【展示动画】科幻风格H5的制作

原创分享mingyueliu 发表了文章 • 0 个评论 • 6409 次浏览 • 2018-08-17 15:44 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​1. 制作科技感走线动画(进度动画)

如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性






然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​1. 制作科技感走线动画(进度动画)

如图,我们可以选择曲线工具、节点工具在舞台上画一个折线,同时可以调节折线的颜色等属性

1.png


然后在时间轴上右键→插入帧→右键→插入进度动画
即可制作出一个自动绘制折线的炫酷动画

2.png


我们新建5个图层,分别在每个图层上绘制一条直线

3.png


为第一条直线的某个时间段插入进度动画:右键→插入进度动画→(在特定帧数上)右键→插入关键帧

4.png



同理分别为其他几条线插入进度动画,制作出直线一条条绘制出来的炫酷效果

5.png


也可新建图层,在合适的位置添加相关图片素材等

6.png


2. 制作酷炫logo动画(进度动画)

同理,我们也可以用进度动画制作相关logo的绘制效果。
如下图,我们使用曲线工具、节点工具在舞台上绘制一个Mugeda的logo图形

7.png


为其添加进度动画

8.png


3. 制作酷炫酒瓶走光动画(遮罩动画)

我们先用曲线工具绘制一个酒瓶形状,同时新建图层2,将酒瓶复制粘贴进图层2


9.png


选中图层2,将其物体的填充色去掉,只剩下边框

10.png


在图层2下面新建图层3,添加一个矩形,在其属性栏的填充颜色内选择“线性”,制作白色光亮效果

11.png


为所有图层添加帧,为图层3的光亮物体制作一个从上往下移动的动画效果

12.png


选中图层2,将其转换为“遮罩层”

13.png


我们可先将图层1的物体移至最后一帧以防其阻挡走光效果。
最后可点击预览效果。

14.png


3.1.8【展示动画】一只挖空心思的行礼箱 

原创分享mingyueliu 发表了文章 • 0 个评论 • 6006 次浏览 • 2018-08-17 15:39 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1.制作元件动画

如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面






如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 1.制作元件动画

如图,添加一张图片素材,调整舞台大小使其符合素材大小,同时右键将图片素材转换为元件,双击元件进入元件编辑页面

1.png


如图,在元件第20帧插入帧,插入关键帧动画。
选中变形工具,按住Ctrl键将中间的控制原点移至舞台右侧中间位置

2.png


分别选中第一帧、最后一帧,改变其“Y轴旋转”为“-90”“90”

3.png


4.png


可点击“预览”观察元件动画的效果

同时我们在帧数的中间位置(图片正居舞台)插入关键帧,调整“透视度”为“50”

5.png


如下图,我们新建多个图层,复制图层0上的所有帧,分别粘贴进每一个图层内

6.png


如下图,在图层8上,删除除第一帧之外的前半部分帧数,同时修改第一帧的“Y轴旋转”为“0”

7.png


8.png


同理,分别删除图层7、6、5、4前半部分的一些帧如下图,分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”

9.png


移动图层2、1、0上的关键帧如下图位置,即在前面分别插入2、4、6帧

10.png


新建图层9,在与图层0第一帧相同帧数上插入一个矩形,调整颜色如下图,制作一个光韵矩形。

11.png


如下图为光韵矩形也设置相同的翻页动画,调整其第一帧关键帧的“Y轴旋转”为“-90”,调整其最后一帧关键帧的“Y轴旋转”为“0”,同时在最后插入一个空白帧。

12.png


如下图,隔图层复制光韵图层及帧。

13.png


之后,可双击元件每个图层的物体,分别进入各自的组,添加相对应的素材。
即做好一个元件动画。

14.png


2.制作“左右滑动预览”动画

回到舞台,新建一个图层,添加“左右滑动预览”指示图标、一个文本框、两个定时器
分别为文本框、两个定时器命名为“关联数值”“加”“减”

15.png


改变文本框数值为“10”。点击其“添加/编辑行为”按钮,添加两个行为:

属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:加
设置状态:暂停记时器

16.png


17.png


属性控制→设置定时器 →触发条件:出现 →设置“参数”:
定时器名称:减
设置状态:暂停记时器

18.png


为“加”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:0.01

19.png


20.png


同理,为“减”定时器添加行为
属性控制→改变元素属性 →触发条件:属性改变 →设置“参数”:
元素名称:关联数值
元素属性:文本取值
赋值方式:在现有值基础上增加
取值:-0.01

21.png


设置元件的动画关联如下图:
关联对象:关联取值
关联属性:文本取值
开始值:10
结束值:0
播放模式:同步

22.png


为元件添加六个行为,分别为
“向左滑动‘加’定时器继续计时”
“向左滑动‘减’定时器暂停计时”
“向右滑动‘减’定时器继续计时”
“向右滑动‘加’定时器暂停计时”
“点击暂停‘加’定时器”
“点击暂停‘减’定时器”

23.png


为文本框添加两个控制定时器的行为:

属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:减
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:小于等于
参考值:0

24.png


25.png


属性控制→设置定时器→触发条件:属性改变→设置“参数”
定时器名称:加
设置状态:暂停记时器
执行条件:检查元素状态
元素名称:关联数值
参考属性:文本取值
逻辑条件:大于
参考值:10

26.png

 

3.1.7【展示动画】2016网易娱乐圈画传

原创分享mingyueliu 发表了文章 • 0 个评论 • 5759 次浏览 • 2018-08-17 15:19 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图






在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)






如下图为两个图层第50帧位置上插入 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
1.制作缩放动画
 我们先在图层1添加第一张图

1.1_.png


在图层2添加第二张图,将第二张图放大,使其放置第一张图的画面大小符合舞台(即与图层1第一张图大小画面重合)

1.2_.png


如下图为两个图层第50帧位置上插入帧,在图层1上第二帧插入一个空白帧使其只出现在第一帧上,为图层2插入关键帧动画,在最后一帧关键帧上调整第二张图片的大小使其符合舞台

1.3_.png


如图我们新建图层3,在最后一帧插入空白帧,添加进第三张图片,调整图片大小使其放置第二张图的位置大小符合舞台(即与图层2最后一帧图片大小画面重合)

1.5_.png


同理我们在三个图层第100帧位置上插入帧,为图层2、3插入关键帧动画,分别在其最后一帧关键帧上缩小图片,使第三张图的大小符合舞台

1.6_.png


同理新建图层4添加第四张图片,制作动画效果,此处不详述。

1.7_.png


2.制作“长按按钮播放动画”效果

如图,新建图层,添加一个按钮元素

1.8_.png


新建“行为层”添加一个矩形,设置矩形“出现即暂停”行为,同时在该图层第二帧添加一个空白帧,使该行为只使用在第一帧

1.9_.png


为按钮素材添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。
 
 

3.1.6【展示动画】长按手指控制动画播放 

原创分享mingyueliu 发表了文章 • 1 个评论 • 7642 次浏览 • 2018-08-17 15:15 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为






选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“ 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 本案例将讲解“长按手指播放动画、手指抬起动画暂停”的动画效果

1.控制舞台动画
我们首先在舞台上添加一个矩形,设置“出现即暂停”的行为

1.png


选择最上图层,在舞台需手指按住的位置上添加一个矩形,设置其透明度为“0”

2.png


随后为该透明矩形添加两个行为:
动画播放控制→播放→触发条件:手指按下;
动画播放控制→暂停→触发条件:手指抬起。

3.png


2.控制元件动画
首先,我们可在舞台上添加一个元件动画,如下图,为其命名为“麦穗”

4.png


回到舞台,继续为控制矩形添加两个行为,即“手指抬起即暂停”“手指按下即播放”

5.png


分别在这两个行为的“参数”对话框内设置“作用对象”为“麦穗”

6.png


3.控制提示元素
如下图,在舞台上添加一个“要一直按住才会播放哦”的提示语,为其命名为“提示”

7.png


为控制矩形再添加两个行为:
1.属性控制→“改变元素属性”→触发条件:手指按下→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“0”

8.png


9.png


2.属性控制→“改变元素属性”→触发条件:手指抬起→设置参数
元素名称:提示
元素属性:透明度
赋值方式:用设置的值替换现有值
取值“100”

10.png


这样,一个“长按手指控制动画播放”的效果已做好。

【Mugeda新功能】声音更新功能一览

培训教程songyue 发表了文章 • 9 个评论 • 7834 次浏览 • 2017-04-19 11:09 • 来自相关话题

声音增加了如下功能: 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联(控制)元素属性 
4) 用元素属性关联(控制)声音播放位置
 
示例:http://beta.mugeda.com/client/ ... 5826a 
编辑链接:http://beta.mugeda.com/ 查看全部
声音增加了如下功能: 
1) 控制音量 
2) 控制播放位置 
3) 用声音播放位置关联(控制)元素属性 
4) 用元素属性关联(控制)声音播放位置
 
示例:http://beta.mugeda.com/client/ ... 5826a 
编辑链接:http://beta.mugeda.com/animation/edit/a675826a
 
在“控制声音”的行为中增加了对音量和播放位置的控制。这两个控制和“控制方式”参数独立,并不依赖于声音播放状态。例如,如果声音目前没有播放,并且设置了播放位置为第2秒,那么声音将会在下一次播放的时候从第2秒开始播放。
image001.png

 
选中声音对象,可以对其进行播放位置的关联,其关联方式类似于对动画播放进行关联控制。
image003.png

 
也可以将某个元素的属性和声音播放的进度关联在一起,这样,声音播放进度(取值为0~100)将可以用来控制元素的属性。
image005.png

 

 

【Mugeda新功能】连线组件的使用

培训教程songyue 发表了文章 • 0 个评论 • 9156 次浏览 • 2017-04-19 10:49 • 来自相关话题

连线组件用来在一些特定场合(例如教育类测试课件)的内容中允许用户用连线来连接两个元素,从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址: http://beta.mugeda.co 查看全部
连线组件用来在一些特定场合(例如教育类测试课件)的内容中允许用户用连线来连接两个元素,从而实现特定的交互效果。下面用实例来说明如何使用连线组件。
 
示例地址: http://b13b5c18.u.mgd5.com/cam ... .html 
编辑地址: http://beta.mugeda.com/animation/edit/c36da7fa
 
1、首先在工具栏选择连线组件。
image001.png

在舞台上绘制连线组件,和绘制直线是一样的。区别是: 
*连线元素绘制后,具有自身的一些特殊属性(下面会提到); 
*绘制在舞台上的连线,只是代表了连线时的初始位置,用于给用户提示;
 
2、绘制好后,可以对其进行属性配置。
image003.png

 
各个属性说明如下: 
1) 显示端点提示:是否在连线的端点提供一个脉动的圆形动画提示用户连线; 
2) 提示颜色:端点提示的颜色; 
3) 允许多线链接:打开之后连线允许同时停留在多个停靠位置 
4) 停靠位置:希望连线连接成功的命名元素的列表。连线只能和列表里面的元素连接成功;
 
在渲染的时候,可以用鼠标(PC)或者手指(手机)按住某一个连线的任意位置拖动连线。当连线的端点靠近了一个设置好的停靠位置时,连线会自动吸附到该停靠位置。这时候如果松开鼠标或者手指,就可以连线成功。连线成功成功后,可以继续拖动连线进行修改。如果一个连线预先设置了多个连线停靠位置,前一个连线成功后,后一个连线会出现在初始位置,提示用户还可以继续连线。直到所有连线都成功为止。
image005.png

 
3、连线的结果可以通过下面的方式来获取(假如连线元素的名称是"连线") 
{{连线}}: 连接成功的第一个命名元素的名称 
{{连线.0}}, {{连线.1}}, {{连线.2}}: 连接成功的第0,1,2个命名元素的名称 
如果连线没有成功,上面的表达式返回空字符串("")。
 
为了支持自动化处理,行为触发条件中增加了“连线完成”。该选项仅对连线元素有效。下图示范了如何利用该条件进行行为处理。
image007.png

 
连线上的行为新增了一个判断条件’停靠物体名称’。如下图所示,这样的设置,让这个行为只是当连线连到’红色2’的这个物体上才会触发。如果停靠物体名称不选择任何物体,那么停靠到所有的停靠物体上面都有效。
image009.png

 
 

【Mugeda新功能】抽奖组件使用

培训教程songyue 发表了文章 • 11 个评论 • 8595 次浏览 • 2017-04-19 10:25 • 来自相关话题

演示地址:http://beta.mugeda.com/client/ ... 91ea1 
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
 
抽奖组件具体使用方法:
1、首先在工具栏中选中抽奖组件.





2、然后会弹出抽奖组件的配置 查看全部
演示地址:http://beta.mugeda.com/client/ ... 91ea1 
编辑地址:http://beta.mugeda.com/animation/edit/9b591ea1
 
抽奖组件具体使用方法:
1、首先在工具栏中选中抽奖组件.
1.png


2、然后会弹出抽奖组件的配置.
image003.png

开始时间和结束时间:是指抽奖发生时,如果抽奖在时间范围内则可以抽奖,否则不可以抽奖. 
允许重复抽奖次数:限制用户抽奖的次数,如果超过设置的值则不可以抽奖 
再次抽奖等待时间:限制用户多次抽奖时间间隔,单位为(秒),用户的多次抽奖时间间隔不能超过这个设置 
抽奖模式:即抽即中、均匀分布 
安全验证:如果开启了安全验证, 用户在抽奖的时候需要输入验证码,验证码输入正确才给抽奖
奖项设置:一行一个奖项,格式为: [奖品名次:奖品名称:奖品数量] ,例 
1:一等奖:10 
2:二等奖:100 
3:三等奖:1000
领奖码(非必填):一行一个领奖码,格式为:[奖品名次:领奖码:奖品数量] ,例:
1:lingjiangma1:10 
2:lingjiangma2:100 
3:lingjiangma3:1000
奖品的名次对应奖项设置中的奖品名次,领奖码可以设置为任意不重复的值,如果配置了领奖码这个选项,当中奖的时候,中奖信息中会携带所对应的领奖码,比如抽奖时中了一等奖,那么对应的领奖码就是 lingjian
 
3、以上配置完成后,点击确认按钮即可生成一个完整的抽奖组件.  
 
4、设置4个文本框用来显示抽奖的结果,设计师可根据文本框内的内容来进行判断,然后进行样式的设计.
2.png

设置完以后分别给文本框进行命名,用来绑定抽奖组件.
 
5、绘制一个物体,用来充当抽奖按钮
3.png


6、选中绘制出的物体,给物体增加抽奖行为
4.png


然后编辑抽奖行为
image011.png

抽奖组件选择刚刚的生成的抽奖组件
 
显示抽奖结果类别:抽奖的结果会显示在指定的文本框内, 如果抽奖结果为-1代表没有中奖,如果是0那么他就中了一等奖,如果是1那么就是二等奖,以此类推,设计师可根据返回的数字进行判断来决定样式 
显示抽奖结果文本:假如中了一等奖,一等奖对应的名称是小米手机,那么对应的文本框内就会显示小米手机
显示抽奖凭据:如果设置了领奖码,假如一等奖对应的领奖码是 yidengjiang1 那么这个领奖码就会显示在对应文本框内
显示剩余抽奖次数:会在对应文本框内显示用户还有几次抽奖机会
绑定表单提交:如果页面上有物体绑定了提交表单行为,如果配置了这个选项,用户在提交表单的时候,会偷偷的把抽奖结果信息绑定到表单上作为附加信息提交.

用户使用木疙程序制作投票、抽奖等数据组件时,木疙瘩不承担由于黑客或设置出错导致的经济损失.
 

Mugeda新功能教程:投票组件的使用

培训教程songyue 发表了文章 • 1 个评论 • 10883 次浏览 • 2017-01-23 15:59 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
(点击图片看大图)

 1. 添加一个投票组件:




 
2. 按照提示完成投票的设置:




 
3. 确认投票数据设置后,会在舞台上生成一个投票组件,并且会自动命名(投票1),同时会在数据库上注册一个投 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
(点击图片看大图)

 1. 添加一个投票组件:
1.jpg

 
2. 按照提示完成投票的设置:
2.jpg

 
3. 确认投票数据设置后,会在舞台上生成一个投票组件,并且会自动命名(投票1),同时会在数据库上注册一个投票数据点。注意,投票组件是一个服务器数据组件,在内容展示时不会出现。为了能够投票,还需要添加投票行为:
3.jpg

 
4. 添加3个文字对象,投票给上海、投票数、是否投票。分别对应的功能为:投票按钮、显示“上海”的投票数,和显示当前用户是否给“上海”投过票。后两个文字对象需要命名,后面要引用:
4.jpg

 
5. 为投票按钮添加“投票”行为:
5.jpg

 
6. 编辑投票行为进行设置。其中,投票对象是上面添加的投票数据对象;显示结果对象和显示是否投票分别对应上面添加的对应文字对象:
6.jpg

 
7. 设置成功后就可以进行投票了。投票结果会显示在对应的文字信息中便于后续处理,同时会根据投票设置显示相应的结果文字,便于用关联、条件等方式控制更多的交互行为:
7.jpg

 

【必看帖】关于H5中声音和视频的处理,看过的问题都解决了!

培训教程songyue 发表了文章 • 2 个评论 • 13960 次浏览 • 2016-12-22 16:26 • 来自相关话题

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压 查看全部
想要了解更多Mugeda功能?>>>猛戳我,学习更多教程
 
本节视频教程请点击此处。
 
本节涉及知识点:图片压缩、声音压缩、视频压缩
 
图片压缩: 
https://tinypng.com/ 可以对图片进行压缩处理,而且质量不会降低。把要压缩的图片拖动到方框内,即可开始压缩,如图:
1_(1).png

 
压缩好,点击【Downloud】下载到电脑的指定位置,如图:
2_(1).png

 
声音压缩: 
推荐大家【Audacity】这个软件,如图:
3_(1).png

 
把要压缩的声音拖到灰色区域,就能上传并开始编辑,如图:
4_(1).png

 
用选择工具选中音轨中不需要的部分,【Delete】就可删除,如图:
5_(1).png

 
点击放大镜,可以放大音轨,如图:
6.png

 
给声音加特效,需先选中需要添加特效的音轨部分,点击【特效】,如图:
7.png

 
把立体声分离成单声,可以让声音文件变得更小,如图:
8.png

 
在能保证声音质量的前提下,可删除其中一个声道,如图:
9.png

 
【文件】—【导出】,在弹窗的右下角【选项】,可以对声音质量进行选择,数字越小,表示声音质量越差,文件尺寸越小,一般默认为24,如图:
10.png

 
【声道模式】选择【合并立体声】,如图:
11.png

 
视频压缩: 
推荐大家用Freemake Video这个软件,它在压缩的质量和大小上都不错,如图:
12.png

 
左上角【视频】可以导入视频,视频右侧【小剪刀】可裁剪视频,如图:
13.png

 
如果只保留前10秒视频,先定位在10s的位置,单击【开始选取范围】,如图:
14.png

 
单击【移动至选取范围的开始】,即此时的点是要裁剪视频的开始,如图:
15.png

 
把鼠标移动到要裁剪内容的末尾,点击【剪下选取范围】,如图:
16.png

 
只保留了前10s的视频,点击右下角【ok】,完成裁剪,如图:
17.png

 
该软件提供了很多格式的导出,如图:
18.png

 
如果要导出MP4,点击【编辑预先设定】按钮,如图:
19.png

 
点击【转换】,画面大小可以自定义,视频编码器一定要选【H.264】,如图:
20.png

 
比特率类型,设置越大导出的视频文件也就越大,如图:
21.png

 
关于视频中音频的设置,音频解码器一定要选择【AAC】,其他可根据自己的需求设置,如图:
22.png

 
特别注意:在H5导入的视频,视频编码器一定要设置成【H.264】,音频编解码器一定要 设置成【AAC】。
 

2.3.13 动画:复制帧粘贴帧

培训教程songyue 发表了文章 • 4 个评论 • 9939 次浏览 • 2016-12-20 17:00 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程   
 
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧: 
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:




 
在没有帧的地方, 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程   
 
本节知识点:复制帧-粘贴帧、复制关键帧-粘贴关键帧、复制多个图层-粘贴多个图层  
 
复制帧-粘贴帧: 
选择某一个图层的全部帧,全选后时间线呈草绿色,右键选择【复制帧】,如图:
1.png

 
在没有帧的地方,右键【粘贴帧】,如图:
2.png

 
这时候刚才的一整段动画就被粘贴过来了,如图:
3.png

 
选中第一个空白关键帧,右键【删除帧】,就会得到与复制动画完全一致的一整段动画,如图:
4.png

 
复制关键帧-粘贴关键帧: 
选中关键帧,右键【复制关键帧】,如图:
5.png

 
选择要粘贴的位置,右键【粘贴关键帧】,如图:
6.png

 
注意,不能把关键帧粘贴在另外一段动画的时间单元里,否则会出现如下提示,如图:
7.png

 
目前,不支持复制一个图层的多个关键帧,如图:
8.png

 
则会出现如下提示,如图:
9.png

 
但支持同时复制多个图层的关键帧,如图:
10.png

 
然后选择要粘贴的位置,右键【粘贴关键帧】,如图:
11.png

 
复制多个图层-粘贴多个图层: 
选中所有的4个图层,右键【复制帧】,如图:
12.png

 
另外新建4个图层,如图:
13.png

 
选择最上面图层第2个没有帧的地方,【右键】粘贴站,如图:
14.png

 
复制的4个图层的全部内容全部都粘贴过来了,如图:
15.png

 

2.1.12 界面与舞台:加载的相关设置

培训教程songyue 发表了文章 • 0 个评论 • 5012 次浏览 • 2016-12-13 14:53 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 说明:浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作,具体步骤如下:  
1、加载页面默认是进度条,如图:




 
2、样式、提示文字、文字大小均可自由设置,如果设置了动态 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 说明:浏览器100%才能看到加载页面的设置
 
本节视频教程请点击此处。
 
加载页面的制作,具体步骤如下:  
1、加载页面默认是进度条,如图:
1.png

 
2、样式、提示文字、文字大小均可自由设置,如果设置了动态文字,在页面加载的时候,可以看到文字在动,如图:
2.png

3.png

 
3、图片位置,设置的值越大,前景图片的位置越靠下;图片宽度设置的值越小,前景图片的尺寸就越小,如图:
4.png

 
4、当然你还可以在首页里自己制作加载页,只需要在右侧的样式中设置【首页作为加载页面】,如图:
5.png

 
5、除了自己制作,还可以从Mugeda模板里添加加载页,如图:
6.png

 
Mugeda提供丰富的加载界面模板,除此之外还有表单、交互、逻辑判断等模板供大家免费使用,如图:
7.png

 
点击【确定】添加加载界面到舞台上,并把添加的模板调整至首页,然后在样式上设置【首页作为加载界面】,如图:
8.png

 
关于Mugeda模板的更多使用方法,请点击这里学习。

 

 

2.1.14 界面与舞台:元件界面介绍

培训教程songyue 发表了文章 • 0 个评论 • 5400 次浏览 • 2016-12-13 14:36 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:




 
查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:新建元件、如何把新建元件添加到舞台、复制元件、新建文件夹、导出/编辑/删除元件
 
一、新建元件 
点击舞台右侧的元件面板,左下第一个按钮“新建元件”,如图:
1.png

 
默认命名为“元件1”,自动进入元件编辑界面,如图:
2.png

 
二、如何把新建元件添加到舞台? 
在元件编辑界面完成编辑后,点击页面回到舞台,如图:
3.png

 
把元件添加到舞台的方法有两种
1、鼠标放到元件上,成“十字”后拖动不放,到舞台再松开,如图:
4.png

 
2、点击元件面板下方的“添加到绘画板”按钮,也可把元件导入到舞台,如图:
5.png

 
三、复制元件: 
点击元件面板左下第二个“复制元件”,即可复制一个新的元件,默认命名为“元件2”,如图:
6.png

 
在复制元件,即“元件2”里进行修改,不会影响到“元件1”内的内容 ,如图:
7.png

 
四、新建元件文件夹: 
点击元件面板下方的“新建文件夹”按钮,可以在元件面板里添加文件夹,如图:
8.png

 
文件夹可以方便的对元件、视频、音频等进行管理,如图:
9.png

 
五、导出元件:
点击元件面板下方的“导出”按钮,如图:
10.png

 
如果想让同一个元件应用在不同的作品中,可以用导出功能。选择要导出的元件,点击“导出”按钮,如图:
11.png

 
在新建的作品里,就能看到刚才导出的元件,把它拖动到舞台上就可以使用了,如图:
12.png

 
六、编辑元件: 
编辑元件有多种方法,既可以点击元件面板下方的“编辑”按钮,也可以双击元件,进入到元件编辑界面,如图:
13.png

 
七、删除元件:
14.png

 
 

2.1.13 界面与舞台:物体属性设置

培训教程songyue 发表了文章 • 0 个评论 • 5377 次浏览 • 2016-12-13 14:21 • 来自相关话题

`想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板:




 
绘制图形 查看全部
`想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
本节视频教程请点击此处。
 
本节知识点:设置坐标,改变物体大小坐标、透明度、线条类型、填充、X/Y/Z轴旋转、端点、接合、背景图片、预置动画、组类型、结束时复位、运动
 
1、熟悉属性面板:
1.png

 
绘制图形,物体的属性都在右侧查找
2.png

 
2、设置物体大小和坐标:​
3.png


4.png

 
3、设置透明度:​
5.png


6.png

 
输入值的方式更准确
7.png

 
4、线条类型: 
包括实线、点线、虚线、点划线
8.png

 
5、填充:
9.png


10.png

 
6、X、Y、Z轴旋转:
11.png


12.png


7、端点: 
端点只能对在Mugeda绘制的线条进行设置,如图:
13.png

 
8、接合: 
对绘制物体的线条接合处进行设置,如图:
14.png

 
9、背景图片: 
在绘制图形里插入图片,还可以通过图片位置和尺寸进行其他设置,如图:
15.png


如果只想保留图片造型,可以通过把线条的颜色设置为空,如图:
16.png


10、预置动画: 
可以在属性面板上给物体添加预置动画,也可以用选择工具选中物体添加,如图:
17.png


11、组类型: 
物体成组后,可以对其进行裁剪内容的操作。如果物体有动画,则裁剪后会有类似遮罩动画的效果,但占用空间更小,推荐使用。
18.png


12、结束时复位: 
首先给物体添加“自由拖动”,然后再打开结束时复位开关,这样物体无论被拖动到什么位置,结束时都会恢复原位。
19.png

 
13、运动: 
属性面板中的运动类型,只有给物体添加了“关键帧动画”或“曲线变形动画”才会出现,而且鼠标要选中时间上的关键帧。
20.png


 

2.1.11 界面与舞台:关键帧和页面的命名

培训教程songyue 发表了文章 • 0 个评论 • 4631 次浏览 • 2016-12-08 14:54 • 来自相关话题

·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明,给关键帧命名,并实现跳转功能  
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:  
 
选择出现红色方框的关键帧,在关键帧处 查看全部
·想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​​
 
本节视频教程请点击此处。
 
1、用一个例子来说明,给关键帧命名,并实现跳转功能  
举例:点击右侧的图标(方块、圆、五角星),可以实现跳转到指定帧,具体操作步骤如下:  
 
选择出现红色方框的关键帧,在关键帧处命名“方块”,鼠标在空白处单击一下,如图:
1.png

 
命名成功后,关键帧上方会出现一个黄色的三角,如图:
2.png

 
同理,给出现蓝色圆形的关键帧命名“圆”,如图:
3.png

 
同理,给出现黄色五角星的关键帧命名“五角星”,如图:
4.png

 
然后依次给右侧图标添加跳转行为,选择红色方块,如图:
5.png

 
添加“跳转到帧并停止”的行为,触发条件为“点击”,如图:
6.png

 
点击编辑,在帧名称里选择“方块”,如图:
7.png

 
注:其他图标的行为添加方式相同,这里就不一一说明了  
 
给关键帧命名的好处:有时候我们要修改动画,删帧或者增帧,这时候如果采用的是跳转帧号的话,就要一个个去修改,很麻烦,给关键帧命名就方便多了。
 
如果既填写了帧号,又填写了帧名称,Mugeda会先找帧号,如图:
8.png

 
2、给页面命名  
Mugeda默认的页面名,以数字升序排列,把鼠标放到页面名处,就可更改页面名称,给第2页重命名为“尾页”,如图:
9.png

 
给红色方框添加“跳转到页”行为,如图:
10.png

 
在编辑里设置参数,页名称设置为“尾页”,如图:
11.png

 
与帧名称不同的是,如果既填写了页号,又填写了页名称,Mugeda会首先去找页名称。