摘要:附加要求,飛行曲線,飛機先加速,然后減速抵達終點,飛行途中,需要轉換飛機朝向,飛行途中,飛機漸漸變小體驗網易郵箱大師電腦版實現方法飛行曲線我們選擇了二次貝塞爾曲線,原因是簡單,可計算。
本文由鄒啟文授權網易云社區發布。
郵箱大師PC版中,設計師提出了一個很妙的想法: 發信時,出現一個飛機,從寫信中央飛往進度目的地。
附加要求:
1,飛行曲線,飛機先加速,然后減速抵達終點
2,飛行途中,需要轉換飛機朝向
3,飛行途中,飛機漸漸變小
體驗:網易郵箱大師電腦版
實現方法:
飛行曲線
我們選擇了二次貝塞爾曲線,原因是簡單,可計算。
數學公式:B(t) = (1-t)^2 P0 + 2 t (1-t) P1 + t^2 *P2, t=[0,1]
(圖片來源于網絡,此處是為了講解清楚)
已知起飛點P0,終點P2,起飛角度(或斜率,切線P0P1),降落角度(或斜率,切線P1P2),求P1
將起飛角度轉換(k=tan(θ))成斜率k1,降落角度轉成斜率k2,根據斜率公式y=k*x+b可得
P0.y = k1 * P0.x + b1;
P1.y = k1 * P1.x + b1;
P2.y = k2 * P2.x + b2;
P1.y = k2 * P1.x + b2;
至此,便可求得P1坐標。(可調整角度(或k1,k2)以滿足實際要求)
曲線雖然推導出來,但是,飛機先加速然后減速,如何實現呢?
注意觀察,公式中t的取值范圍是0~1,我們可以讓飛機在前面小部分時間走過大部分距離,后面
大部分時間走過小部分距離來做到。
為了靈活調整,以及總時間固定的情況下,我們選擇了一種簡單的方法,將時間分片,人為的構造
出一段前面加速后面減速的時間曲線。
示例:
const int kPiece[] = { 10,20,30,45,65,90,70,45,40,35,30,25,22,20,19,18,17,16,15 };
定時器設置為10ms,每隔10ms,計算一次t=kPiece(0~i) / kPiece(0~N) * T;
kPiece(0~i)為前i項和,kPiece(0~N)為總和,T為固定的總時間
飛機朝向
飛機的頭要隨著曲線改變朝向。很顯然,這個朝向就是曲線的切線方向。
求切線,正確的方式是求導。
在這里,我們選擇了一種簡單的方法:
記住當前點和上一點,然后計算2點的斜率,再轉換成角度。
飛機大小
飛機大小變化沒有嚴格要求,可采取線性變化,在總時間T內從1.0到0.25(根據素材大小決定),恰好做到與曲線同時變化結束。
特別注意
I、起飛角度轉換成斜率,在計算機世界,其坐標系與數學中的坐標系不一致,X軸一致,而Y軸相反,所以角度可能是負數(比如起始時往左飛行)
II、飛機朝向,斜率轉換成角度時,從A到B,B相對于A的位置可在4個象限,所以角度可能存在負角度,與此同時,素材中飛機也有個角度,那么繪制時,注意矯正角度
III、飛機降落時角度可能不正確(如從上方降落)。實際應用時,由于飛機變小且速度較快,而且降落時調整了角度,所以此問題不明顯。如要保證飛機降落角度一定不變,可以考慮三次貝塞爾曲線
Gdiplus繪制飛機
Gdiplus::Graphics g(dc); Gdiplus::PointF center(cx / 2, cy / 2); // cx、cy為素材寬度和高度 g.TranslateTransform(center.X, center.Y); // 轉換坐標系 g.RotateTransform(angle_); // 旋轉角度 g.SetInterpolationMode(Gdiplus::InterpolationModeHighQualityBilinear); g.ScaleTransform(scale_, scale_); // 縮放 g.TranslateTransform(-center.X, -center.Y); g.DrawImage(plane_.get(), 0, 0); // 繪制圖片
免費領取驗證碼、內容安全、短信發送、直播點播體驗包及云服務器等套餐
更多網易技術、產品、運營經驗分享請訪問網易云社區。
文章來源: 網易云社區
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/25342.html
摘要:我們并不需要知道貝塞爾曲線背后的所有數學知識。我們可以使用相同的并設置并反轉貝塞爾曲線,這樣就實現了在正反兩個方向上使用同一個的效果。我們來看看如何計算反向的貝塞爾曲線。 首先來看一看我之前寫的一個CSS輪播動畫效果,為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關鍵詞,而使用了cubic-bezier(貝塞爾)函...
摘要:我們并不需要知道貝塞爾曲線背后的所有數學知識。我們可以使用相同的并設置并反轉貝塞爾曲線,這樣就實現了在正反兩個方向上使用同一個的效果。我們來看看如何計算反向的貝塞爾曲線。 首先來看一看我之前寫的一個CSS輪播動畫效果,為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關鍵詞,而使用了cubic-bezier(貝塞爾)函...
摘要:我們并不需要知道貝塞爾曲線背后的所有數學知識。我們可以使用相同的并設置并反轉貝塞爾曲線,這樣就實現了在正反兩個方向上使用同一個的效果。我們來看看如何計算反向的貝塞爾曲線。 首先來看一看我之前寫的一個CSS輪播動畫效果,為了讓切換時動畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關鍵詞,而使用了cubic-bezier(貝塞爾)函...
摘要:一條正在繪制中的三次方貝塞爾曲線因為該曲線由四個點形成,我們將其稱為三次方貝塞爾曲線,而不是二次方曲線三個點或四次方曲線五個點。現在終于可以將貝塞爾曲線收入囊中了,也已經對這 作者:Nicolas(滬江前端開發工程師)本文原創翻譯,轉載請注明作者及出處。 各位,趕緊綁住自己并緊緊抓牢了,因為當你掌握了特別有趣但又復雜的CSS時序函數之后,你將會真正體驗到豎起頭發般的興奮感受。 好吧,本...
閱讀 785·2023-04-26 00:30
閱讀 2690·2021-11-23 09:51
閱讀 1045·2021-11-02 14:38
閱讀 2560·2021-09-07 10:23
閱讀 2243·2021-08-21 14:09
閱讀 1363·2019-08-30 10:57
閱讀 1603·2019-08-29 11:20
閱讀 1149·2019-08-26 13:53