最近有个需求,是想实现类似抖音直播送礼的功能,大致逻辑是:礼物从左侧先出来,然后数量放大缩小,两秒后隐藏。如果某个人送相同礼物,数量会累加。想用微信新的api,this.animation实现,第一次做小程序的需求,不知道有没有什么高阶的用法呢?贴一下我自己的小白代码,感觉这样写太臃肿,又不太好读,而且会有很多边界问题。如: 目前送礼连续点击,动画效果很不美观,还会有频闪问题,想问下有没有动画大佬帮忙解答一下,谢谢
if (Math.random() > 0.5) { // 这里这个只是目前随机上面出来还是下面出来,感觉也很傻
useAnimation( // 自己封装了一下,其实和文档的 this.animation一摸一样的,只是自己加了个无限循环的动画函数
this,
'.giveGiftAnimation1',
[
{ opacity: 1, translateX: '-400rpx' },
{ opacity: 1, translateX: 0 },
],
250, // 右移出来
)
setTimeout(() => {
useAnimation(
this,
'.giveGiftCountAnimation1',
[{ scale: [1, 1] }, { scale: [1.25, 1.25] }, { scale: [1, 1] }],
150,
)
}, 250) // 一个定时器,让文字放大缩小
setTimeout(() => {
useAnimation(
this,
'.giveGiftAnimation1',
[
{ opacity: 1, translateX: 0 },
{ opacity: 0, translateX: 0 },
],
250,
)
}, 2400) // 又一个定时器,就是动画的两秒后,再隐藏掉元素
setTimeout(() => { // 这个定时器是让下面的元素延时一点进行动画,看起来美观一点,但是点的快了,根本没动画了
useAnimation(
this,
'.giveGiftAnimation2',
[
{ opacity: 1, translateX: '-400rpx' },
{ opacity: 1, translateX: 0 },
],
250,
) // 同上
setTimeout(() => {
useAnimation(
this,
'.giveGiftCountAnimation2',
[{ scale: [1, 1] }, { scale: [1.25, 1.25] }, { scale: [1, 1] }],
150,
)
}, 250) // 定时器同上
setTimeout(() => {
useAnimation(
this,
'.giveGiftAnimation2',
[
{ opacity: 1, translateX: 0 },
{ opacity: 0, translateX: 0 },
],
250,
)
}, 2400) // 定时器同上
}, 1000)
} else { // 这个else 就是先让下面的元素进行动画,总之目前问题挺多的,希望大佬能给些建议或者优化~
useAnimation(
this,
'.giveGiftAnimation2',
[
{ opacity: 1, translateX: '-400rpx' },
{ opacity: 1, translateX: 0 },
],
250,
)
setTimeout(() => {
useAnimation(
this,
'.giveGiftCountAnimation2',
[{ scale: [1, 1] }, { scale: [1.25, 1.25] }, { scale: [1, 1] }],
150,
)
}, 250)
setTimeout(() => {
useAnimation(
this,
'.giveGiftAnimation2',
[
{ opacity: 1, translateX: 0 },
{ opacity: 0, translateX: 0 },
],
250,
)
}, 2400)
setTimeout(() => {
useAnimation(
this,
'.giveGiftAnimation1',
[
{ opacity: 1, translateX: '-400rpx' },
{ opacity: 1, translateX: 0 },
],
250,
)
setTimeout(() => {
useAnimation(
this,
'.giveGiftCountAnimation1',
[{ scale: [1, 1] }, { scale: [1.25, 1.25] }, { scale: [1, 1] }],
150,
)
}, 250)
setTimeout(() => {
useAnimation(
this,
'.giveGiftAnimation1',
[
{ opacity: 1, translateX: 0 },
{ opacity: 0, translateX: 0 },
],
250,
)
}, 2400)
}, 1000)
}
现在就是各种定时器搞出来的,点的快了,根本没法看,也没有什么头绪了