小程序中滚动字幕

news/2024/7/20 4:24:28 标签: 小程序

需求:在录像时需要在屏幕上提示字幕,整体匀速向上滚动

html部分:

    <view class="subtitles_main">
      <view style="font-size:34rpx;color: #fff;line-height: 60rpx;" animation="{{animation}}">
        人生的不可测,在任何时候,都要抱着一份希望。随着我国经济发展的时变时新,传统的产业思维模式已经很难适应高速发展的社会需求,越来越多的从业者不断寻求新的思维模式与出路,复兴文明的借力思维就是在这种大环境下应运而生的,古有借花献佛借刀杀人以敌借敌等典故,今有阿里巴巴,沃尔玛,迪士尼等世界商业巨头,它们的成功并不是靠自己的单打独斗,而是无一例外地运用了借力思维。
        股票投资,是种高风险高收益的投资方式,机会越大,风险越大,收益和风险成正比,随着风险上升,预期收益通常来说也会随着上升,一般来说韭菜们来承担高风险,镰刀来承担高收益。法制社会,丰富法律知识,学法用法,运用法律手段,维护自己的权力,佛系的流行体现了新时代年轻人的一种生活观念,主要意思是指无欲无求、不悲不喜,年轻人以佛系自嘲,衍生出佛系青年佛系女子等一系列网络词语。如果美丽只是简单的用来做展示,也许它的意义不是那么大,但如果美丽,能够转化成一种能力,去帮助更多的人,甚至去让自己变得更好,那它就是很有价值很有意义的了。
      </view>
    </view>

css部分:

.subtitles_main {
  width: 100%;
  height: 100%;
  padding: 0 30rpx 20rpx;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

js部分:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    animation: null,   //滚动字幕的动画
    textHeight: 350,  //滚动字幕盒子的高度
    intervalAnimation: null,  //滚动字幕的定时器
  },
  onLoad(options) {
    this.startAnimation();
  },
  // 开始滚动
  startAnimation: function () {
    const animation = wx.createAnimation({
      duration: 0,
      timingFunction: 'linear',
      delay: 0,  //延迟几秒开始动画
    });
    const scrollDuration = 40000 // 滚动速度
    animation.translateY(-this.data.textHeight).step({ duration: scrollDuration });
    this.setData({
      animation: animation.export(),
    });
    const intervalAnimation = setInterval(() => {
      // 如果是录像中
      if (this.data.recordType == 2) {
        animation.translateY(0).step({ duration: 0 });
        animation.translateY(-this.data.textHeight).step({ duration: scrollDuration });
        this.setData({
          animation: animation.export(),
        });
      }
    }, scrollDuration);
    this.setData({
      intervalAnimation: intervalAnimation,
    });
  },
})

效果图:
在这里插入图片描述


http://www.niftyadmin.cn/n/5320387.html

相关文章

LESS mixin 生成类名 控制间距

LESS mixin 生成类名 控制间距 在 web 开发中&#xff0c;我们经常需要使用 padding 和 margin 样式来控制元素之间的间距和布局。如果手动为每个元素分别设置这些样式&#xff0c;会非常繁琐和冗余。为了更好地管理和维护样式&#xff0c;我们可以使用 LESS 的 mixin 功能生成…

Spirng MVC见解1

1. SpringMVC概述 1.1 MVC介绍 MVC是一种设计模式&#xff0c;将软件按照模型、视图、控制器来划分&#xff1a; M&#xff1a;Model&#xff0c;模型层&#xff0c;指工程中的JavaBean&#xff0c;作用是处理数据 JavaBean分为两类&#xff1a; 一类称为数据承载Bean&#x…

学习Vue封装的过渡与动画总结

今天学习了Vue封装的过渡与动画&#xff0c;接下来说一下Vue是如何实现的&#xff0c;首先原生的方法是在style元素中给指定元素添加过渡的过渡或动画&#xff0c;但Vue就不需要直接获取到需要过渡或动画的元素&#xff0c;而是使用一个<transition>的标签来包裹住想要过…

【qt】sdk写pro写法,cv,onnx,cudnn

我的sdk在OpenCV003项目里&#xff1a; pro中添加 CONFIG(release, debug|release) {LIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lonnxruntimeLIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lonnxruntime_providers_cudaLIBS -L$$PWD/sdk/onnxruntime-x64-gpu/lib/ -lon…

Ubuntu纯净服务器系统使用Nginx+uwsgi部署django项目

当前文章依赖最新的ubuntu-22.04.3-live-server-amd64服务器系统,python3-10版本,django为5.0版! 该服务器系统我们可以通过虚拟机来在本地安装,也可以使用云服务器,操作方式方法大同小异! 安装python的venv sudo apt install python3.10-venv 创建并激活虚拟环境 p…

什么情况下考虑同时接入SD-WAN与MPLS

在企业网络架构中&#xff0c;SD-WAN和MPLS&#xff08;多协议标签交换&#xff09;都是常见的网络连接解决方案。而有时候&#xff0c;企业可能面临一种情况&#xff0c;即需要同时接入SD-WAN和MPLS。本文将探讨在什么情况下考虑同时使用这两种网络连接方式&#xff0c;并分析…

使用Spring Boot和Apache HttpClient构建REST客户端

使用Spring Boot和Apache HttpClient构建REST客户端 介绍&#xff1a; 在本文中&#xff0c;我们将学习如何使用Spring Boot和Apache HttpClient创建一个REST客户端。我们将探讨如何与远程服务器进行通信、处理JSON响应&#xff0c;并为Web应用程序配置跨源资源共享&#xff0…

Unity 工具 之 Azure 微软连续语音识别ASR的简单整理

Unity 工具 之 Azure 微软连续语音识别ASR的简单整理 目录 Unity 工具 之 Azure 微软连续语音识别ASR的简单整理 一、简单介绍 二、实现原理 三、注意实现 四、实现步骤 五、关键脚本 一、简单介绍 Unity 工具类&#xff0c;自己整理的一些游戏开发可能用到的模块&#x…