其實&＃xff0c;在微信開放文檔中就有關于彈幕的組件。愛掏網 - it200.com當然&＃xff0c;這是在我自己實現了彈幕功能后才發現的&＃xff0c;不然我肯定不會自己動手實現&＃xff0c;能白嫖絕不動手。愛掏網 - it200.com
實現彈幕功能最主要的點就是利用CSS3里面的動畫效果
/**定義從右邊向左邊的移動的動畫**/&＃64;keyframes first { from { left: 100%; }? to { left: -200%; }}
有了這個動畫效果&＃xff0c;實現彈幕效果非常簡單了
效果圖&＃xff1a;
思路&＃xff1a;
-
在wxml中添加節點
-
在wxss中添加動畫
-
在js中創建動畫對象
-
將動畫對象傳遞給wxml中的節點
//在wxml中添加節點
?
//在wxss中添加動畫
//注意彈幕必須得是Position&＃xff1a;absolute下才能移動
.userDanmu_img {display: inline-block;vertical-align: top;height: 60rpx;width: 60rpx;border-radius: 30rpx;
}
?
.userDanmu_list {display: inline-block;vertical-align: top;font-size: 30rpx;height: 60rpx;line-height: 60rpx;padding: 0rpx 15rpx;
}
?
.aon {position: absolute;white-space: nowrap;/* 防止向下換行 */height: 60rpx;line-height: 60rpx;border-radius: 30rpx;background-color: rgba(0, 0, 0, 0.5);
}
?
/**定義從右邊向左邊的移動的動畫**/
/**注意下面這個to的left&＃xff0c;如果你的彈幕非常長&＃xff0c;
長到超過屏幕寬度&＃xff0c;甚至有好幾倍那么長。愛掏網 - it200.com那么left
的值要設置為-300%甚至-500%&＃xff0c;不然會出現彈幕停留在屏幕上的bug&＃xff0c;
一般建議彈幕有字數限制**/
&＃64;keyframes first {from {left: 100%;}to {left: -200%;}
}
?
//在js中創建動畫對象
//利用工廠模式&＃xff0c;每次彈幕創建一個對象并添加到list中去&＃xff0c;簡單高效
function AddNewDanmu(danmu) {this.id &＃61; wx.getStorageSync(&＃39;user_openId&＃39;),this.danmu &＃61; danmu,this.diplay &＃61; true,this.top &＃61; Math.ceil(Math.random() * 100),this.time &＃61; 10,this.color &＃61; com.getColor(),this.avatarUrl &＃61; wx.getStorageSync(&＃39;user_avatarUrl&＃39;)
}
?
function DanMu() {this.list &＃61; []
}
// 彈幕初始化 &＃61;&＃61;>在onload中執行
danmuInit() {this.setData({danmuList: new DanMu()})
}//將動畫對象傳遞給wxml中的節點onSubmit(e) {// 內容檢測 特3456書yuuo莞6543李zxcz蒜7782法fgnv級
if (e.detail.value.user_danmu.length !&＃61;&＃61; 0) {wx.cloud.callFunction({name: &＃39;setUserText&＃39;,data: {content: e.detail.value.user_danmu}}).then(res &＃61;> {console.log(res)if (res.result.errCode &＃61;&＃61;&＃61; 87014) {wx.showModal({title: &＃39;有違規內容&＃39;,content: &＃39;檢測到您的內容中有違規內容&＃xff0c;請重新編輯&＃39;,success: res &＃61;> {if (res.cancel) {this.setData({danmu: false})}}})} else {console.log(e.detail.value.user_danmu.length)let danmuList &＃61; this.data.danmuListdanmuList.list.push(new AddNewDanmu(e.detail.value.user_danmu))this.setData({danmuList: danmuList,danmu: false})}})
} else {this.setData({danmu: false})}}