小程序制作一款好玩的手持弹幕 - WXOPEN Club

最近在抖音刷到手持弹幕的视频，觉得是一个非常有趣应用，在手持弹幕小程序这个软件当中，你可以设置很长一段话，像那种商家的led滚动广告板一样一直滚动播出这一段文字。挑战一下自己，做一个小程序的手持弹幕应用

要不要用canvas
使用canvas能够实现很多酷炫的功能，但小程序的canvas有一个层级的问题，input等表单不能附着在canvas之上，但弹幕需要自定义内容，背景等弹层模块，这个组件中还是使用普通的view+css来实现弹幕效果

效果

支持字体调整
支持字体动效
支持速度调整
支持背景调整
支持自定文本
支持分享

配置说明

wxml

<ui-item item="{{reminderConfig}}" />

const Pager = require('../../components/aotoo/core/index')
const mkHandleBarrage = require('../../components/modules/handlebarrage')

Pager({
  data: {
    reminderConfig: mkHandleBarrage({
        title: '设置弹幕内容',
        fontSize: 100,
        fontSpeed: 8,
        fontType: 'red',
        background: 'black'
    }),
  }, 
})

title
{String} 设置弹幕内容

fontSize
{Number} 设置弹幕字体大小

fontSpeed
{Number} 设置弹幕滚动速度

fontType
{String} 设置弹幕效果

background
{String} 设置弹幕背景

现阶段只支持以下默认数据

fontSize: [100, 150, 180],
fontSpeed: [0, 8, 4, 3, 1.5],
fontType: ['douyin', 'shake', 'halo', 'none'],
background: ['blink', 'shan', 'red', 'black', 'blue', 'green', 'white', 'gray']

配置说明

DEMO