快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)走馬燈效果實例

更新時間：2021年03月17日 09:22:19 作者：程序猿tx

這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)走馬燈效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

@keyframes 實現(xiàn)

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

<view class="marquee">
 <text>這是一段滾動的文字</text>
</view>

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

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

 to {
 margin-left: 0px;
 }
}

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

如果想要的效果是滑動到左側(cè)之后，文字繼續(xù)左滑，直到全部消失，再從最右開始動畫的，那么就需要再加上文字的長度，這里需要去計算文字的長度，使用SelectorQuery 對象實例來拿到文字節(jié)點的寬度。在頁面首次渲染完畢onReady時執(zhí)行，查詢到對應(yīng)文字節(jié)點信息的對象，得到文字的長度。這里定義的是上面的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é)束的位置處，讓它走完整個屏幕以及自身文字的長度。定義一個名為 "--marqueeWidth" 的屬性，然后在wxss樣式文件里使用var()函數(shù)調(diào)用該屬性：

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

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

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

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

animation實現(xiàn)

通過animation動畫實例來完成動畫，一開始讓視圖位于屏幕右側(cè)超出屏幕的。

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

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

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

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 //文字長度
 }, () => {
  this.doAnim()
 })
 }
})


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

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

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

這個動畫在小程序開發(fā)工具上運行會有動畫突然暫停的現(xiàn)象，可以用手機試下的。

相對而言是比較容易實現(xiàn)的，而且走馬燈的效果也是我們在項目中經(jīng)常會用到的，正好也可以熟悉下小程序的動畫的。