更新时间:2022-12-02 17:04:57贡献者收藏我的文档设置返回文档场景分析在一些如商城小程序中实现购物车抛物线效果可以提升界面趣味性增加小程序用户体验。 效果预览实现思路整体实现思路是当用户点击物品时记录当前触摸点,根据触摸点计算抛物线运动的顶点位置,通过触摸点、顶点、购物车的位置计算出抛物线运动轨迹,然后控制 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 完整项目代码请查看 。