91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

小程序二次貝塞爾曲線實現購物車商品曲線飛入效果

發布時間:2020-09-22 15:50:00 來源:腳本之家 閱讀:141 作者:極樂叔 欄目:web開發

前段時間閑暇的時候看到一個貝塞爾曲線算法的文章,試著在小程序里去實現小程序的貝塞爾曲線算法,及其效果。

主要應用到的技術點:
1、小程序wxss布局,以及數據綁定
2、js二次bezier曲線算法

核心算法,寫在app.js里

bezier: function (points, times) {
 
 // 0、以3個控制點為例,點A,B,C,AB上設置點D,BC上設置點E,DE連線上設置點F,則最終的貝塞爾曲線是點F的坐標軌跡。
 
 // 1、計算相鄰控制點間距。
 
 // 2、根據完成時間,計算每次執行時D在AB方向上移動的距離,E在BC方向上移動的距離。
 
 // 3、時間每遞增100ms,則D,E在指定方向上發生位移, F在DE上的位移則可通過AD/AB = DF/DE得出。
 
 // 4、根據DE的正余弦值和DE的值計算出F的坐標。
 
 // 鄰控制AB點間距
 
 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點間距
 
 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方向上移動的距離
 
 const EACH_MOVE_AD = DIST_AB / times;
 
 // E每次在BC方向上移動的距離 
 
 const EACH_MOVE_BE = DIST_BC / times;
 
 // 點AB的正切
 
 const TAN_AB = (points[1]['y'] - points[0]['y']) / (points[1]['x'] - points[0]['x']);
 
 // 點BC的正切
 
 const TAN_BC = (points[2]['y'] - points[1]['y']) / (points[2]['x'] - points[1]['x']);
 
 // 點AB的弧度值
 
 const RADIUS_AB = Math.atan(TAN_AB);
 
 // 點BC的弧度值
 
 const RADIUS_BC = Math.atan(TAN_BC);
 
 // 每次執行
 
 for (var i = 1; i <= times; i++) {
 
 // AD的距離
 
 var dist_AD = EACH_MOVE_AD * i;
 
 // BE的距離
 
 var dist_BE = EACH_MOVE_BE * i;
 
 // D點的坐標
 
 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點的坐標
 
 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);
 
 // 此時線段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));
 
 // 此時DF的距離
 
 var dist_DF = (dist_AD / DIST_AB) * dist_DE;
 
 // 此時DF點的坐標
 
 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
 
 };
 
 }

注釋很詳細,算法的原理其實也很簡單。 源碼也發出來吧,github地址:https://github.com/xiongchenf/flybus.git

調用方法和用法就不占篇幅了,都是基礎的東西。效果圖如下:

小程序二次貝塞爾曲線實現購物車商品曲線飛入效果

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

灵丘县| 延长县| 漳平市| 信阳市| 盖州市| 邯郸市| 扎囊县| 甘孜县| 当雄县| 蓝山县| 宁城县| 海南省| 象山县| 会东县| 本溪市| 宜宾市| 吉木乃县| 宁陵县| 周至县| 旌德县| 新宁县| 延川县| 科技| 光泽县| 青州市| 广元市| 新野县| 龙口市| 奈曼旗| 盘山县| 汽车| 扶沟县| 大安市| 福安市| 张掖市| 连平县| 绥化市| 白水县| 德钦县| 珠海市| 志丹县|