⼩程序：公告字幕滚动播放（⽂字跑马灯效果）⼀、需求
公告⽂字仅限200字
公告内容仅限⼀⾏⽂字显⽰
公告内容持续滚动
⼆、解决思路
使⽤动画API（anslate），完成移动动画
使⽤定时器API（setInterval），完成循环播放动画
注意：
1. ⼩程序的动画API translate，只有动画效果还原后，才能进⾏第⼆次动画
2. 根据第⼀条，需要两个定时器：
第⼀个定时器：⽤于循环复原动画效果
第⼆个定时器：⽤于循环播放动画效果
3. 两个定时器的执⾏回调函数之间的时间间隔不能相同，否则会导致动画⽆法正常播放
4. 优化上述两个步骤为只⽤⼀个定时器来循环两个动画，采⽤中间睡眠⼀段时间，错开两个动画的播放开始时间
5. 因为动画的偏移距离由公告内容长度决定，造成了动画播放速度与公告内容相关。
（动画的duration: 1000：表⽰在该时间段内播放完整组动画）
三、实现效果
1.字幕第⼀次开始公告旁边（从右向左）滚动
2.字幕第⼆次从屏幕左边从右向左）滚动
三、实现代码
1.wxml
<view class='width border-box f-pl30 f-pr30 f-mt30 f-mb30'>
<form report-submit="true" bindsubmit="bindOpenAnnouncement">
<button class='btn-reset flex announcement order-box f-pl25 f-pr25' form-type="submit">
<view class='f-pl25 f-font24 f-pr25'>公告</view>
<view class='f-font24 s-32 announcement-context'>
<view animation="{{animationData}}" class="f-font24 s-32 announcement-text f-text-left">{{announcementText}}</view> </view>
</button>
</form>
</view>
2.wxss（此处只展⽰关键样式，其余为基本样式不做展⽰）
.announcement {
color: #a0a0a0;
background: #fff0e3;
border-radius: 6rpx;
line-height: 66rpx;
height: 66rpx;
}
.announcement-context {
width: 580rpx;
/* 偏移出⽂本框的内容隐藏掉 */
overflow: hidden;
}
.announcement-text {
width: 570rpx;
/* ⽂字内容只做⼀⾏显⽰ */
white-space: nowrap;
}
3.js
data: {
animationData: {}, //公告动画
announcementText: "营业时间从早上10点到晚上8点，⽀持预先下单，祝⽤餐愉快",//公告内容 },
onLoad: function(options) {
var that = this;
//创建动画实例
var animation = wx.createAnimation({
//此处以公告最长内容来设置动画持续时间（duration：决定整个动画播放的速度）
duration: 90000,
timingFunction: 'linear'
});
//偏移距离为公告内容的长度*字体⼤⼩（若字体⼤⼩使⽤rpx需要换算成px）
this.setData({
animationData: port()
});
// 循环播放动画关键步骤（使⽤两个定时器）
// 第⼀个定时器：将字幕恢复到字幕开始点（为屏幕左边）
this.setData({
animationData: port()
});
}.bind(this), 90000);
// 第⼆个定时器：重新开始移动动画
this.setData({
animationData: port()
});
}.bind(this), 90001);
},
onUnload: function(){
//清除定时器
veraAnimation);
startAnimation);
},
优化后的js
/**
* 开启公告字幕滚动动画
* @param {String} announcementText 公告内容
* @return {[type]} [description]
*/
initAnimation: function(announcementText) {
var that = this;
//初始化动画
var animation = wx.createAnimation({
duration: 22500,
timingFunction: 'linear'
});
animationData: port()
});
/****************************优化部分*******************************/
// 重新开始动画
duration: 0
});
that.setData({
animationData: port()
});
// 延迟5再执⾏下个动画
that.sleep(5);
animationData: port()
});
}.bind(this), 22500);
},
/**
* 睡眠时间
* @param {Number} num 需要延迟的时间长度
*/
sleep: function(num){
var nowTime = new Date();
var exitTime = Time() + num;
while(true){
nowTime = new Date();
Time() > exitTime)
return;
}
},
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论