egret星空项目

技术栈: 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(()=>{

            })
        })
    }

项目参考资料:

1. startTick 函数
2. setTimeOut函数