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