小程序中滚动字幕

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

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.hqwc.cn/news/345450.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

腾讯云添加SSL证书

一、进入腾讯云SSL证书&#xff1a; ssl证书控制台地址 选择“我的证书”&#xff0c;点击"申请免费证书" 2、填写域名和邮箱&#xff0c;点击“提交申请” 在此页面中会出现主机记录和记录值。 2、进入云解析 DNS&#xff1a;云解析DNS地址 进入我的解析-记录…

步进电机相关知识 以及 TMC2660 步进电机驱动芯片驱动步进电机

步进电机相关知识 以及 TMC2660 步进电机驱动芯片驱动步进电机 前言一、步进电机基础知识1、电机常用概念2、步进电机小知识3、步进电机分类4、步进电机工作原理细分驱动步进电机 5、使用的步进电机型号以及相关参数 二、步进电机驱动芯片 TMC2660 和MCU端步进电机驱动芯片TMC2…

js中try...catch捕捉错误

文章目录 一、前言二、场景2.1、setTimeout2.2、Promise 三、最后 一、前言 说到try...catch都觉得非常熟悉了&#xff0c;不就是用来捕捉代码块中的错误嘛&#xff0c;平时也用得比较多的 二、场景 try...catch只能捕捉到同步执行代码块中的错误 2.1、setTimeout try {setT…

Surface mesh结构学习

CGAL 5.6 - Surface Mesh: User Manual Surface_mesh 类是半边数据结构的实现&#xff0c;可用来表示多面体表面。它是半边数据结构&#xff08;Halfedge Data Structures&#xff09;和三维多面体表面&#xff08;3D Polyhedral Surface&#xff09;这两个 CGAL 软件包的替代品…

Java Web 开发 从入门到实战(课后习题)

第1章 Web 前端基础 1.在以下标记中&#xff0c;用于改置页面标题的是&#xff08;&#xff09;。 A. <title> B. <caption> C. <head> D. <html> 注&#xff1a;caption是表格名称&#xff08;标题&#xff09; 2. 若设计网页的背景图形为bg.png&…

计算机毕业设计----SSH电子相册管理系统

项目介绍 本项目分为普通用户与管理员两个角色&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登陆,用户信息管理,登陆密码修改等功能。 用户角色包含以下功能&#xff1a; 用户登陆,个人信息管理,相册管理,上传照片等功能。 环境需要 1.运行环境&#xff1a;最好…

计算机毕业设计-----SSH计算机等级考试报名系统

项目介绍 该项目分为前后台&#xff0c;分为管理员与普通用户两种角色&#xff0c;前台为普通用户登录&#xff0c;后台为管理员登录&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,修改个人密码&#xff0c;院系信息管理&#xff0c;注册用户管理&#xff0c;留…

Python 全栈体系【四阶】(十二)

第四章 机器学习 十五、朴素贝叶斯 朴素贝叶斯是一组功能强大且易于训练的分类器&#xff0c;它使用贝叶斯定理来确定给定一组条件的结果的概率&#xff0c;“朴素”的含义是指所给定的条件都能独立存在和发生。朴素贝叶斯是多用途分类器&#xff0c;能在很多不同的情景下找到…

“+”连接符用法(Java)

""可以作为连接符使用&#xff0c;如果与字符串一起运算&#xff0c;结果依旧是一个字符串 比如"aaa"6 --> "aaa6" 在打印中&#xff0c;能算就算&#xff0c;不能计算的时候就会连接在一起 注意先后顺序 ascii编码&#xff1a; 字符串&…

survey和surveyCV:如何用R语言进行复杂抽样设计、权重计算和10折交叉验证?

一、引言 在实际调查和研究中&#xff0c;我们往往面临着样本选择的复杂性。复杂抽样设计能够更好地反映真实情况&#xff0c;提高数据的代表性和可靠性。例如&#xff0c;多阶段抽样可以有效地解决大规模调查的问题&#xff0c;整群抽样能够在保证样本的随机性的同时减少资源消…

高颜值第三方网易云播放器R3PLAYX

什么是 R3PLAYX &#xff1f; R3PLAYX 是一款基于 YesPlayMusi-Alpha 二次开发的高颜值第三方网易云播放器。支持 Windows 、macOS 、Linux 和 Docker。目前 R3PLAYX 处于 Alpha 阶段&#xff0c;仍在开发中&#xff0c;功能尚未完善。 如果你对第三方网易云音乐播放器感兴趣&a…

计算n的平方根m 进而将m向下取整 math.isqrt()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 计算n的平方根m 进而将m向下取整 math.isqrt() 选择题 请问执行math.isqrt(10)的运行结果是&#xff1a; import math print("【执行】math.sqrt(10)") print (math.sqrt(10)) pr…