前言

日常開發(fā)中，我們經(jīng)常會(huì)遇到文字橫向循環(huán)滾動(dòng)的效果，俗稱走馬燈，也是項(xiàng)目中經(jīng)常會(huì)使用的一個(gè)功能。在網(wǎng)頁(yè)web前端很常見，今天就介紹下小程序的實(shí)現(xiàn)方式，一種是用的css樣式實(shí)現(xiàn)，另一種是運(yùn)用小程序的動(dòng)畫功能實(shí)現(xiàn)。

@keyframes 實(shí)現(xiàn)

利用@keyframes的規(guī)則來(lái)實(shí)現(xiàn)，非常方便，只需要css樣式就可以滿足，使用方法跟web上一樣。

<view class="marquee">
 <text>這是一段滾動(dòng)的文字</text>
</view>

樣式類，from to 來(lái)定義動(dòng)畫的開始結(jié)束，這里是從屏幕最右端向左滑，觸及到最左側(cè)后重新開始新一輪動(dòng)畫。

@keyframes translation {
 from {
 margin-left: 750rpx; //從屏幕最右端開始
 }

 to {
 margin-left: 0px;
 }
}

.marquee{
 white-space: nowrap;
 animation-name: translation; //定義動(dòng)畫的名稱
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
}

如果想要的效果是滑動(dòng)到左側(cè)之后，文字繼續(xù)左滑，直到全部消失，再?gòu)淖钣议_始動(dòng)畫的，那么就需要再加上文字的長(zhǎng)度，這里需要去計(jì)算文字的長(zhǎng)度，使用SelectorQuery 對(duì)象實(shí)例來(lái)拿到文字節(jié)點(diǎn)的寬度。在頁(yè)面首次渲染完畢onReady時(shí)執(zhí)行，查詢到對(duì)應(yīng)文字節(jié)點(diǎn)信息的對(duì)象，得到文字的長(zhǎng)度。這里定義的是上面的marquee類名。

onReady: function () {
 let query = wx.createSelectorQuery();
 query.select('.marquee').boundingClientRect();
 query.exec((res) => {
  if (res[0]) {
  this.setData({
   marqueeWidth: res[0].width
  })
  }
 })
}

然后使用css var() 函數(shù)插入定義的屬性值，到結(jié)束的位置處，讓它走完整個(gè)屏幕以及自身文字的長(zhǎng)度。定義一個(gè)名為 "--marqueeWidth" 的屬性，然后在wxss樣式文件里使用var()函數(shù)調(diào)用該屬性：

<view class="marquee" style="--marqueeWidth:-{{marqueeWidth}}px">
 <text>這是一段滾動(dòng)的文字</text>
</view>

wxss樣式里：
@keyframes translation {
 from {
 margin-left: 750rpx;
 }

 to {
 margin-left: var(--marqueeWidth);
 }
}

這是通過(guò)css的方式實(shí)現(xiàn)的，非常方便，但是會(huì)出現(xiàn)在部分機(jī)型上適配的問題，還有一種是通過(guò)Animation動(dòng)畫實(shí)現(xiàn)。

animation實(shí)現(xiàn)

通過(guò)animation動(dòng)畫實(shí)例來(lái)完成動(dòng)畫，一開始讓視圖位于屏幕右側(cè)超出屏幕的。

<view class="marquee2" bindtransitionend="animationend" animation="{{animationData}}">
	<text>這是一段滾動(dòng)的文字</text>
</view>

.marquee2{
 display: inline-block;
 white-space: nowrap;
 margin-left: 750rpx;
}

同樣這里計(jì)算了文字的長(zhǎng)度，通過(guò)Animation.translate(number tx, number ty)平移屬性進(jìn)行移動(dòng)操作，直至移出整個(gè)屏幕。在一組動(dòng)畫完成之后，調(diào)用bindtransitionend回調(diào)，再一次去執(zhí)行動(dòng)畫，

this.animation = wx.createAnimation({
 duration: 3000,
 timingFunction: 'linear'
});
var query = wx.createSelectorQuery();
query.select('.marquee2').boundingClientRect();
query.exec((res) => {
 if (res[0]) {
 this.setData({
  marqueeWidth: res[0].width //文字長(zhǎng)度
 }, () => {
  this.doAnim()
 })
 }
})


doAnim: function () {
 //向左滾動(dòng)到超出屏幕，這里臨時(shí)寫死的屏幕寬度375px
 this.animation.translate(-this.data.marqueeWidth - 375, 0).step();
 setTimeout(() => {
  this.setData({
  animationData: this.animation.export(),
  });
 }, 10)
}

在第一次動(dòng)畫結(jié)束之后，重新開始，通過(guò)animationend監(jiān)聽動(dòng)畫結(jié)束，然后再次執(zhí)行。

animationend() {
 //復(fù)位
 this.animation.translate(0, 0).step({ duration: 0 });
 this.setData({
  animationData: this.animation.export()
 }, () => {
  //重新開始動(dòng)畫
  this.doAnim()
 });
}

這個(gè)動(dòng)畫在小程序開發(fā)工具上運(yùn)行會(huì)有動(dòng)畫突然暫停的現(xiàn)象，可以用手機(jī)試下的。

相對(duì)而言是比較容易實(shí)現(xiàn)的，而且走馬燈的效果也是我們?cè)陧?xiàng)目中經(jīng)常會(huì)用到的，正好也可以熟悉下小程序的動(dòng)畫的。

總結(jié)

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)走馬燈效果實(shí)例的文章就介紹到這了,更多相關(guān)小程序走馬燈效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論