【Laya】按钮点击缩放效果
制作方法- 附加脚本
1. 在编辑模式里,创建一个附加脚本。 如图
2. 导出 -
3. 在代码模式下,创建脚本。
/**
* name
*/
module game{
export class ScaleButtonScript {
public delayTime: number = 0;
public minScale: number = 0;
private monkeyBox: Laya.Image;
constructor(){
}
/**
*设置owner函数,可以直接获取到添加附加脚本的组件实例
**/
public set owner(value: any) {
this.monkeyBox = value;
//自定义的脚本会有时序问题,所以在此添加一个延时
this.monkeyBox.frameOnce(2, this, this.onLoaded);
}
onLoaded(): void {
/* 设置按钮为单态按钮
** 取值:
** 1:单态。图片不做切割,按钮的皮肤状态只有一种。
** 2:两态。图片将以竖直方向被等比切割为2部分,从上向下,依次为弹起状态皮肤、按下和经过及选中状态皮肤。
** 3:三态。图片将以竖直方向被等比切割为2部分,从上向下,依次为弹起状态皮肤、经过状态皮肤、按下和选中状态皮肤
*/
//添加鼠标按下事件侦听。按时时缩小按钮。
this.monkeyBox.on(Laya.Event.MOUSE_DOWN, this, this.scaleSmall);
//添加鼠标抬起事件侦听。抬起时还原按钮。
this.monkeyBox.on(Laya.Event.MOUSE_UP, this, this.scaleBig);
//添加鼠标离开事件侦听。离开时还原按钮。
this.monkeyBox.on(Laya.Event.MOUSE_OUT, this, this.scaleBig);
}
private scaleSmall():void{
//缩小至0.8的缓动效果
Laya.Tween.to(this.monkeyBox, {scaleX:0.8, scaleY: 0.8}, 2);
}
private scaleBig():void{
//变大还原的缓动效果
Laya.Tween.to(this.monkeyBox, {scaleX:1, scaleY:1}, 2);
}
}
}
4. 脚本和设置已经完成, 这一步骤是 使用。
5. 完成了。。。。。