LayaAir 2.x引擎创建新项目HelloWorld，制作旋转动画效果、点击事件

1.LayaAir 2.x引擎创建一个空项目HellWorld：

 2.项目创建完成后新建页面/场景：

 3.设置场景的名称、大小：

 4.场景创建完成后给场景添加UI组件-Text：

 5.组件添加完成后可在选中组件设置组件的属性：

6.设置完Text组件的属性后，Ctrl+S保存，按F8进行编译，再按F6运行，可以选择Layaair调试或者Chrome调试（看自己需求），使用Layaair调试HelloWorld结果：

 

给场景添加脚本，通过脚本文件来设置场景样式内容，有安装vscode添加脚本文件后自动会打开vscode工具，这样一个HelloWorld脚本文件就创建完成了

 

 通过代码创建一个HelloWorld的场景，参考LAYABOX技术文档

//创建舞台，默认背景色是黑色的
Laya.init(600, 300);
var txt = new Laya.Text();
//设置文本内容
txt.text = "Hello World";
//设置文本颜色
txt.color = "#1ed76d";
//设置文本字体大小，单位是像素
txt.fontSize = 66;
//设置字体描边
txt.stroke = 5;//描边为5像素
txt.strokeColor = "#FFFFFF";
//设置为粗体
txt.bold = true;
//设置文本的显示起点位置X,Y
txt.pos(60, 100);
//设置舞台背景色
Laya.stage.bgColor = '#242936';
//将文本内容添加到舞台 
Laya.stage.addChild(txt);
//加载IDE指定的场景
GameConfig.startScene && Laya.Scene.open(GameConfig.startScene);

 再次编译后结果如下：

下面通过代码来渲染出一个旋转动画的效果以及给动画添加Laya.Event.CLICK点击事件

 

 具体代码如下

export default class HelloWorld extends Laya.Scene{
    constructor(){
        super();
        this.imgBtn = null;
    }
    onEnable(){
        // 创建一个按钮实例
        this.imgBtn = new Laya.Button;
        // 引入图片
        this.imgBtn.loadImage("image/1.png", Laya.Handler.create(this, this.onLoadedImage, [this.imgBtn]));
        // 设置大小
        this.imgBtn.size(110, 110);
        // 画布中心点
        this.imgBtn.centerX = 0;
        this.imgBtn.centerY = 0;
        // 设置X、Y轴点
        this.imgBtn.anchorX = .5;
        this.imgBtn.anchorY = .5;
        // 控制按钮显示
        this.imgBtn.visible = !0;
        // 添加按钮点击事件
        this.imgBtn.on(Laya.Event.CLICK,this,this.onClickBtn)
        // 使用Laya.Tween设置动画效果
        Laya.Tween.to(this.imgBtn, { rotation: 0 }, 1000, null, Laya.Handler.create(this, this.onRotate));
    }
    // 通过Laya.stage.addChild的方式添加到界面中
    onLoadedImage(t) {
        Laya.stage.addChild(t);
    }
    // 根据rotation值进行渲染旋转效果
    onRotate() {
        Laya.Tween.clearTween(this.onRotate);
        Laya.Tween.to(this.imgBtn, { rotation: 720 }, 3000, null, Laya.Handler.create(this, this.onRevolve));
    }
    onRevolve() {
        Laya.Tween.clearTween(this.onRevolve);
        Laya.Tween.to(this.imgBtn, { rotation: 0 }, 10, null, Laya.Handler.create(this, this.onRotate),10);
    }
    //  点击按钮触发事件
    onClickBtn(){
        this.imgBtn.loadImage("image/2.png", Laya.Handler.create(this, this.onLoadedImage, [this.imgBtn]));
    }
}