技术栈: egret + ts
总共9个页面,画面还是很好看滴~
刚开始看到设计稿的时候,内心OS: 这么短时间交,我的天!!!
写起来后发现其实难度全在第一页了[笑哭]
后面的页面功能大多都很是雷同啊...
总之,继续每天进步一点点吧~
踩坑
-
问题: 文字逐个加载之前,将所有文字隐藏报错
报错信息
原因: if语句内部文字个数限制范围超出文字总数量
解决方法:
/* 初始状态下文字消失 */
for (var i = 0; i < 63; i++) { // j的限制范围出错 -> 导致alpha属性无法获取到
this["t" + (i + 1)].alpha = 0; // 内部 +1 了 !!!
}
/* 动画组内: 文字逐个加载 */
private idTimeOut;
private txtShow() {
for (var i = 0; i < 64; i++) {
this.idTimeOut = egret.setTimeout(this.onTime.bind(this, i), this, i * 80); // 注意: 在调用超时触发器之后要将其清除
}
}
private onTime(i) {
this["t" + (i + 1)].alpha = 1;
}
-
问题: 模拟圆圈进度条循环转圈
实际要实现的效果 -> 进度条旋转一圈之后就暂停
原因: 默认是一个一直动态加载的循环函数,没有写对应的停止函数
解决方法:
/* 光圈模拟进度条效果 */
private cirShow() {
this.angle = 0;
egret.startTick(this.onTick, this);
}
private angle: number = 0;
private onTick(): boolean {
this.changeGraphics(this.angle);
this.angle += 1;
if (this.angle >= 360) {
egret.stopTick(this.onTick, this); // 踩坑点: -> 停止进度条循环效果
// wy.changeScene(Page1); // 跳转下一页
return false;
}
}
private changeGraphics(angle: number) {
var mas: egret.Shape = new egret.Shape();
mas.graphics.beginFill(0xff0000, 0);
mas.graphics.lineStyle(150, 0xffffff)
// 绘制圆弧: 圆弧路径的圆心X轴位置, 圆弧路径的圆心Y轴位置, 圆弧半径, 圆弧起点角度, 圆弧终点角度
mas.graphics.drawArc(855, 320, 272, 0, angle * Math.PI / 180);
mas.graphics.endFill();
this.addChild(mas);
this.halo.mask = mas;
this.halo.alpha = 1; // 同理: -> this.halo.visible = true;
}
-
问题: 直接运行单个页面没问题,但是从上个页面跳转过来就出问题
实际要实现的效果 -> 扫描会从上往下循环扫
解决方法: 将跳转页面的代码放到if语句里面,该语句的作用是对动画是否已运行进行判断,如果运行过了就不会再次运行了
/* 动画: 上下扫描 */
private animation() {
egret.Tween.get(this.scan, { loop: true }).to({ y: 395 }, 2000).to({ y: 152 }, 2000);
}
-
问题: 元素身上添加点击效果失效
原因: 层级问题,该元素被其他元素覆盖了
解决方法:
将覆盖住该元素的元素隐藏掉alpha/visible,结果发现并没有用,问题还是存在.原因在于虽然将他们隐藏了,但实际还是占位的,所以依旧点击不到该元素!所以,最终采取的方法是,直接将覆盖住该元素的元素移除舞台removeChild,等需要用到时再添加addChild
-
问题: 触碰后,隔一秒就会消失
实际要实现的效果 -> 只有长按住指纹的时间有一秒,指纹校验框才会消失
原因: 没有进行触摸时间长短的判断,所以会导致,只要手指碰触到目标元素,那么一秒后校验框就会消失!!!
解决方法:
private idTimeOut;
private onTouchBegin(e: egret.TouchEvent): void {
this.idTimeOut = egret.setTimeout(this.onTouch,this,1000); // 等待一秒后,执行onTouch方法
}
private onTouchEnd(){ // 踩坑点: 判断是否按住的时间有1s,如果没有,清除该方法!
egret.clearTimeout(this.idTimeOut);
}
private onTouch(){
egret.Tween.get(this.fingerprint).to({alpha:0},500).call(()=>{
egret.Tween.get(this.Validatebox).to({alpha:0},500).call(()=>{
})
})
}
