微信小程序:字体平滑放大和缩小

2021-07-24  本文已影响0人  我的小小笔尖

游戏升级时等级字体发生“放大后缩小”特效,提醒用户级别变化。

代码逻辑:

1,设置了两个定时器,一个用于字体放大,一个用于字体缩小;
2,字体放大:字体从16px逐步放大到42px,每15毫秒执行一次;
3,字体缩小:字体从42px逐步缩小回16px,每15毫秒执行一次;
4,在需要放大缩小字体时调用;
5,放大字体到42px,则注销字体放大定时器,转而调用字体缩小定时器。

  // 放大字体
  fontsizeup: function(that) {
    let fsize = 16
    that.setData({
      fontsizeuptimer: setInterval(function () {
        that.setData({levelfontsize: 'font-size: '+fsize+'px;'})
        fsize++
        if (fsize>=42) {
          clearInterval(that.data.fontsizeuptimer) // 注销字体放大定时器
          that.fontsizedown(that) // 转而调用字体缩小定时器
        }
      }, 15) // 每15毫秒调用一次fontsizeuptimer
    })
  },

  // 缩小字体
  fontsizedown: function(that) {
    let fsize = 42
    that.setData({
      fontsizedowntimer: setInterval(function () {
        that.setData({levelfontsize: 'font-size: '+fsize+'px;'})
        fsize--
        if (fsize<=16) {
          clearInterval(that.data.fontsizedowntimer) // 注销字体缩小定时器
        }
      }, 15) // 每15毫秒调用一次fontsizedowntimer
    })
  },
上一篇下一篇

猜你喜欢

热点阅读