android 购物车抛物线,添加到购物车抛物线动画
我感覺嚴格的拋物線動畫不能通過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坐標，重力加速度值是決定拋物線軌跡的必須要素。
與50位技術專家面對面20年技術見證，附贈技術全景圖總結
以上是生活随笔為你收集整理的android 购物车抛物线,添加到购物车抛物线动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android 自动更新 服务端,搭建a
- 下一篇： 荣耀v30pro搭载鸿蒙吗,荣耀麒麟30