本帖最后由 倩倩 于 2018-10-12 18:31 编辑
微信小游戏中合成类游戏比较火,在这些合成类游戏中通常会有一个跑道,然后让车围绕着这些椭圆形的跑道移动。那么如何做到的呢?
我们观察会发现这些椭圆形的跑道是有两个半圆与两条竖线合成的,在直线型的跑道上,我们只需要使用Tween动画,不断改变车的y坐标即可,那么在半圆形的轨道上,怎么办呢?
这需要我们回忆自己高中所学的关于圆的数学函数了。
圆心坐标:(x0,y0)
半径:r
角度:a 圆周率: PI
则圆上任一点为:(x1,y1)
x1 = x0 + r * cos(a * PI /180 )
y1 = y0 + r * sin(a * PI /180 )
我们只需要不断改变角度就可以,算出半圆上的点的x值和y值了。 [mw_shl_code=javascript,true]private get radius(){
return -Math.PI;
}
private set radius(value:number){
this.car.x = this.stage.stageWidth/2 + (this.stage.stageWidth/2-20)*Math.cos(value);
this.car.y = this.stage.stageWidth/2-10 + (this.stage.stageWidth/2-20)*Math.sin(value);
this.car.rotation = 180 * value / Math.PI;
}[/mw_shl_code] 利用tween动画改变radius属性的值。 [mw_shl_code=javascript,true]egret.Tween.get(this).to({radius:0},2000)[/mw_shl_code] 把各个跑道上的tween动画按顺序播放即可了 [mw_shl_code=javascript,true]egret.Tween.get(this.car)
.to({y:this.stage.stageWidth/2-10},1000)
.call(()=>{
egret.Tween.get(this).to({radius:0},2000)
.call(()=>{
egret.Tween.get(this.car).to({y:this.stage.stageHeight-this.stage.stageWidth/2-10},1000)
.call(()=>{
egret.Tween.get(this).to({radius2: Math.PI},2000)
.call(()=>{
this.isMoving = false;
this.onClick();
},this);
},this);
test.zip
(971.92 KB, 下载次数: 2, 售价: 1 银子)
|