[发明专利]一种基于微信小程序平台添加到购物车抛物线动画的方法

说明书

本发明涉及微信小程序平台技术领域，特别涉及一种基于微信小程序平台商品添加到购物车时出现抛物线动画效果的方法。本发明的方法是在点击右侧添加商品购物车时，获得点击的位置及小球所在页面的位置及小球要运行到的位置，并把定义的小球在后台运行到点击的位置并显示，然后根据运行中x的值按公式（y=a*x*x+b*x+c）取得y的值，其中a、b、c的值可根据起始点与结束点计算出来，最后使用left与top动画运行小球即可形成抛物线轨迹。本发明解决了基于微信小程序平台商品添加到购物车时没有一种形象的按抛物线轨迹运行的动画效果的添加问题。

技术领域

本发明涉及微信小程序平台技术领域，特别涉及一种基于微信小程序平台商品添加到购物车时没有一种形象的按抛物线轨迹运行的动画效果的添加方法。

背景技术

在微信小程序平台上商品添加到购物车时，多数小程序都没有动画添加效果，或者商品运行走直线，这样不形象、不生动，用户体验非常不好；为了解决这些问题，需要实现一种生动的、形象的按照一定抛物线轨迹运行的动画效果的添加商品的方法。

发明内容

本发明解决的技术问题在于提供一种商品添加到购物车时出现抛物线动画效果的方法；解决了商品添加到购物车时没有一种形象的按抛物线轨迹运行的动画效果的添加问题。

本发明解决上述技术问题的技术方案是：

在点击右侧添加商品购物车时，获得点击的位置及小球所在页面的位置及小球要运行到的位置，并把定义的小球在后台运行到点击的位置并显示，然后根据运行中x的值按公式（y = a * x*x + b*x +c）取得y的值，其中a、b、c的值可根据起始点与结束点计算出来，最后使用left与top动画运行小球即可形成抛物线轨迹。从而解决了基于微信小程序平台商品添加到购物车时没有形象的运行轨迹的动画效果的问题。

所述的方法具体包括如下步骤：

步骤一、在微信小程序项目中创建一个商品列表页面，在js文件中data里定义数据变量carts[]，在onload方法里通过请求服务获得数据并设值到carts中；

步骤二、在商品列表页面每个item里都添加购物车按钮图标并绑定事件addToCart；

步骤三、同时在商品列表页面最后位置添加小球View控件，初始时不可见，增加动画animation、left及top动态属性，并在js文件中data里定义；

步骤四、在js文件中定义方法addToCart，并获得当前item所在位置的索引，根据索引及carts可获得当前的item；

步骤五、初始化动画小球animation相关属性;

步骤六、另写一个函数startAnim来实现抛物线轨迹动画效果，每次开始动画前小球运行到当前的点击位置，然后开始相关的抛物线轨迹动画;

步骤七、动画结束后，把item添加到carts中并增加数量，最后更新远程服务器，完成添加功能。

本发明的有益效果：当在点击右侧添加商品购物车时，获得点击的位置及小球所在页面的位置及小球要运行到的位置，并把定义的小球在后台运行到点击的位置并显示，然后根据运行中x的值按公式（y = a * x*x + b*x +c）取得y的值，其中a、b、c的值可根据起始点与结束点计算出来，最后使用left与top动画运行小球，从而达到形成抛物线轨迹动画的目的。有效解决解决了基于微信小程序平台商品添加到购物车时没有一种形象的按抛物线轨迹运行的动画效果的添加方法。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的流程图。

具体实施方式