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

前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。

主要应用到的技术点:
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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 购物车简单实例

    微信小程序,这里实现购物车功能的小demo,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组 1.购物车id:cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected 二.点击复选框toggle操作 如已经选中的,经点击变成未选中,反之而反之 点击依据index作为标识,而不用cid,方便遍历 三.全选操作 首次点击即为全部选中,再次点击为全不选,全选按

  • 微信小程序实现购物车代码实例详解

    其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在onShow中,而不是onLoad中: onShow: function () { const cart = wx.getStorageSync("cart"); let address = wx.getStorage

  • Python实现购物车购物小程序

    概要 按理说,我们入门的第一个小程序都应该是Hello World.因为比较简单,我这也就不做过多的演示 了. 下面是我写的一个小程序.主要用于练习Python的基本语法,以及入门. 主要实现功能 要求用户输入自己预期消费额度. 展示现有商品信息,要求用户选择 用户选择对应商品标号后(注意判断是否超出预期消费额度等操作),保存到购物车 用户退出后显示购物车信息以及剩余额度情况 代码: #!/usr/bin/env python # -*- coding: utf-8 -*- ""&qu

  • 微信小程序利用swiper+css实现购物车商品删除功能

    要实现的购物车效果如下: 小程序通过bind与catch绑定事件,没有event.stopPropagation()方法. bind:不会阻止冒泡事件向上冒泡, catch:可以阻止冒泡事件向上冒泡 用touchstart.touchmove.touchend实现滑块效果,无法动态js控制何时冒泡何时阻止冒泡,就会出现用bind时,左右上下滑动乱窜:用catch,商品区域只能左右滑动,无法上下滚动 而小程序提供的swiper通过css就可以实现删除滑块效果,同时不影响页面的正常滚动.具体如下 <

  • 微信小程序实战篇之购物车的实现代码示例

    哈喽,大家好,快半个月没写了,现在提笔都有点生硬了,一直没更新的原因,一个是代码君也要上班,加上最近工作比较忙,还有就是写文章一直未被认可,所以没什么动力再创作了,那时真的坚持不下去,打算放弃了,感谢读者曹明,一个韩国的研究生读者,支持我,并给我鼓励,期待我更新下一篇,我非常感动,瞬间战斗力恢复,其实你们简单的点赞,评论,都是给我最大的支持,好了,煽情完毕,该讲今天的重点了,购物车,购物车的界面实现到不是很难,难点是处理里面的逻辑,无论是小程序,还是APP,购物车的逻辑都是最难的,下面开始教大家

  • 微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品.当购物车为空时,页面会变为空购物车的布局 根据设计图,我们可以先实现静态页面.接下来,再看看一个购物车需要什么样的数据. 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(pr

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

    前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果. 主要应用到的技术点: 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.根据完成时间,计算每次执行时

  • 微信小程序 二维码canvas绘制实例详解

    微信小程序 二维码canvas绘制 var canvas = { width: 100, height:36 }; function verification(ctx) { // //清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // //生成随机颜色 function getRandomColor() { return "#" + ("00000" + ((Math.random() * 167772

  • node实现生成带参数的小程序二维码并保存到本地功能示例

    本文实例讲述了node实现生成带参数的小程序二维码并保存到本地功能.分享给大家供大家参考,具体如下: 注意:小程序必须要上线才能获取到小程序二维码,否则会报错.. 使用node koa2框架,生成小程序二维码,需要引入两个模块 var requestp = require('request-promise'); var fs = require('fs'); // 载入fs模块 通过微信接口,获取小程序二维码,并保存到本地.返回图片名称. var wxapi = {}; module.expor

  • 小程序角标的添加及绑定购物车数量进行实时更新的实现代码

    首先介绍一下角标的方法: // tabBer角标 index代表的是第几个tabber text表示角标内容 wx.setTabBarBadge({ index: 2, text: '1' }) } { wx.removeTabBarBadge({ //移除指定位置的tabbar右上角的标志 index: 2, }) 接下来介绍怎么实现绑定购物车数量进行实时更新: 这里的话代码在App.js里,这是因为我的tabbar底部的是需要填充数量,所以为了实时监听,我在APP.js里面做了如下操作 //

  • 微信小程序二维码生成工具 weapp-qrcode详解

    微信小程序 - 二维码生成工具 下载:weapp-qrcode.js文件 github:https://github.com/Pudon/weapp-qrcode-base64 在项目中引入 weapp-qrcode.js 文件 js const app = getApp(); const QR = require('../../lib/weapp-qrcode.js'); // 引入 weapp-qrcode Page({ /** * 页面的初始数据 */ data: { QrCodeURL:

  • uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果

    前言 实现思路:通过小程序API中的触摸事件,配合CSS来实现元素的显示和隐藏.ps(也想过另一种通过监听页面滚动的方式来实现,不过效果一定很差0.0) 一.需要用到的事件touchmove.touchend 二.话不多说上代码 1.看需求,如果是整个屏幕滑动后元素发生变化,最好放在最外面的view 代码如下: <view class="container" @touchmove="handletouchstart" @touchend="handl

  • 微信小程序中使用wxss加载图片并实现动画效果

    记录微信小程序中使用wxss加载图片并实现动画的方式,最终实现loading效果. 代码 .weui-loading { margin: 0 5px; width: 20px; height: 20px; display: inline-block; vertical-align: middle; animation: a 1s steps(12) infinite; background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bW

  • 使用express获取微信小程序二维码小记

    前言 遇到了一个需求,想要扫码后,进入微信小程序的某一个页面,这就要求二维码携带参数. 微信小程序开发文档很简单,但不太具体. 经百度和折腾,在express中成功获得了带参数的二维码. 总结以下几步,供参考. 1.express项目中引入http请求工具 为什么要在服务端引入这个工具?因为还需要用这个工具去找微信服务端拿access_token接口凭证,来保证安全. 笔者用的是axios.cmd进入根目录,npm安装. # npm i axios --save 肯定需要写一个获得二维码的接口.

  • 微信小程序实现下拉加载更多商品

    本文实例为大家分享了微信小程序下拉加载更多商品的具体代码,供大家参考,具体内容如下 1. source code <view class='goods'> <view class='good' wx:for="{{ goodslist }}" wx:key='index'> <view class='pic'> <image src='{{ item.imgUrl }}'></image> </view> <

  • 微信小程序实现获取小程序码和二维码java接口开发

    前言:目前小程序推出了自己的识别码,小程序码,这个圆形的码看起来比二维码好看.本文总结微信小程序的获取小程序码和二维码并生成二维码图片的接口开发.主要内容摘抄自微信小程序的API文档,java接口开发是自己总结开发. 微信小程序API文档:获取二维码 一.简介 通过后台接口可以获取小程序任意页面的二维码,扫描该二维码可以直接进入小程序对应的页面.目前微信支持两种二维码,小程序码(左),小程序二维码(右),如下所示: 二.获取小程序码 目前有两个接口可以生成小程序码,开发者可以根据自己的需要选择合

随机推荐