小程序文字变化动画

小程序中要求几处文案一直变化，并在最后固定一个文案，一开始想使用多个setInterval来控制这几处文案，但是发现多线程总是出问题，现在改成了一个线程来控制这几处文案的变化

效果图：

wxml文件：

<view class='detailTopTextCon'>

<label class='detailTopText detailTopText1 detailTopAnimate1'>{{text1}}</label>

<label class='detailTopText detailTopText2 detailTopAnimate2'>{{text2}}</label>

<label class='detailTopText detailTopText3 detailTopAnimate3'>{{text3}}</label>

<label class='detailTopText detailTopText4 detailTopAnimate4'>{{text4}}</label>

<label class='detailTopText detailTopText5 detailTopAnimate5'>{{text5}}</label>

<label class='detailTopText detailTopText6 detailTopAnimate6'>{{text6}}</label>

<label class='detailTopText detailTopText7 detailTopAnimate7'>{{text7}}</label>

<label class='detailTopText detailTopText8 detailTopAnimate8'>{{text8}}</label>

</view>

wxss文件：

/* pages/test/test.wxss */

page{

background: none;

}

.detailTopTextCon{

width: 680rpx;

margin: 0 auto;

margin-top: 370rpx;

position: relative;

}

.detailTopText{

color: black;

position: absolute;

}

.detailTopText1{

margin-left: 271rpx;

margin-top: 72rpx;

font-size: 84rpx;

}

.detailTopText2{

margin-left: 217rpx;

font-size: 40rpx;

}

.detailTopText3{

margin-left: 91rpx;

margin-top: 60rpx;

font-size: 29rpx;

}

.detailTopText4{

margin-left: 432rpx;

margin-top: 16rpx;

font-size: 57rpx;

}

.detailTopText5{

margin-left: 126rpx;

margin-top: 117rpx;

font-size: 37rpx;

}

.detailTopText6{

margin-left: 459rpx;

margin-top: 95rpx;

font-size: 47rpx;

}

.detailTopText7{

margin-left: 82rpx;

margin-top: 175rpx;

font-size: 47rpx;

}

.detailTopText8{

margin-left: 341rpx;

margin-top: 177rpx;

font-size: 43rpx;

}

js文件：

// pages/test/test.js

// start雷达图初始化数据

var topText = ["帅气", "时尚", "典雅", "甜美", "自然", "浪漫", "文雅", "摩登"];

var allSpaceTime = 50;//线程执行间隔时间

var animateinterval = '';

var rangArr = [

{

endText: '帅气',

texts: topText,

beginTime: 500,

spacetime: 10,

stime: 500

}, {

endText: '清爽干练',

texts: topText,

beginTime: 1000,

spacetime: 10,

stime: 1000

}, {

endText: '简约利落',

texts: topText,

beginTime: 1200,

spacetime: 10,

stime: 1000

}, {

endText: '几何',

texts: topText,

beginTime: 1400,

spacetime: 10,

stime: 1000

}, {

endText: '马伊琍',

texts: topText,

beginTime: 1800,

spacetime: 10,

stime: 1000

}, {

endText: '中性风',

texts: topText,

beginTime: 2000,

spacetime: 10,

stime: 1000

}, {

endText: '时尚先生',

texts: topText,

beginTime: 2200,

spacetime: 10,

stime: 1000

}, {

endText: '简约利落',

texts: topText,

beginTime: 2400,

spacetime: 10,

stime: 1000

}

]

Page({

/**

* 页面的初始数据

*/

data: {

text1: '',

text2: '',

text3: '',

text4: '',

text5: '',

text6: '',

text7: '',

text8: '',

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

topText = ["帅气", "时尚", "典雅", "甜美", "自然", "浪漫", "文雅", "摩登"]

},

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

this.randDomText();

},

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

},

// 文字闪烁动画

randDomText: function () {//endText最终显示文字，texts闪烁文字，time延迟时间,spacetime闪烁频率,stime闪烁周期

var that = this;

for (var i = 0; i < rangArr.length; i++) {

var rang = rangArr[i];

rang['runTime'] = 0; //累计运行时间

rang['isRun'] = false; //是否已经开始在执行了

rang['isStop'] = false;//是否已经执行完毕了

};

animateinterval = setInterval(function () {

var stop = true;

var showData = {};

for (var i = 0; i < rangArr.length; i++) {

var rangXX = rangArr[i];

if (!rangXX['isStop']) {

stop = false; //只要有一个没执行完就 就继续执行

rangXX['runTime'] = rangXX['runTime'] + allSpaceTime; //累计执行时间开始叠加

var changeWord = false; //是否修改词

if (!rangXX['isRun']) { //如果还没开始跑，判断下时间是否已经到开始跑的时间

if (rangXX['runTime'] >= rangXX['beginTime']) {//

rangXX['isRun'] = true;//到开始跑时间了

} else {

continue;

}

} else if (rangXX['runTime'] >= (rangXX['stime'] + rangXX['beginTime'])) { //如果当前队列的已经执行完毕，则显示最后一次的数据

rangXX['isStop'] = true;

if (rangXX['lastWord'] != rangXX['endText']) {

rangXX['lastWord'] = rangXX['endText'];

showData['text' + (i + 1)] = rangXX['endText'];//显示最后的词

}

continue;

}

var index = Math.floor((rangXX['runTime'] - rangXX['beginTime']) / rangXX['spacetime']) % rangXX['texts'].length;

var showWord = rangXX['texts'][index];

if (rangXX['lastWord'] != showWord) {

rangXX['lastWord'] = showWord;

showData['text' + (i + 1)] = showWord;

}

} else {

continue;

}

}

if (JSON.stringify(showData) != "{}") {

that.setData(showData);

}

if (stop) {

clearInterval(animateinterval);

}

}, allSpaceTime);

},

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

},

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

},

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

},

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

},

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

}

})