Egret社区
本帖最后由 倩倩 于 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, 下载次数: 0, 售价: 1 银子)
11.png
分享到 :
2 人收藏

12 个回复

倒序浏览
倩倩  登堂入室 | 2018-10-12 18:33:11
源码奉上

test.zip

971.92 KB, 下载次数: 60, 下载积分: 银子 -1

售价: 1 银子  [记录]

源码

Deerboy  登堂入室 | 2018-10-13 09:19:20
思路和我一样 但是我没有用tween 在四段衔接的时候没有调整好的话会出现瞬移一小段。。 点赞!
yxs  登堂入室 | 2018-10-13 09:46:09
难道不应该是假设周长为1,设置周长为0-1来计算坐标吗?
倩倩  登堂入室 | 2018-10-15 10:24:16
Deerboy 发表于 2018-10-13 09:19
思路和我一样 但是我没有用tween 在四段衔接的时候没有调整好的话会出现瞬移一小段。。 点赞! ...

没有用Tween,那你是怎么控制的呢?请赐教。
倩倩  登堂入室 | 2018-10-15 10:25:40
Deerboy 发表于 2018-10-13 09:19
思路和我一样 但是我没有用tween 在四段衔接的时候没有调整好的话会出现瞬移一小段。。 点赞! ...

没有用Tween,那你是怎么控制的呢?请赐教。
倩倩  登堂入室 | 2018-10-15 10:28:09
yxs 发表于 2018-10-13 09:46
难道不应该是假设周长为1,设置周长为0-1来计算坐标吗?

不会这种方法啊 请赐教
Deerboy  登堂入室 | 2018-10-17 14:35:25
倩倩 发表于 2018-10-15 10:25
没有用Tween,那你是怎么控制的呢?请赐教。

每一帧更新位置 enter_frame 用两个角度控制xy变化 挺麻烦的。。 还有个问题 想请教一下 在跑道上运动的小车怎么取消运动。。。
zhengluowu  登堂入室 | 2018-10-17 14:47:15
see 一 see
Deerboy  登堂入室 | 2018-10-17 18:47:10
Deerboy 发表于 2018-10-17 14:35
每一帧更新位置 enter_frame 用两个角度控制xy变化 挺麻烦的。。 还有个问题 想请教一下 在跑道上运动的 ...

目前是可以取消运动 但是有一点bug。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部