1. 程式人生 > >【typescript】兩個物品圍繞旋轉效果

【typescript】兩個物品圍繞旋轉效果

記錄一下旋轉的原理,使用計時器來移動座標,或者改為按幀移動也可。

程式碼裡的物件或其他介面,能看得懂就行,就不貼上來了。

效果:

 


	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));
	}