微信小程序:字体平滑放大和缩小
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
})
},