小程序实现抛物线动画？

Question

现在做一个项目，在微信小程序端可以实现加入购物车的抛物线动画吗？虽然小程序有wx.createAnimation()来实现动画，可我思考了一天依旧毫无头绪，哪位大神给点思路啊

Answer 1

用css中transform的translate3d配合transition实现

Answer 2

小程序的creataeAnimation实际上就是对css3动画的封装而已。

你可以先了解一下css3的，加入抛物线无非是一个图片在 x 轴 和 y 轴的同时移动效果.

不需要什么translate3D也能做

主要借助 translateX 和 translateY。

https://mp.weixin.qq.com/debu...

http://www.w3school.com.cn/cs...

Answer 3

这种效果的动画需要求出轨迹方程上的每个坐标点，然后每次移动到那个点。
下图是canvas实现的，换成其它标签元素也一样。