小程序开发|小程序制作|小程序开发网

搜索

小程序二次贝塞尔曲线,购物车商品曲线飞入效果

2022-5-31 18:26| 发布者: xiaoxiao| 查看: 258| 评论: 7

摘要: 前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。主要应用到的技术点:1、小程序wxss布局,以及数据绑定。2、js二次bezier曲线算法。核心算法,写在app.js


前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。
主要应用到的技术点:
1、小程序wxss布局,以及数据绑定。
2、js二次bezier曲线算法。

核心算法,写在app.js里。
[JavaScript] 纯文本查看 复制代码
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

调用方法和用法就不占篇幅了,都是基础的东西。效果图如下:

flybus.gif

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 牛摩的 2022-5-31 19:33
一下来就报错?有没有搞错
引用 yangyuan 2022-5-31 19:28
git上有源码,看下index中this.busPos 对象就是购物车的位置信息
引用 风琴来 2022-5-31 19:18
群吧,购物车图标的位置是固定的,你看下最后一个控制点
引用 xiaoxiao 2022-5-31 19:07
如果购物车图标在左侧 应该修改那些地方的代码 请告知
引用 牛摩的 2022-5-31 18:58
如果 购物车的图标放在左边 应该修改那个地方的代码?请告知 谢谢。。。
引用 yangyuan 2022-5-31 18:45
如果购物车图标在左边,需要修改那个地方的代码?请告知。。谢谢
引用 yangyuan 2022-5-31 18:36
持续点击图片会报错。。如何解决?

查看全部评论(7)

返回顶部