收藏
回答

this.animation 有没有什么高级用法?

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

1 个回答

  • 珊珊大哥
    珊珊大哥
    2023-08-09

    现在就是各种定时器搞出来的,点的快了,根本没法看,也没有什么头绪了

    2023-08-09
    有用
    回复
登录 后发表内容