如何实现加入购物车的抛物线效果
发布于 3 年前 作者 weima 1696 次浏览 来自 分享

一、场景分析

在一些如商城、点餐小程序中实现购物车抛物线效果可以提升界面趣味性增加小程序用户体验。

二、效果预览

效果图压缩后速度有点快，请下载代码片段预览

三、实现原理

当用户点击物品时记录当前触摸点，根据触摸点计算抛物线运动的顶点位置，通过触摸点、顶点、购物车的位置计算出抛物线运动轨迹，然后控制 icon 运动。

  • 计算购物车在当前手机内的位置
/** 设置购物车的坐标位置 **/
wx.getSystemInfo({
   success: (res) => {
     let busPos = {}
     // x y 坐标分别取屏幕百分之八十的位置
     busPos['x'] = res.windowWidth * 0.8
     busPos['y'] = res.windowHeight * 0.8
     this.setData({
       busPos
     })
   }
 }) 

__商品点击事件的处理__  
点击物品后记录点击的位置，然后根据点击位置计算出抛物线的顶点位置，计算方式为点击位置的上方+150，右边+150（需要根据点击位置是否在购物左边还是右边进行判断）。

__根据点击，顶点，购物车三个位置计算出抛物线运动轨迹__
  1. 以3个控制点为例，点A、B、C、AB 上设置点 D、BC 上设置点 E、DE 连线上设置点 F，则最终的贝塞尔曲线是点F的坐标轨迹；
  2. 计算相邻控制点间距；
  3. 根据完成时间,计算每次执行时 D 在AB方向上移动的距离，E 在 BC 方向上移动的距离；
  4. 时间每递增 100ms，则 D、E 在指定方向上发生位移，F 在 DE 上的位移则可通过 AD/AB = DF/DE 得出；
  5. 根据 DE 的正余弦值和 DE 的值计算出F的坐标。
__开启定时器，依次按照贝塞尔曲线位置做动画位移__  
使用定时器将抛物线运动轨迹做动画位移。

__定时器执行完动画后将购物车角标+1__

__老规矩，结尾放代码片段__  
<a href="https://developers.weixin.qq.com/s/PnYfitmG7Hxv" rel="noopener" target="_blank">https://developers.weixin.qq.com/s/PnYfitmG7Hxv</a>
回到顶部