我感覺嚴(yán)格的拋物線動畫不能通過createAnimation實(shí)現(xiàn)，但是可以通過幀動畫。

這是我之前寫的拋物線組件：

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：

調(diào)用：

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

});

}

});

備注：重點(diǎn)在于拋物線函數(shù)parabolaAnimate的算法，其中起點(diǎn)坐標(biāo)，終點(diǎn)坐標(biāo)，頂點(diǎn)y坐標(biāo)，重力加速度值是決定拋物線軌跡的必須要素。

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的android 购物车抛物线,添加到购物车抛物线动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。