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