标签: 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代码并正确运行，但是编译和编辑器大量的报错会让排查关键错误变得更加艰难。
往期精彩回顾
- Ant Design 组件 —— Form表单（一)
- Ant Design 组件 —— Form表单（二)
- CMS管理后台入门指南 (Ant Design Pro v2.0)
- 实现点击下载文件的几种方法
- 在https中引入http资源所导致的问题
叶茂 广州芦苇科技web前端工程师
