小程式如何把文字玩出花樣

林大魚發表於2019-02-28

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

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

實現效果

小程式如何把文字玩出花樣

思路：

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.value
    let 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.value
    let 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 * 100
    wx.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上，但是在這個專案上不合適。只好換一種思路，在文字開頭或結尾插入圖片。

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

相關文章