前言
日常開發中，我們經常會遇到文字橫向循環滾動的效果，俗稱走馬燈，也是項目中經常會使用的一個功能。在網頁web前端很常見，今天就介紹下小程序的實現方式，一種是用的css樣式實現，另一種是運用小程序的動畫功能實現。
@keyframes 實現
利用@keyframes的規則來實現，非常方便，只需要css樣式就可以滿足，使用方法跟web上一樣。
|
1
2
3
|
<view class="marquee"> <text>這是一段滾動的文字</text></view> |
樣式類，from to 來定義動畫的開始結束，這里是從屏幕最右端向左滑，觸及到最左側后重新開始新一輪動畫。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
@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;} |
如果想要的效果是滑動到左側之后，文字繼續左滑，直到全部消失，再從最右開始動畫的，那么就需要再加上文字的長度，這里需要去計算文字的長度，使用SelectorQuery 對象實例來拿到文字節點的寬度。在頁面首次渲染完畢onReady時執行，查詢到對應文字節點信息的對象，得到文字的長度。這里定義的是上面的marquee類名。
|
1
2
3
4
5
6
7
8
9
10
11
|
onReady: function () { let query = wx.createSelectorQuery(); query.select('.marquee').boundingClientRect(); query.exec((res) => { if (res[0]) { this.setData({ marqueeWidth: res[0].width }) } })} |
然后使用css var() 函數插入定義的屬性值，到結束的位置處，讓它走完整個屏幕以及自身文字的長度。定義一個名為 "--marqueeWidth" 的屬性，然后在wxss樣式文件里使用var()函數調用該屬性：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<view class="marquee" style="--marqueeWidth:-{{marqueeWidth}}px"> <text>這是一段滾動的文字</text></view>wxss樣式里：@keyframes translation { from { margin-left: 750rpx; } to { margin-left: var(--marqueeWidth); }} |
這是通過css的方式實現的，非常方便，但是會出現在部分機型上適配的問題，還有一種是通過Animation動畫實現。
animation實現
通過animation動畫實例來完成動畫，一開始讓視圖位于屏幕右側超出屏幕的。
|
1
2
3
4
5
6
7
8
9
|
<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)平移屬性進行移動操作，直至移出整個屏幕。在一組動畫完成之后，調用bindtransitionend回調，再一次去執行動畫，
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
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)} |
在第一次動畫結束之后，重新開始，通過animationend監聽動畫結束，然后再次執行。
|
1
2
3
4
5
6
7
8
9
10
|
animationend() { //復位 this.animation.translate(0, 0).step({ duration: 0 }); this.setData({ animationData: this.animation.export() }, () => { //重新開始動畫 this.doAnim() });} |
這個動畫在小程序開發工具上運行會有動畫突然暫停的現象，可以用手機試下的。
相對而言是比較容易實現的，而且走馬燈的效果也是我們在項目中經常會用到的，正好也可以熟悉下小程序的動畫的。
總結
到此這篇關于微信小程序實現走馬燈效果實例的文章就介紹到這了,更多相關小程序走馬燈效果內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6916884147348701192
