之前做讲了如何在 网页上做购物车飞入,今天来看看小程序版的购物车飞入:

小程序飞入购物车特效 gif 小程序飞入购物车特效

重点讲解

这个难点就在如何计算抛物线,这个在之前中已经有详细的介绍,在小程序中我们用一个单独的js用来计算抛物线的路径:

上面的parabola.js就是计算抛物线路径的,不过在小程序里面写和在网页上还是有点区别,网页的计算能力比较强,我们可以把一个抛物线划分的更细,然后利用requestAnimationFrame去绘制每个点的位置。

如果在小程序里面太过密集的计算会很卡,因此这样我们就采用一个中和的策略:把抛物线划分的更加粗糙,然后中间的过度我们用transition去过渡。

background Layer 1 在pc上我们每秒绘制60次 把抛物线划分成100段 在小程序我们每秒绘制10次 把抛物线划分成30段 中间用transition过渡

还有一个难点就是同时多个抛物线,这里维护了一个数组,里面放着要计算的方法,都是统一定时更新的,比如现在有5个抛物线,其实此时只有一个定时器,只不过这个定时器每次会计算5个坐标,这个定时器只要数组内有内容就运行,所有的数组内容都结束了那么定时器也就结束了。

background Layer 1 数组为空,不定时 数组有内容,开始定时计算 抛物线1 数组有多个,定时遍历计算 抛物线1 抛物线2 全部计算完毕,从数组移除,取消定时

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字