小程序二次貝塞爾曲線實(shí)現(xiàn)購(gòu)物車商品曲線飛入效果-創(chuàng)新互聯(lián)

前段時(shí)間閑暇的時(shí)候看到一個(gè)貝塞爾曲線算法的文章，試著在小程序里去實(shí)現(xiàn)小程序的貝塞爾曲線算法，及其效果。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、網(wǎng)站制作、鳳山網(wǎng)絡(luò)推廣、微信小程序定制開發(fā)、鳳山網(wǎng)絡(luò)營(yíng)銷、鳳山企業(yè)策劃、鳳山品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供鳳山建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

主要應(yīng)用到的技術(shù)點(diǎn)：
1、小程序wxss布局，以及數(shù)據(jù)綁定
2、js二次bezier曲線算法

核心算法，寫在app.js里

bezier: function (points, times) {
 
 // 0、以3個(gè)控制點(diǎn)為例，點(diǎn)A,B,C,AB上設(shè)置點(diǎn)D,BC上設(shè)置點(diǎn)E,DE連線上設(shè)置點(diǎn)F,則最終的貝塞爾曲線是點(diǎn)F的坐標(biāo)軌跡。
 
 // 1、計(jì)算相鄰控制點(diǎn)間距。
 
 // 2、根據(jù)完成時(shí)間,計(jì)算每次執(zhí)行時(shí)D在AB方向上移動(dòng)的距離，E在BC方向上移動(dòng)的距離。
 
 // 3、時(shí)間每遞增100ms，則D,E在指定方向上發(fā)生位移, F在DE上的位移則可通過(guò)AD/AB = DF/DE得出。
 
 // 4、根據(jù)DE的正余弦值和DE的值計(jì)算出F的坐標(biāo)。
 
 // 鄰控制AB點(diǎn)間距
 
 var bezier_points = [];
 
 var points_D = [];
 
 var points_E = [];
 
 const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0]['y'], 2));
 
 // 鄰控制BC點(diǎn)間距
 
 const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1]['y'], 2));
 
 // D每次在AB方向上移動(dòng)的距離
 
 const EACH_MOVE_AD = DIST_AB / times;
 
 // E每次在BC方向上移動(dòng)的距離 
 
 const EACH_MOVE_BE = DIST_BC / times;
 
 // 點(diǎn)AB的正切
 
 const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
 
 // 點(diǎn)BC的正切
 
 const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
 
 // 點(diǎn)AB的弧度值
 
 const RADIUS_AB = Math.atan(TAN_AB);
 
 // 點(diǎn)BC的弧度值
 
 const RADIUS_BC = Math.atan(TAN_BC);
 
 // 每次執(zhí)行
 
 for (var i = 1; i <= times; i++) {
 
 // AD的距離
 
 var dist_AD = EACH_MOVE_AD * i;
 
 // BE的距離
 
 var dist_BE = EACH_MOVE_BE * i;
 
 // D點(diǎn)的坐標(biāo)
 
 var point_D = {};
 
 point_D['x'] = dist_AD * Math.cos(RADIUS_AB) + points[0]['x'];
 
 point_D['y'] = dist_AD * Math.sin(RADIUS_AB) + points[0]['y'];
 
 points_D.push(point_D);
 
 // E點(diǎn)的坐標(biāo)
 
 var point_E = {};
 
 point_E['x'] = dist_BE * Math.cos(RADIUS_BC) + points[1]['x'];
 
 point_E['y'] = dist_BE * Math.sin(RADIUS_BC) + points[1]['y'];
 
 points_E.push(point_E);
 
 // 此時(shí)線段DE的正切值
 
 var tan_DE = (point_E['y'] - point_D['y']) / (point_E['x'] - point_D['x']);
 
 // tan_DE的弧度值
 
 var radius_DE = Math.atan(tan_DE);
 
 // 地市DE的間距
 
 var dist_DE = Math.sqrt(Math.pow((point_E['x'] - point_D['x']), 2) + Math.pow((point_E['y'] - point_D['y']), 2));
 
 // 此時(shí)DF的距離
 
 var dist_DF = (dist_AD / DIST_AB) * dist_DE;
 
 // 此時(shí)DF點(diǎn)的坐標(biāo)
 
 var point_F = {};
 
 point_F['x'] = dist_DF * Math.cos(radius_DE) + point_D['x'];
 
 point_F['y'] = dist_DF * Math.sin(radius_DE) + point_D['y'];
 
 bezier_points.push(point_F);
 
 }
 
 return {
 
 'bezier_points': bezier_points
 
 };
 
 }

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站題目：小程序二次貝塞爾曲線實(shí)現(xiàn)購(gòu)物車商品曲線飛入效果-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://muchs.cn/article26/deijjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、企業(yè)網(wǎng)站制作、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站改版、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)