egret使用技巧及减少报错-CSDN博客

标签: egret,typescript

知识点

tween动画循环

egret wing为我们提供了可视化界面创建和编辑exml，编辑Tween动画也相当方便，但是在可视化操作中没有提供相应选项实现动画循环。

使用egret wing可视化界面创建的一个简单动画的后自动生成的.exml代码如下

<?xml version="1.0" encoding="utf-8"?>

<e:Skin width="400" height="300" xmlns:e="http://ns.egret.com/eui" xmlns:ns1="*" xmlns:w="http://ns.egret.com/wing" xmlns:tween="egret.tween.*">
	<w:Declarations>
		<tween:TweenGroup id="demo">
			<tween:TweenItem target="{label}">
				<tween:Set/>
				<tween:To duration="500">
					<tween:props>
						<e:Object scaleX="{2}" scaleY="{2}"/>
					</tween:props>
				</tween:To>
				<tween:To duration="500">
					<tween:props>
						<e:Object scaleX="{1}" scaleY="{1}"/>
					</tween:props>
				</tween:To>
			</tween:TweenItem>
		</tween:TweenGroup>
	</w:Declarations>
	<e:Label id="label" text="Demo" x="154" y="123"/>
</e:Skin>

复制代码

实现动画循环的方法

以下均省略Demo.ts中引入该皮肤的代码

不改动exml

// ...省略其他代码 
this.demo.items[0].props={loop:true}
复制代码

减少多层引用，在TweenItem上加上id属性

<tween:TweenItem id="item" target="{label}">
<!-- 其他代码 -->
</tween:TweenItem>
复制代码

this.item.props={loop:true}
复制代码

不写ts代码

<tween:TweenItem target="{label}">
    <tween:props>
	    <e:Object loop="{true}" />
	</tween:props>
<!-- 其他代码 -->
</tween:TweenItem>
复制代码

MovieClip序列帧动画

实现循环动画不仅可以使用Tween缓动动画，还可以使用MovieClip帧动画，两者适用范围各不相同，但都可以实现循环动画。

需要引入game库，创建eui项目时默认是不勾选的

// 官方库引入非常方便
// egretProperties.json
{
    "name": "game"
}
复制代码

创建并开始动画使用TextureMerger创建动画非常方便，导出json和png文件用于创建动画

// 加载配置文件和资源
var data = RES.getRes("countdown_json")
var png = RES.getRes("countdown_png")

// 创建movieclip
var mcFactory:egret.MovieClipDataFactory = new egret.MovieClipDataFactory( data, png );

// 创建指定动画
var mc1:egret.MovieClip = new egret.MovieClip( mcFactory.generateMovieClipData( "countdown" ) );

// 将动画加入舞台
this.addChild(mc1)

// 动画需要加入舞台后才可以开始

// "start"需要在json配置文件labels字段中指定并配置，-1表示循环无限次
mc1.gotoAndPlay("start", -1)
复制代码

egret中的一些常见代码问题

1. 皮肤文件的class属性

.exml文件中定义的class属性表示皮肤类eui.Skin的一个子类名，所以不能与其他Class重名

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="Demo" xmlns:e="http://ns.egret.com/eui">
</e:Skin>
复制代码

以上代码相当于

declare class Demo extends eui.Skin {
}

复制代码

可使用模块化避免命名冲突

<?xml version="1.0" encoding="utf-8"?>

<e:Skin class="myskin.Demo" xmlns:e="http://ns.egret.com/eui">
</e:Skin>
复制代码

相当于

declare module myskin{
	class Demo extends eui.Skin{
	}
}
复制代码

2. 类型声明减少报错，增加代码提示

类型声明帮助减少逻辑错误

// 指定num类型后，赋值错误的类型会报错
var num:number | string = 123;
num = ''
num = true // 报错

复制代码

类型声明增加代码提示

class Shop {
	private farm:Farm // 有代码提示
	private farm2; // 没有代码提示

	public yourFun() {
		this.farm.something // 声明了this.farm的来源，在引用时可以得到很好的代码提示
	}

}
复制代码

函数形参声明正确的声明函数的参数个数和类型，以及是否必选，可以得到很好的代码提示，并且防止编辑器报错


// ?: 表示可选参数的类型
function demo (arg1:string, arg2?:number):viod {}
复制代码

// es6语法和类型声明的配合使用

function demo2 ({
	arg1 = '',
	arg2 = null,
	arg3 = 123
}) {}
// 以上代码在egret wing目前支持的typescript中，arg2会被认为是null类型，当调用这个函数时arg2的类型很容易报错，因为在需要给arg2传参时，大部分情况下不会传null或undefined

// 正确的解决方法是自行指定正确的arg2类型，最新版typescript在vscode上也是这样翻译的
function demo2 ({
	arg1 = '',
	arg2 = null,
	arg3 = 123
}:{
	arg1?:string,
	arg2?:any, // arg2应该是any类型
	arg3?:number
}):viod {}

复制代码

any可以解决很多编辑器报错，但失去了很多代码提示，并且你需要对类型有充足的判断。


// 类型断言，在window对象上添加属性
(<any>window).test = function () {

}

// any解决属性访问报错
// 前提是你清楚你的访问和修改是没有问题的
// 并且你在输入'demo.'后本应该有的代码提示也不会再出现了
let demo:any = new Demo()
demo.anything = 'you want' //这样即使你访问Demo中没有声明的属性也不会报编译错误了
复制代码

3. 类的属性设置正确的访问控制，避免编辑器报错，正确的代码提示

// 正确使用private protected public
class Demo {
	protected test () {}
}
new Demo().test() // error

// 重写方法时访问控制不能比父类严格
class Demo2 extends Demo {
	private test( ){} // error
}

// 代码提示
new Demo().      // 这里会出现public的属性代码提示，不会出现private和protected属性的代码提示

复制代码

虽然以上错误都能编译成js代码并正确运行，但是编译和编辑器大量的报错会让排查关键错误变得更加艰难。

作者简介：叶茂，芦苇科技web前端开发工程师，代表作品：口红挑战网红小游戏、服务端渲染官网。擅长网站建设、公众号开发、微信小程序开发、小游戏、公众号开发，专注于前端领域框架、交互设计、图像绘制、数据分析等研究。一起并肩作战： yemao@talkmoney.cn 访问 www.talkmoney.cn 了解更多