本文會從產品角度來講訴如何打造一款支持表情的彈幕小程序

產品需求：演唱會應援、行走的廣告牌以及地鐵讓座提醒等等（提供一種思路）
競品分析：小程序里的彈幕類應用大部分只支持文字，而圖片和音頻這一塊功能是缺失的
功能確定：支持滾動文字和滾動圖片

---

實現效果

思路：

input 獲取輸入文字，richtext顯示包含圖片的彈幕，設置richtext中文字的方向并滾動起來，滑動改變文字大小，文字顏色等操作

實現代碼：

1.使用input輸入文字、支持emoji表情

先定義的一個"danmu"對象來保存input輸入的彈幕文字以及彈幕樣式、

danmu: {fontColor: "#ffffff",text: "默認彈幕~",fontSize: "40px",glow: "#ffff00",speed: '10s', }, 復制代碼

接著定義"nodes"對象顯示數據 text:彈幕文字；fontSize:文字大小；fontColor:文字顏色；glow：文字發光；speed：滾動速度。

使用input組件輸入文字：

<input type='text'bindconfirm='changeDanmuText'value='{{danmu.text}}' placeholder='輸入彈幕~' placeholder-style='color:#fff' cursor-spacing='28'> </input> 復制代碼

cursor-spacing設置input中光標與鍵盤的距離

---

2.richText顯示包含圖片的彈幕

定義nodes對象來更新彈幕

nodes: [{name: 'div',attrs: {class: 'danmu-text'},children: [{type: 'text',text: '彈幕文本?~'},{name: 'img',attrs: {src: '網絡圖片',width: '數值',style: '樣式'}}] }], 復制代碼

nodes的children是一個節點集合，type是類型，text類型只有text對象，默認是節點類型所以不需要type，節點類型中name是指節點名，attrs是指節點的屬性。
具體方法屬性可以看官方 richText 文檔

danmu對象與rich-text組件綁定數據關系，

<rich-text nodes='{{nodes}}'class='rich-text'style='font-size:{{danmu.fontSize}};color:{{danmu.fontColor}};text-shadow: 0 0 20rpx {{danmu.glow}};'></rich-text> 復制代碼

并更新彈幕數據在rich-text組件上

changeDanmuText: function () {if (that.data.danmu.text != '') {that.data.nodes[0].children = []that.data.nodes[0].children.push({type: 'text',text: that.data.danmu.text})that.setData({danmu: that.data.danmu,nodes: that.data.nodes})} }, 復制代碼

判斷彈幕數據，如果是有有效數據則push到children中，并立即更新數據

---

經過以上兩步，已經可以把input中的數據展示在rich-text中了。
滾動彈幕樣式,利用animation 的transform: translate3d，設備會開啟GPU加速

rich-text {width: auto;height: auto;display: inline-block; } .danmuContent {animation: danmuAnimation 10s;animation-iteration-count: infinite;animation-timing-function: linear;display: inline-block;text-shadow: 0 0 20rpx #f00;transform: rotate(90deg);transform-origin: 0% 100%;writing-mode: vertical-lr;//很重要，把文字豎著排列text-orientation: sideways-right;//改變文字方向 } @keyframes danmuAnimation {from {transform: translate3d(0, 100%, 0);}to {transform: translate3d(0, -100%, 0);} }復制代碼<view style='display:flex;align-items:center;justify-content:center;'><view class='danmuContent' style='min-height:{{view.height}};animation-duration:{{danmu.speed}}'><rich-text nodes='{{nodes}}' class='rich-text' style='font-size:{{danmu.fontSize}};color:{{danmu.fontColor}};text-shadow: 0 0 20rpx {{danmu.glow}};'></rich-text></view> </view> 復制代碼

下面就要插入表情和更新文字樣式

3.插入動態表情

定義動態表情url數組

gifUrl = [url0,url1,url2,....] 復制代碼

顯示在view中

<view wx:for="{{gifUrl}}" wx:for-item="url" class='gif'><image src='https://user-gold-cdn.xitu.io/2018/1/13/160ef9d4a180eee1' data-gifid='https://user-gold-cdn.xitu.io/2018/1/13/160ef9d4a180eee1' bindtap='addImg' class='gif'></image> </view> 復制代碼

gifid傳到nodes中的img src里,之后更新數據

addImg: function (e) {that.data.nodes[0].children.push({name: 'img',attrs: {src: e.currentTarget.dataset.gifid,width: '40px',style: 'transform:rotate(90deg)'}})that.setData({nodes: that.data.nodes,danmu: that.data.danmu}) }, 復制代碼

---

4.設置文字大小、顏色、發光以及滾動速度

這一步其實不難，主要就是交互上要簡潔、方便。

使用slider滑動改變文字大小

<slider bindchange='changeFontSize' bindchanging='changeFontSize' show-value='true' min='10' max='200'> </slider> 復制代碼

文字顏色和發光顏色，使用slider模擬了一個滑動取色（這個后續文章詳細分析）

changeFontColor: function (e) {let H = e.detail.valuelet color = this.HSB2RGB([H, 1, 1])this.data.danmu.fontColor = 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')'this.setData({danmu: this.data.danmu})},changeFontGlow: function (e) {let H = e.detail.valuelet color = this.HSB2RGB([H, 1, 1])this.data.danmu.glow = 'rgb(' + color.R + ',' + color.G + ',' + color.B + ')'this.setData({danmu: this.data.danmu})}, 復制代碼

彈幕滾動速度同樣使用slider，取值1-3，避免太快。

<slider bindchange='changeFontSpeed' bindchanging='changeFontSpeed' show-value='true' min='1' max='3'></slider> 復制代碼

為了保持滾動速度的均勻，要根據彈幕view的高度實時改變（animation-duration），達到勻速的目的。

changeFontSpeed: function (e) {let speedValue = e.detail.value / 4 * 100wx.createSelectorQuery().selectAll('.danmuContent').boundingClientRect(function (rects) {rects.forEach(function (rect) {that.data.danmu.speed = rect.height / speedValue + 's'that.setData({danmu: that.data.danmu})})}).exec()}, 復制代碼

到這里，基本功能已經實現，還有其他操作，比如保持屏幕常亮、屏幕上背景全黑并隱藏其它內容。

// 保持屏幕常亮 wx.setKeepScreenOn({keepScreenOn: true }) 復制代碼

設置導航欄顏色

wx.setNavigationBarColor({frontColor: '#000000',backgroundColor: '#000000', }) 復制代碼

總結

滾動彈幕動畫要考慮手機的性能，沒有使用canvas，最直接就是使用css的transform動畫，效率最高。 小程序的富文本編輯支持比較弱，嘗試了許多方法，比如在文字中插入圖片，想到了類似QQ表情"[微笑/]"的方法，使用正則進行分析，再顯示在rich-text上，但是在這個項目上不合適。只好換一種思路，在文字開頭或結尾插入圖片。

---

以上代碼沒做相關優化，寫的比較糙，把我的思路寫出來給大家看看，共同成長！ 一個射雞獅的不歸之路~

總結

以上是生活随笔為你收集整理的小程序如何把文字玩出花样的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。