Skip to content

按钮特效

在制作过程中,有的按钮上需要一些简单的特效,用来增加交互体验。下方给提供了三种按钮效果。

闪烁

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("点击了触发了脉动特效")
        })
    }
}