我感觉严格的抛物线动画不能通过createAnimation实现，但是可以通过帧动画。

这是我之前写的抛物线组件：

ts：

Component({

data: {

left: 0,

top: 0,

hidden: true,

},

timer: 0,

detached() {

this.cancel();

},

pageLifetimes: {

hide() {

this.cancel();

},

},

methods: {

animate(options: IOptions & { onEnd: () => void }) {

const { onEnd } = options;

this.cancel(false);

this.setData({

left: options.start.x,

top: options.start.y,

hidden: false,

});

parabolaAnimate(options, ({ x, y }, timer) => {

this.setData({ left: x, top: y });

this.timer = timer;

if (timer === 0) {

this.setData({ hidden: true });

if (typeof onEnd === 'function') {

onEnd();

}

}

});

},

cancel(hidden = true) {

if (this.timer) {

clearInterval(this.timer);

this.timer = 0;

}

if (hidden) {

this.setData({ hidden: true });

}

},

},

});

interface IOptions {

start: { x: number; y: number };

end: { x: number; y: number };

topY: number;

gforce?: number;

frameDuration?: number;

}

function parabolaAnimate(

options: IOptions,

callback: (ponit: { x: number; y: number }, timer: number) => void

) {

const { start, end, topY, gforce = 2000, frameDuration = 10 } = options;

const tStartToTop = Math.sqrt((Math.abs(topY - start.y) * 2) / gforce);

const tTopToEnd = Math.sqrt((Math.abs(topY - end.y) * 2) / gforce);

const tFrame = frameDuration / 1000;

let tRest = tStartToTop + tTopToEnd;

let vx = (end.x - start.x) / (tStartToTop + tTopToEnd);

let vy = -gforce * tStartToTop;

let startX = start.x;

let startY = start.y;

let timer = setInterval(() => {

const ponit = {

x: startX + vx * tFrame,

y: startY + vy * tFrame + (gforce * tFrame * tFrame) / 2,

};

vy = vy + gforce * tFrame;

tRest = tRest - tFrame;

startX = ponit.x;

startY = ponit.y;

if (tRest <= 0) {

clearInterval(timer);

timer = 0;

}

callback(ponit, timer);

}, frameDuration);

}

wxml：

调用：

Page({

onReady() {

this.parabolaBall = this.selectComponent("#parabola-ball");

this.systemInfo = wx.getSystemInfoSync();

},

animateBall(e) {

const { screenHeight, screenWidth } = this.systemInfo;

const { clientX, clientY } = e.touches[0];

const start = {

x: clientX,

y: clientY

};

this.parabolaBall.animate({

start,

end: {

x: screenWidth * 0.62,

y: screenHeight + 30

},

topY: clientY + 50

});

}

});

备注：重点在于抛物线函数parabolaAnimate的算法，其中起点坐标，终点坐标，顶点y坐标，重力加速度值是决定抛物线轨迹的必须要素。