JS抛物线动画示例制作

在制作无人值守小程序的项目中，有一天，产品说要向某厂商的产品学习，在购物车中加入抛物线球动画。好吧，你是最大的产品，做吧！

让我先给你看看效果图

分析

这种起始位置不固定的动画自然无法使用gif图片，只能用原生代码实现

我们有什么工具来实现动画？

小程序提供JS API createAnimation来创建动画

CSS动画

借助工具，我们来看看什么是抛物线。

这里，我们只讨论水平抛物线。从数学上讲，水平抛物线是【水平匀速垂直加速运动】。当它被转换到代码级别时，它在动画效果timingFunction中。水平动画使用线性，垂直动画使用缓和。

因此，我们需要将这个抛物线动画分解成两个具有不同动画效果的同步动画。

实现

小程序的实现

JS:

cartanimitation(x，y) {//x y为手指点击的坐标，即球的起始坐标让self=this，carty=app。globaldata.winheight-50，//结束位置(购物车图片)纵坐标cartX=50，//结束位置(购物车图片)横坐标动画x=flyx (cartx，x)，//创建球的水平动画y=fly(carty，y)，//创建球的垂直动画this.setdata ({ballx:x，bally:y，Show ball : true })settimeoutes 6(100)。然后(()={//100秒延时，确保球到位并显示self . setdata({ Animation x : Animation x . export())，Animation y : Animation y . export()，})返回settimeout es6 (400)//400是球的抛物线动画时间})。然后(()={//隐藏球this . setdata({ show ball : false，})})函数settimeout es 6(Sec){//promise settimeout返回新的promise ((resolve，reject)={ settimeout(()={ resolve()}，Sec)})}函数flyx (cartx，orix){//水平动画让动画=wx . create animation({ duration 3360 400，计时函数： ' linear '，})动画。左(cartx)。step()返回动画}函数fly (carty，ori){//垂直动画让动画=wx。创建动画({持续时间： 400，TimingFunctions : ' easy in '，})动画. top(cartY)。step()返回动画}HTML:

视图动画='{{animationY}} '样式=' position:fixedtop: { { ballY } } px'隐藏='{{！show ball } } ' view class=' ball ' animation=' { { animationX } } ' style=' position : fixed；left: { { ballX } } px'/view/view据我所知，transform: transtate()实现的动画会比左上有更好的表现，但尝试后发现无法达到理想的交互效果，期待进一步研究

H5的执行情况

//todo