手持弹幕前言

通过本篇的文章，可以使用HBuilder写一个手持弹幕，一步一步编写出来。
如果想直接运行，发布到自己小程序，在我的资源中有手持弹幕的资源，这不是免费的。手持弹幕
先来效果展示（小程序）

一、思路

思考手持弹幕的实现：让文字横屏，然后匀速运动，当文字尾部到达屏幕的一半的时候，手机屏幕的底部再出来和之前一样的文字实现循环，最后用户可以控制文字大小，速度的快慢，文字的颜色等。

二、代码实现

1.文字横向展示

首先需要有个盒子，将盒子设置为和手机屏幕一样的宽高，通过transform属性旋转90度旋转中心点为屏幕的中心
——旋转盒子内容会变吗？
盒子旋转后里面的内容也会跟着改变

旋转后发现文字实现了横向，但是文字位于右上角，需要文字水平居中。给文字的外盒子一个高度百分之百垂直居中。
——这里有个小坑，为啥是高度不是宽度？
原因是盒子旋转了┐(￣ー￣)┌

为了看着比较好看点给文字加上filter属性

// template标签<view class="barrage-box"><view class="bulletB"><text>文字横向</text></view></view>// style标签page {background: #010101;}.barrage-box{width: 100vh;height: 100vw;transform-origin: 50vw 50vw;transform: rotate(90deg);background-color: #010101;overflow: hidden;}.bulletB{display: flex;align-items: center;height: 100%;color: #fff;font-size: 200rpx;}.bulletB text {filter: drop-shadow(4px 2px 2px #cd2068);}

效果图：

2.让文字滚动起来

这一步就有点复杂，不仅要考虑到那种方式滚动起来更加合理，还要考虑到如何实现连续滚动。
滚动方式采用css动画属性来实现滚动，连续滚动肯定要有两个一样的元素，首先第一个动画文字从屏幕底部滚动到顶部，第二个动画接上第一个动画的结尾，第二个text文字滚动到和顶部一致的时候循环。
——为啥滚动的动画不放到类为bulletB的标签上？
效果不理想，可以试试**(～￣▽￣)～**
——为啥要用两个动画？
我只能想到用两个动画去实现，如果有更好的方法，指点我一下**(✪ω✪)**

之前没有修改的代码就不显示，新增代码如下：

// template标签<view class="bulletB"><text :class="rollClass">文字横向~</text><text :class="rollClass">文字横向~</text></view>// script标签data() {return {rollClass:'',}},onShow() {this.roll()this.rollClass = 'roll'},methods: {roll(){// 这里的2000时间是由于动画执行2s，如果动画时间改变，这个也应该改变setTimeout(() => {this.roll()this.rollClass = 'rollCycle'},2000)}}// style标签.bulletB text {padding-right: 300px;white-space: nowrap;filter: drop-shadow(4px 2px 2px #cd2068);animation-duration:2s;}.roll {animation-name: rollScreen;animation-timing-function: linear}.rollCycle {animation-name: roll;animation-timing-function: linear;animation-iteration-count: infinite;}@keyframes rollScreen {0% {transform: translateX(100vh);}100% {transform: translateX(0px);}}@keyframes roll {0% {transform: translateX(0px);}100% {transform: translateX(-100%);}}

运行界面：

3.用户可以控制文字

一个输入框用于用户输入，当用户输入完成后，要根据文字的长度去计算出动画所需的时间，重新执行动画。
思路有了开始实现。

之前没有修改的代码就不显示，新增代码如下：

// template标签<view v-show="isShow && !isSetup" class="foot"><view class="footUp"><view class="footUpLeft"><input v-model="newRollTxt" type="text" placeholder="请输入内容"/><text @click="setTxt()" class="btn">发送</text></view><!-- <view @click="Setup()" class="footIcon"><uni-icons type="settings-filled" size="30" color="#FFFFFF"></uni-icons></view> --></view></view><view @click="setShow"  class="barrage-box"><view class="bulletB"><text :class="rollClass" class="text" :style="{'animation-duration': rollTime}">{{rollTxt}}</text><text :class="rollClass" :style="{'animation-duration': rollTime}">{{rollTxt}}</text></view></view>// script标签data() {return {rollClass:'',rollTxt:'手持弹幕~',rollTime:'',newRollTxt:'',isShow: true, // 底部是否显示screenHeight: '', // 屏幕高度speed: 300, // 动画速度的比值timerName:'' // 定时器}},onReady() {uni.getSystemInfo({success: (res) => {this.screenHeight = res.screenHeightthis.setTime()}})},methods: {setShow(){this.isShow = !this.isShow},// 发送弹幕setTxt() {this.rollTxt = this.newRollTxtthis.newRollTxt = ''// 清除定时器，防止第一次东湖没有执行完，又重新输入了。clearTimeout(this.timerName);this.setTime()},// 计算出时间setTime() {this.$nextTick(() => {let txtView = uni.createSelectorQuery().in(this).select(".text");txtView.boundingClientRect(data => {this.rollClass = this.rollClass == 'rollTwo' ? 'roll' : 'rollTwo'// 屏幕高度除以动画比值得出第一个动画需要的时间let rollSpeed = (this.screenHeight / this.speed).toFixed(1)this.rollTime = rollSpeed + 's'// 滚动文字长度除以动画比值得出第二循环动画需要的时间let rollSpeedTxt = (rollSpeed * (data.height / this.screenHeight)).toFixed(1)// 设置一个计时器,当第一个动画结束的时候执行第二个动画this.timerName = setTimeout(() => {this.rollClass = 'rollCycle'this.rollTime = rollSpeedTxt + 's'}, rollSpeed * 1000)}).exec();})}}// style标签.foot {position: fixed;bottom: 0rpx;z-index: 10;}.footUp {padding-left: 30rpx;display: flex;align-items: center;margin-bottom: 20rpx;}.footUpLeft {width: 640rpx;display: flex;align-items: center;justify-content: center;height: 80rpx;padding: 0 30rpx;background: #212427;color: #FFFFFF;border-radius: 10rpx;}.footUpLeft input {flex: 1;}.footUpLeft .btn {margin-left: 20rpx;}.rollTwo {animation-name: rollAgain;animation-timing-function: linear;}@keyframes rollAgain {0% {transform: translateX(100vh);}100% {transform: translateX(0px);}}

总结

别的小朋友有的我也要有ᕦ(･ㅂ･)ᕤ过程中遇到不少问题，幸运的是都不算是太难。
可能该手持弹幕还有一些问题存在比如文字过短的时候会导致第二个字不是从屏幕最底下出现的，加个文本长度和屏幕长度的对比就好了。
原本还想吧那个修改颜色，速度，大小写上去。明天放假**(～￣▽￣)～** 就这吧。

小程序手持弹幕的原理及实现(uni-app)相关推荐

微信小程序-手持弹幕_小程序弹幕源码
哈喽,大家好,我是超哥. 最近在抖音刷到手持弹幕的视频,觉得是一个非常有趣应用,在手持弹幕小程序这个软件当中,你可以设置很长一段话,很适合追星.挑战一下自己,做一个小程序的手持弹幕应用. 微信小程序搜 ...
微信小程序 - 手持弹幕 | 全屏炫酷滚屏神器源代码模板，超详细代码和注释复制粘贴即可使用（全屏文字滚动，支持调节滚动速度、字体大小、字体颜色）文字内容横屏滚动，手机变身 LED 屏
前言网上大部分代码都很乱,而且都有 BUG,本文提供注释详细且干净整洁的源代码. 您可以直接复制源代码,几分钟轻松移植到您的项目中, 您可以根据自己的需求进行样式.逻辑的变更,代码注释非常详细, ...
微信小程序视频弹幕效果
这次,和大家一起探讨下小程序视频弹幕一.按照老规矩,先附上gif效果图: 二.接下来看下官方文档API对vide说明 PS:相关属性解析: danmu-list:弹幕列表 enable-da ...
浅析微信小程序的底层架构原理
一.小程序基础知识小程序是基于WEB规范,采用HTML.CSS和JS等搭建的一套框架,微信官方给它们取的名字:WXML.WXSS,但本质上还是在整个WEB体系之下构建的.WXML说到底就是xml的一 ...
微信小程序的开发与原理
微信小程序的开发与原理 1, 小程序与普通网⻚开发的区别小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网⻚开发相比有很大的相似性.对于前端开发者而言,从网⻚开发迁移到小程序的 ...
微信小程序底层框架实现原理
小册介绍小程序(Mini Program)我们都很熟悉,它是一种不用下载安装就能使用的应用,它实现了应用"触手可及"的梦想.如今,微信已经把小程序打造成了新的开发者生态,而小程序 ...
微信小程序的底层架构原理，及如何做性能优化
双线程模型微信小程序的框架包含两部分 View 视图层.App Service逻辑层.View层用来渲染页面结构,App Service层用来逻辑处理.数据请求.接口调用,它们在两个线程(Webvi ...
芝麻小程序码基于设计原理提供免费美化小程序码
芝麻小程序码(官网首发美化)基于微信小程序码的设计原理,为小程序的开发.设计.运营人员提供免费的美化小程序码服务,助力小程序的运营推广和产品价值的体现. 先释放几个案列图片出来: 2017年4月份,微 ...
微信小程序使用that=this原理
微信小程序使用that=this原理示例代码1 /index.js 2 Page({ 3 4 data: { 5 toastHidden: true, 6 }, 7 8 loadData: func ...

小程序手持弹幕的原理及实现(uni-app)

手持弹幕uni-app