[]LayaAir IDE 1.4.0新增功能 附加（扩展）脚本的使用

简单说明： 
  在LayaAir IDE 1.4.0版本中，我们提供了强大的脚本扩展功能，开发者可以直接修改组件行为，甚至增加新的属性，同时还可以添加多个附加脚本来扩展，功能强大便捷！
  扩展脚本和附加脚本的区别：扩展脚本继承自组件本身，附加脚本只修改组件，不继承
使用方式：
1、附加脚本（不继承，直接修改组件行为）
  这里我们来通过附加脚本制作一个ScaleButton
 a、文件-创建项目（以AS语言为例，JS/TS同理）
 

 b、项目面板右键->新建->页面/场景(ExpandPage)


 c、在舞台拖拽一个按钮（可以设置成自己喜欢的样式），并在项目面板右键->新建->脚本（附加脚本Btn）
 

 这时候会在项目面板生成一个.scrpt文件，如下



D、增加新的属性isScale（是否缩放）并保存文件


从项目面板中将附加脚本拖拽到组件身上，这个步骤即可将2者绑定（isScale=true允许缩放，isScale=false不允许缩放）


E、F12发布（记得给Button组件声明一个var，一会儿我们可以观察下2种脚本之间的继承关系），会发现以下报错，不用担心，这是因为项目中Btn的逻辑脚本是需要开发者自己来创建的，编辑器找不到


F、创建Btn逻辑脚本（game.Btn）


G、写类逻辑，实现按钮缩放控制(主类下需要对Animation用到的图集进行一次预加载，预加载完成后开始显示ExpandPage界面)

package game

{

    import laya.display.Sprite;

    import laya.events.Event;



    public class Btn

    {

        private var _owner:Sprite;

        private var _isScal:Boolean;

        public function Btn()

        {

            trace("btn的附加类已经开始执行");

        }

        //设置owner函数，可以直接获取到Button组件的实例

        public function set owner(v:Sprite):void

        {

            _owner = v;

            //由于时序问题，我们需要在此处添加逻辑代码，确保_owner不为null

            if(_isScal&&_owner)

            {

                _owner.on(Event.MOUSE_DOWN,this,onDown);

            }

            else

            {

                return;

            }

        }

        public function get isScale():Boolean

        {

            return _isScal;

        }

        public function set isScale(isScal:Boolean):void

        {

            this._isScal=isScal;

        }

        

        private function onDown():void

        {

            //按下，按钮进行缩放

            _owner.scale(.8,.8);

            _owner.on(Event.MOUSE_UP,this,onUp);

        }

        

        private function onUp():void

        {

            // 抬起，按钮回复原样

            _owner.scale(1,1);

            _owner.off(Event.MOUSE_UP,this,onUp);

        }

    }

}

H、现在我们的例子已经完成了，我们来看下效果
H-1 设置isScale=true

发布显示结果

弹起

按下

H-1 设置isScale=false

发布显示结果

弹起

按下
-------------------------------------------------第一小节完---------------------------------------------

2、扩展脚本（继承组件本身，增加新的属性）
我们在第一个项目的基础上操作，实现一个Animation播放速度是否变慢的效果
A、从组件面板2d下拖拽一个Animation组件到舞台，并将资源面板中准备好的序列帧动画文件夹 拖拽到Animation组件右侧属性面板 中的data属性上，即可自动完成图集动画的制作
步骤一、


步骤二、记得设置autoPlay=true，否则发布后不会自动播放


B、创建扩展脚本并书写新的属性isSlow（true播放缓慢false正常播放），会在项目面板自动生成一个.prop文件



C、将.prop文件拖拽到Animation的属性面板，扩展Animation新的属性值


在属性面版的最后一行会自动生成我们在.prop文件新增的属性isSlow



D、给Animation组件声明一个var（myAni），F12发布，解决报错，同上（创建Ani.as类）
报错如下：



创建Ani脚本


F、在Ani脚本中书写控制Animation播放快慢的逻辑代码

package game

{

    import laya.display.Animation;

    

    public class Ani extends Animation

    {

        private var _isSlow:Boolean=true;

        public function Ani()

        {

        }

        public function get isSlow():Boolean

        {

            return _isSlow;

        }

        //isSlow：是否放慢速度

        public function set isSlow(value:Boolean):void 

        {

            _isSlow=value;

            if(_isSlow)

            {

                this.interval=500;

            }

        }

    }

}

G：查看最终运行效果
G-1 设置isSlow=true；


Animation的以默认60FPS/S的运行速度运行
G-2 设置isSlow=false；


Animation的运行间隔为0.5S，速度变慢
由于效果不好直接在文档中表现，请开发者手动操作体验下
------------------------------------------------第二小节完-------------------------------------------
总结：以上的代码操作仅作为参考，开发者可根据自己的实际需求进行逻辑实现（支持AS/JS/TS语言）
END！！！

厉害,想法很独特，解决了很多问题