【微信小程序】实现手机全屏滚动字幕

实现效果

一，实现背景

无意中在某音上看到用手机横屏作为广告屏的视频，大部分都是用第三方软件实现的；

以及在汽车后挡风玻璃放置提醒字样的视频，这种基本是要花钱买屏幕，通过手机控制屏幕内容；

遂想实现这种效果

二，实现代码

1，滚动字幕
zimu.wxml，界面布局，很简单，没啥特别的，顶部一个返回按钮，为了不影响整体效果，可以把这个按钮做成透明的图片放上去；除了那个按钮剩下的就是滚动的字幕组件了

<view class="parent">
  <view class="topview">
    <image class="topback" src="/image/clock_back.png" mode="widthFix" bindtap="onBack"/>
  view>
  <view class="marqueeView1">
    <text class="marqueeText1" style="--during--:{{during}}s;" decode>  {{mark}}text>
  view>
view>
1
2
3
4
5
6
7
8
9

zimu.wxss

/* pages/zimu/zimu.wxss */
/* xm.wxss是一个字体样式文件，可不要 */
/*@import '../../style/xm.wxss';*/

page {
  background: black;
  width: 100%;
  height: 100%;
}

.parent {
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
}

.marqueeView1 {
  position: absolute;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;

  margin: 10rpx auto;
  overflow: hidden;
  /* background: #fff; */
  border-radius: 5px;
  padding: 5px;
  box-sizing: border-box;
}

.marqueeText1 {
  color: white;
  font-size: 250rpx;
  font-family: "DS-Digital";
  /* font-family: "Courier New", Courier, monospace; */
  white-space: nowrap;
  /* infinite无限循环 10s*/
  animation: 10s loop linear infinite normal;
  display: inline-block;
  vertical-align: top;
}

@keyframes loop {
  0% {
    transform: translateX(350px);
    -webkit-transform: translateX(350px);
  }

  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
  } 
}

@-webkit-keyframes loop {
  0% {
    transform: translateX(1000px);
    -webkit-transform: translateX(1000px);
  }

  100% {
    transform: translateX(-75%);
    -webkit-transform: translateX(-75%);
  }
}


.topview {
  position: absolute;
  z-index: 4;
  margin-top: 10rpx;
}

.topback {
  margin-left: 20rpx;
  padding: 10px;
  width: 30px;
  height: 30px;
  /* background: red; */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

zimu.json，配置这个页面横屏展示，landscape，背景色为黑色

{
  "usingComponents": {},
  "pageOrientation": "landscape",
  "navigationBarBackgroundColor": "#000000",
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}
1
2
3
4
5
6
7

zimu.js，主要是onload函数，接收了上一个界面的传参，把内容和滚动速度参数传过来，当然也可以加其他参数，比如说字体颜色等

data: {
    mark:'测试滚动字幕',
    marqueeWidth:0
  },
  onBack: function(){ 
    wx.navigateBack({
      delta:1
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.setData({
      mark: options.mark,
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2，滚动速度

（1）新增一个时间变量，在wxss中引用，这个during来自于wxml中定义

animation: var(--during--) loop linear infinite normal;
1

<text class="marqueeText1" style="--during--:{{during}}s;" decode>  {{mark}}text>
1

（2）控制滚动速度的是一个radioGroup组件，内含三个radio单选按钮，通过绑定bindChange事件获取单选按钮的值传到下一个界面使用
（3）根据文字的长度和选择的滚动速度计算出动画所需要的事件，这里默认正常速度一个字一秒。

data: {
    mark:'测试滚动字幕',
    speed: 2,
    during:10,
    marqueeWidth:0
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options.mark+options.speed)
    var consumeTime = 10
    if(options.speed == 1){
      consumeTime = options.mark.length * 2
    }else if(options.speed == 2){
      consumeTime = options.mark.length
    }else if(options.speed == 3){
      consumeTime = options.mark.length / 2
    }
    this.setData({
      mark: ' '+options.mark,
      during: consumeTime
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

（4）给输入框添加清空按钮，添加一个icon跟在文字的后面

  <view  class='clear-clear'>
      <icon type="clear" size="30" catchtap='clearInput'/>
  view>
1
2
3

  clearInput: function (e) {
    this.setData({
      mark:''
     })
  },
1
2
3
4
5

三，后续优化

1，可以添加动态表情图片
2，可以添加修改文字颜色
3，可以添加语音播报

四，效果体验

大家可以扫描下方的小程序码来简单体验下这个全屏滚动字幕功能，在首页 -> 实际支出 按钮点进去即可看到