欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

小程序二次貝塞爾曲線實(shí)現(xiàn)購物車商品曲線飛入效果

 更新時間:2019年01月07日 10:28:06   作者:極樂叔  
這篇文章主要介紹了小程序二次貝塞爾曲線實(shí)現(xiàn)購物車商品曲線飛入效果,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

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

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

核心算法,寫在app.js里

bezier: function (points, times) {
 
 // 0、以3個控制點(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、計算相鄰控制點(diǎn)間距。
 
 // 2、根據(jù)完成時間,計算每次執(zhí)行時D在AB方向上移動的距離,E在BC方向上移動的距離。
 
 // 3、時間每遞增100ms,則D,E在指定方向上發(fā)生位移, F在DE上的位移則可通過AD/AB = DF/DE得出。
 
 // 4、根據(jù)DE的正余弦值和DE的值計算出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方向上移動的距離
 
 const EACH_MOVE_AD = DIST_AB / times;
 
 // E每次在BC方向上移動的距離 
 
 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);
 
 // 此時線段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點(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
 
 };
 
 }

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

調(diào)用方法和用法就不占篇幅了,都是基礎(chǔ)的東西。效果圖如下:

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 微信小程序搭建自己的Https服務(wù)器

    微信小程序搭建自己的Https服務(wù)器

    這篇文章主要介紹了微信小程序搭建Https服務(wù)器,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • JS中video標(biāo)簽自動播放音視頻并繪制波形圖效果

    JS中video標(biāo)簽自動播放音視頻并繪制波形圖效果

    html中的<video>標(biāo)簽可以用來播放常見的音視頻格式,支持的格式包括:MP3、Ogg、WAV、AAC、MP4、WebM、AVI等,當(dāng)然支持的格式也和瀏覽器和操作系統(tǒng)有關(guān),這篇文章主要介紹了video標(biāo)簽自動播放音視頻并繪制波形圖,需要的朋友可以參考下
    2023-09-09
  • 前端中間件Midway的使用教程

    前端中間件Midway的使用教程

    Midway 基于 TypeScript 開發(fā),結(jié)合了面向?qū)ο螅∣OP + Class + IoC)與函數(shù)式(FP + Function + Hooks)兩種編程范式,并在此之上支持了 Web / 全棧 / 微服務(wù) / RPC / Socket / Serverless 等多種場景,這篇文章主要介紹了前端中間件Midway的使用,需要的朋友可以參考下
    2023-05-05
  • js、jquery圖片動畫、動態(tài)切換示例代碼

    js、jquery圖片動畫、動態(tài)切換示例代碼

    這篇文章主要介紹了通過js、jquery實(shí)現(xiàn)的圖片動畫、圖片動態(tài)切換 ,需要的朋友可以參考下
    2014-06-06
  • 保姆級Decimal.js使用教程(解決js精度問題)

    保姆級Decimal.js使用教程(解決js精度問題)

    這篇文章主要給大家介紹了關(guān)于保姆級Decimal.js使用的相關(guān)資料,文中介紹的方法主要解決了js精度問題,decimal.js庫它是一個強(qiáng)大的JavaScript庫,用于解決浮點(diǎn)數(shù)計算精度不準(zhǔn)確的問題,需要的朋友可以參考下
    2024-05-05
  • JS面向?qū)ο缶幊袒A(chǔ)篇(三) 繼承操作實(shí)例詳解

    JS面向?qū)ο缶幊袒A(chǔ)篇(三) 繼承操作實(shí)例詳解

    這篇文章主要介紹了JS面向?qū)ο缶幊汤^承操作,結(jié)合實(shí)例形式詳細(xì)分析了JS面向?qū)ο罄^承的具體概念、原理、實(shí)現(xiàn)方法及操作注意事項,需要的朋友可以參考下
    2020-03-03
  • 解決layui表格內(nèi)文本超出隱藏的問題

    解決layui表格內(nèi)文本超出隱藏的問題

    今天小編就為大家分享一篇解決layui表格內(nèi)文本超出隱藏的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • JavaScript數(shù)組Array的一些常用方法總結(jié)

    JavaScript數(shù)組Array的一些常用方法總結(jié)

    JavaScript的Array對象是用于構(gòu)造數(shù)組的全局對象,數(shù)組是類似于列表的高階對象,下面這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組Array的一些常用方法,需要的朋友可以參考下
    2021-11-11
  • js使用i18n實(shí)現(xiàn)頁面國際化的方法

    js使用i18n實(shí)現(xiàn)頁面國際化的方法

    本篇文章主要介紹了js使用i18n實(shí)現(xiàn)頁面國際化的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • JSQL 批量圖片切換的實(shí)現(xiàn)代碼

    JSQL 批量圖片切換的實(shí)現(xiàn)代碼

    其實(shí)這個example也很簡單, 就是根據(jù)where后的條件批量修改element的屬性,此處為Img元素
    2010-05-05

最新評論