最終目標(biāo)

請(qǐng)?zhí)砑訄D片描述

文末有源碼
本文講的基礎(chǔ)一點(diǎn)范删，可能有些啰嗦嘁扼，大佬輕噴姑裂。

數(shù)學(xué)概念

下面要引入兩個(gè)數(shù)學(xué)概念馋袜，一個(gè)是正弦余弦和正切，一個(gè)是角度制和弧度制

正弦 余弦 正切

請(qǐng)?zhí)砑訄D片描述

如圖舶斧，在Rt△ABC中欣鳖，∠C = 90°，斜邊為c茴厉，長(zhǎng)的直角邊為b泽台，短的直角邊為a。

正弦
我們把∠A的對(duì)邊與斜邊的比叫做∠A的正弦（sine）矾缓，記作sinA怀酷，即

sinA = ∠A的對(duì)邊 / ∠A的斜邊 = a / c

余弦
我們把∠A的鄰邊與斜邊的比叫做∠A的余弦（cosine），記作cosA嗜闻，即

cosA = ∠A的鄰邊 / ∠A的斜邊 = b / c

正切
我們把∠A的對(duì)邊與鄰邊的比叫做∠A的正切（tangent）蜕依，記作tanA，即

tanA = ∠A的對(duì)邊 / ∠A的鄰邊 = a / b

對(duì)于tanA有一個(gè)公式
tanA = sinA / cosA
也就是
a / b = (a / c) / (b / c)
a / b = (a / c) * (c / b)
等號(hào)右邊上下兩個(gè)c約掉了
也就只剩下a / b = a / b

在這里插入圖片描述

在這里插入圖片描述

角度制和弧度制

每個(gè)角度都有一個(gè)對(duì)應(yīng)的弧度值
既然已經(jīng)有角度制了琉雳，為什么還要有弧度制呢
因?yàn)榇a里Math中用的三角函數(shù)都是弧度制样眠，代碼只認(rèn)弧度制，不認(rèn)角度制

180°角的弧度值是π

由此可以得出公式

弧度 = 角度 / 180° * π
角度 = 弧度 / π * 180°

也可以寫成

弧度 = π / 180° * 角度
角度 = 180° / π * 弧度

其實(shí)都是一樣的咐吼，一模一樣吹缔，只是數(shù)的位置變了

仔細(xì)思考思考公式是怎么得出來的

開始寫代碼

只要實(shí)現(xiàn)小球圍繞著紅色中心點(diǎn)轉(zhuǎn)悠就可以了（UI部分代碼省略）

請(qǐng)?zhí)砑訄D片描述

新建一個(gè)腳本取名Main，掛載到canvas上面锯茄，在腳本中聲明以下屬性

    @property({displayName: "小球", tooltip: "小球", type: Node})
    ball: Node = null!;

    @property({displayName: "中心紅點(diǎn)", tooltip: "中心紅點(diǎn)", type: Node})
    point: Node = null!;


    @property({displayName: "運(yùn)動(dòng)半徑", tooltip: "運(yùn)動(dòng)半徑", type: CCFloat})
    r: number = 200;

    @property({displayName: "每幀運(yùn)動(dòng)角度", tooltip: "每幀運(yùn)動(dòng)角度", type: CCFloat})
    angle_nor: number = 1;


    @property({displayName: "中心紅點(diǎn)位置偏移量", tooltip: "中心紅點(diǎn)位置偏移量"})
    offset: Vec2 = new Vec2(0, 0);


    // 下一幀需要運(yùn)動(dòng)的角度
    angle: number = 0;

PS出兩個(gè)圓厢塘，拖拽到場(chǎng)景，設(shè)置成一大一小肌幽，為了醒目容易區(qū)分還可以改下顏色晚碾，大的取名ball，小的取名center_point

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

綁定下節(jié)點(diǎn)

在這里插入圖片描述

接下來一直擼代碼喂急，沒編輯器什么事了
先封裝兩個(gè)函數(shù)供自己調(diào)用
分別是角度轉(zhuǎn)弧度和弧度轉(zhuǎn)角度
這里就用到了剛剛講的公式
分別傳入角度和弧度格嘁，經(jīng)過代碼計(jì)算之后返回弧度和角度

    // 角度轉(zhuǎn)弧度
    angle_to_radian (angle: number): number {
        // 角度轉(zhuǎn)弧度公式
        // π / 180 * 角度

        // 計(jì)算出弧度
        let radian = Math.PI / 180 * angle;
        // 返回弧度
        return(radian);
    }


    // 弧度轉(zhuǎn)角度
    radian_to_angle (radian: number): number {
        // 弧度轉(zhuǎn)角度公式
        // 180 / π * 弧度

        // 計(jì)算出角度
        let angle = 180 / Math.PI * radian;
        // 返回弧度
        return(angle);
    }

在游戲開始時(shí)，把ball（白色大球）的坐標(biāo)設(shè)置到最右邊

    onLoad () {
        // 將小球的坐標(biāo)設(shè)置到最右邊
        this.ball.position = new Vec3(this.r, 0);
        // 設(shè)置下一幀需要運(yùn)動(dòng)的角度為最開始的角度
        this.angle = this.angle_nor;
    }

接著就是最主要的邏輯廊移，全部寫在update里面
先解釋一下angle屬性和angle_nor屬性的區(qū)別糕簿，angle屬性是大白球下一幀要運(yùn)動(dòng)的角度，不可以在編輯器進(jìn)行調(diào)整狡孔，只在代碼中進(jìn)行修改懂诗。而angle_nor是可以在編輯器修改的，每幀運(yùn)動(dòng)的角度苗膝，update每執(zhí)行一次angle就加上一次angle_nor殃恒，angle的值會(huì)越來越大。

如果下一幀需要運(yùn)動(dòng)的角度大于等于了360°，就進(jìn)行取余离唐，計(jì)算出angle的值 / 360的余數(shù)病附，并且將這個(gè)余數(shù)重新賦值給angle，取余這里其實(shí)沒有必要寫亥鬓，寫了和沒寫效果是一樣的完沪，但是寫上看起來更舒服一些（至少我這么認(rèn)為）

    update () {
        // log(this.angle);
        // 將每幀運(yùn)動(dòng)的角度計(jì)算成弧度
        let radian = this.angle_to_radian(this.angle);
        // 算出X和Y的坐標(biāo)
        let x = this.r * Math.cos(radian);
        let y = this.r * Math.sin(radian);
        // 設(shè)置小球的坐標(biāo)
        this.ball.position = new Vec3(x + this.offset.x, y + this.offset.y);
        // 將下一幀需要運(yùn)動(dòng)的角度增加
        this.angle += this.angle_nor;

        // 如果下一幀需要運(yùn)動(dòng)的角度大于等于了360°
        if (this.angle >= 360) {
            // 取余360   也就是說angle的值不會(huì)超過360度
        this.angle %= 360;
        }

        // 每幀更新中心紅點(diǎn)位置
        this.point.position = new Vec3(this.offset.x, this.offset.y);
    }

update里面，首先把要旋轉(zhuǎn)的角度計(jì)算成弧度贮竟，并且利用文章開頭所講的三角函數(shù)計(jì)算出大白球的坐標(biāo)丽焊。

        // 算出X和Y的坐標(biāo)
        let x = this.r * Math.cos(radian);
        let y = this.r * Math.sin(radian);

這兩句代碼就是利用三角函數(shù)計(jì)算出了小球的坐標(biāo)较剃，畫個(gè)圖輔助理解

在這里插入圖片描述

點(diǎn)A繞原點(diǎn)O逆時(shí)針旋轉(zhuǎn)30°咕别，求出旋轉(zhuǎn)后的點(diǎn)A'的坐標(biāo)
旋轉(zhuǎn)前點(diǎn)A的坐標(biāo)是(r, 0)，r是旋轉(zhuǎn)半徑
旋轉(zhuǎn)之后得到A'写穴，過A'向X軸做垂線交X軸于點(diǎn)B惰拱，連接OA'，得到Rt△A'OB
∠A'OB暫時(shí)管它叫∠α

文章開頭寫的三角函數(shù)啊送，現(xiàn)在就用得上了偿短，我們已知的只有半徑r和∠α的角度是30°，求點(diǎn)A'的坐標(biāo)
說是求點(diǎn)A'的坐標(biāo)馋没，實(shí)際上求出對(duì)邊和鄰邊的長(zhǎng)就可以了
點(diǎn)A的坐標(biāo)就是(鄰邊, 對(duì)邊)
sin α = 對(duì)邊 / r
cos α = 鄰邊 / r
等號(hào)右邊再×一個(gè)r就得到了對(duì)邊和鄰邊的值
也就是
對(duì)邊 = sin α * r
鄰邊 = cos α * r
在代碼中可以用Math.cos()和Math.sin()傳入一個(gè)角的弧度值返回這個(gè)角的余弦或正弦
這兩個(gè)方法傳入的參數(shù)只能是角的弧度昔逗，不能是角度
大白球的最終坐標(biāo)就是（鄰邊長(zhǎng)度, 對(duì)邊長(zhǎng)度）
計(jì)算出大白球最終坐標(biāo)之后還要加上位置偏移量
并且更新中心紅點(diǎn)的位置

這樣就實(shí)現(xiàn)了小球圍著中心紅點(diǎn)轉(zhuǎn)悠的功能

其實(shí)這就是角度轉(zhuǎn)平面向量的一個(gè)過程
平面向量是在二維平面內(nèi)既有方向(direction)又有大小(magnitude)的量
平常寫代碼為了方便我還封裝了兩個(gè)方法
分別是角度轉(zhuǎn)平面向量和平面向量轉(zhuǎn)角度
這個(gè)在代碼中用的更多

    // 角度轉(zhuǎn)向量   
    angle_to_vector (angle: number): Vec2 {
        // tan = sin / cos
        // 將傳入的角度轉(zhuǎn)為弧度
        let radian = this.angle_to_radian(angle);
        // 算出cos,sin和tan
        let cos = Math.cos(radian);// 鄰邊 / 斜邊
        let sin = Math.sin(radian);// 對(duì)邊 / 斜邊
        let tan = sin / cos;// 對(duì)邊 / 鄰邊
        // 結(jié)合在一起并歸一化
        let vec = new Vec2(cos, sin).normalize();
        // 返回向量
        return(vec);
    }


    // ！Ｅ穸洹９磁！Ｉ１柿础！腮猖！其實(shí)使用Math.atan2求出弧度再轉(zhuǎn)角度一樣的效果
    // 向量轉(zhuǎn)角度
    vector_to_angle (vector: Vec2): number {
        // 將傳入的向量歸一化
        let dir = vector.normalize();
        // 計(jì)算出目標(biāo)角度的弧度
        let radian = dir.signAngle(new Vec2(1, 0));
        // 把弧度計(jì)算成角度
        let angle = -this.radian_to_angle(radian);
        // 返回角度
        return(angle);
    }

源代碼：https://gitee.com/propertygame/cocos-creator3.x-demos/tree/master/TRF_Demo
技術(shù)交流Q群：1130122408
更多內(nèi)容請(qǐng)關(guān)注微信公眾號(hào)