成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

項(xiàng)目開發(fā)中的貝塞爾曲線

Tangpj / 1463人閱讀

摘要：附加要求，飛行曲線，飛機(jī)先加速，然后減速抵達(dá)終點(diǎn)，飛行途中，需要轉(zhuǎn)換飛機(jī)朝向，飛行途中，飛機(jī)漸漸變小體驗(yàn)網(wǎng)易郵箱大師電腦版實(shí)現(xiàn)方法飛行曲線我們選擇了二次貝塞爾曲線，原因是簡單，可計(jì)算。

本文由鄒啟文授權(quán)網(wǎng)易云社區(qū)發(fā)布。

郵箱大師PC版中，設(shè)計(jì)師提出了一個(gè)很妙的想法： 發(fā)信時(shí)，出現(xiàn)一個(gè)飛機(jī)，從寫信中央飛往進(jìn)度目的地。

附加要求：
1，飛行曲線，飛機(jī)先加速，然后減速抵達(dá)終點(diǎn)
2，飛行途中，需要轉(zhuǎn)換飛機(jī)朝向
3，飛行途中，飛機(jī)漸漸變小
體驗(yàn)：網(wǎng)易郵箱大師電腦版

實(shí)現(xiàn)方法：

飛行曲線

我們選擇了二次貝塞爾曲線，原因是簡單，可計(jì)算。
數(shù)學(xué)公式：B(t) = (1-t)^2 P0 + 2 t (1-t) P1 + t^2 *P2, t=[0,1]

（圖片來源于網(wǎng)絡(luò)，此處是為了講解清楚）

已知起飛點(diǎn)P0，終點(diǎn)P2，起飛角度（或斜率，切線P0P1），降落角度（或斜率，切線P1P2），求P1
將起飛角度轉(zhuǎn)換（k=tan(θ)）成斜率k1，降落角度轉(zhuǎn)成斜率k2，根據(jù)斜率公式y(tǒng)=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坐標(biāo)。（可調(diào)整角度（或k1,k2）以滿足實(shí)際要求）

曲線雖然推導(dǎo)出來，但是，飛機(jī)先加速然后減速，如何實(shí)現(xiàn)呢？

注意觀察，公式中t的取值范圍是0~1，我們可以讓飛機(jī)在前面小部分時(shí)間走過大部分距離，后面
大部分時(shí)間走過小部分距離來做到。
為了靈活調(diào)整，以及總時(shí)間固定的情況下，我們選擇了一種簡單的方法，將時(shí)間分片，人為的構(gòu)造
出一段前面加速后面減速的時(shí)間曲線。

示例：
const int kPiece[] = { 10,20,30,45,65,90,70,45,40,35,30,25,22,20,19,18,17,16,15 };
定時(shí)器設(shè)置為10ms，每隔10ms，計(jì)算一次t=kPiece(0~i) / kPiece(0~N) * T;
kPiece(0~i)為前i項(xiàng)和，kPiece(0~N)為總和，T為固定的總時(shí)間

飛機(jī)朝向

飛機(jī)的頭要隨著曲線改變朝向。很顯然，這個(gè)朝向就是曲線的切線方向。
求切線，正確的方式是求導(dǎo)。
在這里，我們選擇了一種簡單的方法：
記住當(dāng)前點(diǎn)和上一點(diǎn)，然后計(jì)算2點(diǎn)的斜率，再轉(zhuǎn)換成角度。

飛機(jī)大小

飛機(jī)大小變化沒有嚴(yán)格要求，可采取線性變化，在總時(shí)間T內(nèi)從1.0到0.25（根據(jù)素材大小決定），恰好做到與曲線同時(shí)變化結(jié)束。

特別注意
I、起飛角度轉(zhuǎn)換成斜率，在計(jì)算機(jī)世界，其坐標(biāo)系與數(shù)學(xué)中的坐標(biāo)系不一致，X軸一致，而Y軸相反，所以角度可能是負(fù)數(shù)（比如起始時(shí)往左飛行）
II、飛機(jī)朝向，斜率轉(zhuǎn)換成角度時(shí)，從A到B，B相對于A的位置可在4個(gè)象限，所以角度可能存在負(fù)角度，與此同時(shí)，素材中飛機(jī)也有個(gè)角度，那么繪制時(shí)，注意矯正角度
III、飛機(jī)降落時(shí)角度可能不正確（如從上方降落）。實(shí)際應(yīng)用時(shí)，由于飛機(jī)變小且速度較快，而且降落時(shí)調(diào)整了角度，所以此問題不明顯。如要保證飛機(jī)降落角度一定不變，可以考慮三次貝塞爾曲線

Gdiplus繪制飛機(jī)

Gdiplus::Graphics g(dc);
Gdiplus::PointF center(cx / 2, cy / 2);  // cx、cy為素材寬度和高度
g.TranslateTransform(center.X, center.Y);  // 轉(zhuǎn)換坐標(biāo)系
g.RotateTransform(angle_);  // 旋轉(zhuǎn)角度
g.SetInterpolationMode(Gdiplus::InterpolationModeHighQualityBilinear);
g.ScaleTransform(scale_, scale_);  // 縮放
g.TranslateTransform(-center.X, -center.Y);
g.DrawImage(plane_.get(), 0, 0);  // 繪制圖片

免費(fèi)領(lǐng)取驗(yàn)證碼、內(nèi)容安全、短信發(fā)送、直播點(diǎn)播體驗(yàn)包及云服務(wù)器等套餐

更多網(wǎng)易技術(shù)、產(chǎn)品、運(yùn)營經(jīng)驗(yàn)分享請?jiān)L問網(wǎng)易云社區(qū)。

文章來源： 網(wǎng)易云社區(qū)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/25342.html

相關(guān)文章

  • 如何反轉(zhuǎn)CSS中的貝塞爾曲線

    摘要：我們并不需要知道貝塞爾曲線背后的所有數(shù)學(xué)知識。我們可以使用相同的并設(shè)置并反轉(zhuǎn)貝塞爾曲線，這樣就實(shí)現(xiàn)了在正反兩個(gè)方向上使用同一個(gè)的效果。我們來看看如何計(jì)算反向的貝塞爾曲線。 首先來看一看我之前寫的一個(gè)CSS輪播動(dòng)畫效果，為了讓切換時(shí)動(dòng)畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關(guān)鍵詞，而使用了cubic-bezier（貝塞爾）函...

    zhangqh 評論0 收藏0

  • 如何反轉(zhuǎn)CSS中的貝塞爾曲線

    摘要：我們并不需要知道貝塞爾曲線背后的所有數(shù)學(xué)知識。我們可以使用相同的并設(shè)置并反轉(zhuǎn)貝塞爾曲線，這樣就實(shí)現(xiàn)了在正反兩個(gè)方向上使用同一個(gè)的效果。我們來看看如何計(jì)算反向的貝塞爾曲線。 首先來看一看我之前寫的一個(gè)CSS輪播動(dòng)畫效果，為了讓切換時(shí)動(dòng)畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關(guān)鍵詞，而使用了cubic-bezier（貝塞爾）函...

    nicercode 評論0 收藏0

  • 如何反轉(zhuǎn)CSS中的貝塞爾曲線

    摘要：我們并不需要知道貝塞爾曲線背后的所有數(shù)學(xué)知識。我們可以使用相同的并設(shè)置并反轉(zhuǎn)貝塞爾曲線，這樣就實(shí)現(xiàn)了在正反兩個(gè)方向上使用同一個(gè)的效果。我們來看看如何計(jì)算反向的貝塞爾曲線。 首先來看一看我之前寫的一個(gè)CSS輪播動(dòng)畫效果，為了讓切換時(shí)動(dòng)畫的過渡更加的平滑我在animation-timing-function屬性中并沒有使用CSS提供的各種關(guān)鍵詞，而使用了cubic-bezier（貝塞爾）函...

    amc 評論0 收藏0

  • 初識貝塞爾曲線

    摘要：貝塞爾曲線被廣泛用于制圖軟件中。多邊二次貝塞爾曲線可以看到有兩個(gè)控制點(diǎn)，這樣連續(xù)畫出來了。如果前一個(gè)曲線不存在，當(dāng)前點(diǎn)就是第一個(gè)控制點(diǎn)在中使用繪制二次貝塞爾曲線，參數(shù)分別為控制點(diǎn)和終點(diǎn)的值。繪制三次貝塞爾曲線。 貝塞爾曲線在CSS動(dòng)畫中和canvas、svg繪圖中都是比較重要的一個(gè)東西！所以我來好好的小結(jié)一下關(guān)于它的一些東西。 什么是貝塞爾曲線 貝塞爾曲線于1962，由法國工程師皮埃爾...

    MasonEast 評論0 收藏0

  • 翻譯 | 深入理解CSS時(shí)序函數(shù)

    摘要：一條正在繪制中的三次方貝塞爾曲線因?yàn)樵撉€由四個(gè)點(diǎn)形成，我們將其稱為三次方貝塞爾曲線，而不是二次方曲線三個(gè)點(diǎn)或四次方曲線五個(gè)點(diǎn)?，F(xiàn)在終于可以將貝塞爾曲線收入囊中了，也已經(jīng)對這 作者：Nicolas（滬江前端開發(fā)工程師）本文原創(chuàng)翻譯，轉(zhuǎn)載請注明作者及出處。 各位，趕緊綁住自己并緊緊抓牢了，因?yàn)楫?dāng)你掌握了特別有趣但又復(fù)雜的CSS時(shí)序函數(shù)之后，你將會(huì)真正體驗(yàn)到豎起頭發(fā)般的興奮感受。 好吧，本...

    Little_XM 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<