评论

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

最近在抖音刷到手持弹幕的视频,觉得是一个非常有趣应用

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

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

效果

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

配置说明

wxml

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

js

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

最后一次编辑于  04-13  
点赞 2
收藏
评论

1 个评论

  • 王帅
    王帅
    07-29

    扫开没有相关弹幕

    07-29
    赞同
    回复 1
登录 后发表内容