最近有个需求，是想实现类似抖音直播送礼的功能，大致逻辑是：礼物从左侧先出来，然后数量放大缩小，两秒后隐藏。如果某个人送相同礼物，数量会累加。想用微信新的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) }