【typescript】兩個物品圍繞旋轉效果
阿新 • • 發佈:2018-11-07
記錄一下旋轉的原理,使用計時器來移動座標,或者改為按幀移動也可。
程式碼裡的物件或其他介面,能看得懂就行,就不貼上來了。
效果:
private _circleCenter = {x: 279, y: 229};//中心,訂半徑 private _aPos = {x: 155, y: 80};//橢圓度(x越大,橫向偏移越大) private _eff1: UIEffect; private _eff2: UIEffect; private _angle: number = 0; private _speedTime: number = 20;//速度(多少時間毫秒執行一次位置移動) private _speedPos: number = 3;//速度(一個時間單位內執行多少角度的位置移動) /**展示繞圈特效*/ private showBallsEff(){ //第一個物品 this._eff1 = EffectManager.getInstance().showEffect(UrlUtil.getCommonEffectURL("lymarkeff"),0, 0, this.g_actEff, 40, true); //第二個物品 this._eff2 = EffectManager.getInstance().showEffect(UrlUtil.getCommonEffectURL("lymarkeff"),0, 0, this.g_actEff, 40, true); //如果還沒有計時器,新增一個 if (!(TimerManager.getInstance().has(this._speedTime, this.showCircle, this))){ TimerManager.getInstance().add(this._speedTime, this.showCircle, this); } } /**展示繞圈 計算角度*/ private showCircle(){ let a = this; a._angle += a._speedPos; if(a._angle >= 360){ a._angle = 0; } let pos = a._angle * Math.PI / 180; let pos2 = (180 + a._angle) * Math.PI / 180; a._eff1.x = Math.ceil(a._aPos.x * Math.cos(pos) + a._circleCenter.x); a._eff1.y = Math.ceil(a._aPos.y * Math.sin(pos) + a._circleCenter.y); a._eff2.x = Math.ceil(a._aPos.x * Math.cos(pos2) + a._circleCenter.x); a._eff2.y = Math.ceil(a._aPos.y * Math.sin(pos2) + a._circleCenter.y); //當旋轉到中心圖片後面時候切換層次 if(a._angle > 200 && a._angle < 340){ if(a.g_actEff.getChildIndex(a._eff1.content) != 0){ a.g_actEff.setChildIndex(a._eff1.content, 0); } if(a.g_actEff.getChildIndex(a._eff2.content) != a.g_actEff.numChildren){ a.g_actEff.setChildIndex(a._eff2.content, a.g_actEff.numChildren); } } else{ if(a.g_actEff.getChildIndex(a._eff2.content) != 0){ a.g_actEff.setChildIndex(a._eff2.content, 0); } if(a.g_actEff.getChildIndex(a._eff1.content) != a.g_actEff.numChildren){ a.g_actEff.setChildIndex(a._eff1.content, a.g_actEff.numChildren); } } // console.log(pos, a._eff1.x, a._eff1.y,"-------------", a._angle, a.g_actEff.getChildIndex(a.img_mainRing), a.g_actEff.getChildIndex(this._eff1.content)); }