Appearance
按钮特效
在制作过程中,有的按钮上需要一些简单的特效,用来增加交互体验。下方给提供了三种按钮效果。
闪烁
typescript
<iframe src="/docs/lm/box/datGuiGame.html?example=FlashEffect" width="690" height="690" frameborder="0"></iframe>
class FlashEffect extends LM.Scene {
init() {
//示例1: 闪光特效
let button = new LM.Button();
this.addChild(button);
button.backgroundColor = "#00ff00";
button.x = 500;
button.y = 100;
button.width = 300;
button.height = 300;
button.text = "闪光特效";
button.fontColor = "#ffffff";
button.fontSize = 50;
button.alignHorizontal = LM.ALIGN_HORIZONTAL.CENTER;
button.alignVertical = LM.ALIGN_VERTICAL.MIDDLE;
let FlashEffect = new LM.FlashEffect({
flashColor:"#ff0000",
flashTime:100,
flashDuration:300,
flashCount:3
});
button.addEffect(FlashEffect);
button.onClick(()=>{
console.log("点击了触发了闪光特效")
})
}
}涟漪
typescript
<iframe src="/docs/lm/box/datGuiGame.html?example=RippleEffect" width="690" height="690" frameborder="0"></iframe>
class RippleEffect extends LM.Scene {
init() {
//示例1: 涟漪特效
let button = new LM.Button();
this.addChild(button);
button.backgroundColor = "#ff0000";
button.x = 100;
button.y = 100;
button.width = 300;
button.height = 300;
button.text = "涟漪特效";
button.fontColor = "#ffffff";
button.fontSize = 50;
button.alignHorizontal = LM.ALIGN_HORIZONTAL.CENTER;
button.alignVertical = LM.ALIGN_VERTICAL.MIDDLE;
let rippleEffect = new LM.RippleEffect();
button.addEffect(rippleEffect);
button.onClick(()=>{
console.log("点击了触发了涟漪特效")
})
}
}脉动
typescript
<iframe src="/docs/lm/box/datGuiGame.html?example=PulseEffect" width="690" height="690" frameborder="0"></iframe>
class PulseEffect extends LM.Scene {
init() {
//示例1: 脉动特效
let button = new LM.Button();
this.addChild(button);
button.backgroundColor = "#0000ff";
button.x = 900;
button.y = 100;
button.width = 300;
button.height = 300;
button.text = "脉动特效";
button.fontColor = "#ffffff";
button.fontSize = 50;
button.alignHorizontal = LM.ALIGN_HORIZONTAL.CENTER;
button.alignVertical = LM.ALIGN_VERTICAL.MIDDLE;
let PulseEffect = new LM.PulseEffect({
minScale:0.7,
maxScale:1.3,
curveType:"sine"
});
button.addEffect(PulseEffect);
button.onClick(()=>{
console.log("点击了触发了脉动特效")
})
}
}