共计 2281 个字符，预计需要花费 6 分钟才能阅读完成。
使用 Animation，setTimeval 完成单行轮播 git 文件地址 https://github.com/zhangrui-1…
wxml 文件
<view class=’contain’>
<image src=’/images/notice.png’></image>
<view class=’xian’></view>
<view class=’notice container’>
<view class=’announcement-text’ animation=”{{animationData}}”> {{notice_content}}</view>
</view>
</view>
css 文件
.contain{
position: relative;
width: 670rpx;
height: 50rpx;
line-height: 50rpx;
background:rgba(253,253,253,1);
margin: 20rpx auto 0;
z-index: 10;
font-size: 30rpx;
overflow:auto;
box-shadow:0px 0px 7rpx 0px rgba(83,152,95,0.18);
border-radius:10rpx;
}
.contain image{
display: inline-block;
width: 30rpx;
height: 30rpx;
margin: 9rpx 25rpx;
}
.contain .xian{
width: 2rpx;
height: 36rpx;
background: rgba(135,135,135,0.5);
position: absolute;
left: 80rpx;
top:7rpx;
}
.contain .notice{
position: absolute;
z-index: 11;
width: 538rpx;
margin-left: 82rpx;
padding: 0 25rpx;
height: 36rpx;
line-height: 36rpx;
top: 7rpx;
font-size: 26rpx;
color: #888888;
overflow: hidden;
}
.announcement-text {
width: 538rpx;
white-space: nowrap;
}
js 文件
const app = getApp()
Page({
data: {
// notice_content:’ 公告字幕滚动播放（文字跑马灯效果）, 使用动画和定时器完成，代码片段是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验 ’,
notice_content: ‘ 公告字幕滚动播放（文字跑马灯效果）,,,,,,,, 使用动画和定时器完成，代码片段是一种迷你、’,
animationData: {}, // 公告动画
},
onLoad: function () {
let that = this;
let reg = /[\u4e00-\u9fa5]/g;
let text_con = that.data.notice_content;
let textLen = text_con.length,
textStrLen = text_con.match(reg).length;
// 计算有多少个, 加一是为了避免内容没有全部离开显示框
let hasStrLen = textStrLen + Math.ceil((textLen – textStrLen)/2)+1
console.log(hasStrLen)
let timeT = hasStrLen * 200
console.log(timeT)
// 创建动画实例
var animation = wx.createAnimation({
// 此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
duration: timeT,
timingFunction: ‘linear’
});
// // 偏移距离为公告内容的长度 * 字体大小（若字体大小使用 rpx 需要换算成 px）
animation.translate(-Number(hasStrLen * 13), 0).step();
// animation.translate(-300, 0).step();
that.setData({
animationData: animation.export()
});
// 循环播放动画关键步骤（使用两个定时器）
// 第一个定时器：将字幕恢复到字幕开始点（为屏幕左边）, 时间比初始值小，重新给 animation 赋值，刷新文字
that.t1 = setInterval(function () {
animation = wx.createAnimation({
// 此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
duration: timeT,
timingFunction: ‘linear’
});
animation.translate(0, 0).step({duration: 0});
that.setData({
animationData: animation.export()
});
}.bind(that), timeT -1);
// 第二个定时器：重新开始移动动画, 重置文本的位置
that.t2 = setInterval(function () {
animation.translate(-Number(hasStrLen * 13), 0).step();
that.setData({
animationData: animation.export()
});
}.bind(this), (timeT + 10) / 10);
},
})
