开发者社区
社区提问意见反馈
开发者钉组织
扫描二维码
加入支付宝开发者钉组织
文档中心
凯发app官方网站的技术支持 & 案例 faq 
支付宝小程序
案例分析
sdk & demo下载
常见问题
常用工具
iot小程序
运维保障
小程序 > 支付宝小程序 > 案例分析 > 小程序实现加入购物车抛物线效果
贡献者
收藏
我的文档
设置
场景分析
在一些如商城小程序中实现购物车抛物线效果可以提升界面趣味性增加小程序用户体验。 
效果预览

实现思路
整体实现思路是当用户点击物品时记录当前触摸点,根据触摸点计算抛物线运动的顶点位置,通过触摸点、顶点、购物车的位置计算出抛物线运动轨迹,然后控制 icon 运动。
.axml布局
列表 list 布局。 
计算购物车在页面中位置
获取屏幕宽高,将购物车固定在屏幕右下方宽高80%的位置。
物品点击事件的处理
点击物品后记录点击的位置,然后根据点击位置计算出抛物线的顶点位置,计算方式为点击位置的上方 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 
完整项目代码
请查看
内容没有解决您的问题?您还可以前往 或 寻求帮助
凯发k8官方网娱乐官方 copyright © 2022 支付宝(杭州)信息技术有限公司  | icp证浙b2-20160559
该文档对你是否有帮助?
当前页面目录