小程序文字变化动画

骑猪看日落 2022-05-26 13:46 210阅读 0赞

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

效果图：

![20180503160047288][]

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: 680 rpx ;

margin: 0 auto ;

margin-top: 370 rpx ;

position: relative ;

.detailTopText \{

color: black ;

position: absolute ;

.detailTopText1 \{

margin-left: 271 rpx ;

margin-top: 72 rpx ;

font-size: 84 rpx ;

.detailTopText2 \{

margin-left: 217 rpx ;

font-size: 40 rpx ;

.detailTopText3 \{

margin-left: 91 rpx ;

margin-top: 60 rpx ;

font-size: 29 rpx ;

.detailTopText4 \{

margin-left: 432 rpx ;

margin-top: 16 rpx ;

font-size: 57 rpx ;

.detailTopText5 \{

margin-left: 126 rpx ;

margin-top: 117 rpx ;

font-size: 37 rpx ;

.detailTopText6 \{

margin-left: 459 rpx ;

margin-top: 95 rpx ;

font-size: 47 rpx ;

.detailTopText7 \{

margin-left: 82 rpx ;

margin-top: 175 rpx ;

font-size: 47 rpx ;

.detailTopText8 \{

margin-left: 341 rpx ;

margin-top: 177 rpx ;

font-size: 43 rpx ;

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 () \{

\})

[20180503160047288]: /images/20220526/0f4a1908b0b14239b240e7acb7abf239.png

小程序文字变化动画

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关原生js实现移动动画，变化动画

相关 Taro 小程序 Canvas文字居中

相关文字菜单动画畅想

相关小程序文字变化动画

相关小程序点击之后图标和文字发生变化

相关小程序抽奖动画实现

相关小程序导航栏简单动画

相关小程序旋转动画

相关微信小程序：动画（Animation）

相关小程序文字循环滚动效果