当前位置: 首页 > news >正文

小程序中滚动字幕

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

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,});},
})

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

相关文章:

  • windows搭建银河麒麟v10虚拟机
  • WAMP apache 无法启动(端口 80 未使用)
  • Android Jetpack中Lifecycle使用生命周期感知型组件处理生命周期
  • Canvas 指南与总结
  • 基于Python的汽车信息爬取与可视化分析系统
  • 带你玩转汇编
  • 单片机原理及应用:定时器/计数器综合应用
  • BioTech - 蛋白质结构、核酸结构、小分子构象的预测
  • npm run dev,vite 配置 ip 访问
  • 怎么把身份证压缩到200k以下?一分钟教你如图片压缩
  • 人工智能技术的应用
  • 重生奇迹mu敏弓加点攻略
  • PHP 正则表达式(PCRE)
  • 新一代通信协议 - Socket.D
  • javascript编程求三个数中最大的数
  • CSS 提示工具(Tooltip)
  • Electron入门介绍
  • JavaScript-Array类型
  • Javascript编码规范
  • Java基本数据类型之Number
  • js算法-归并排序(merge_sort)
  • Linux Process Manage
  • Redis字符串类型内部编码剖析
  • SegmentFault 社区上线小程序开发频道,助力小程序开发者生态
  • Spark RDD学习: aggregate函数
  • 电商搜索引擎的架构设计和性能优化
  • 说说动画卡顿的解决方案
  • 写代码的正确姿势
  • 延迟脚本的方式
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 云栖大讲堂Java基础入门(三)- 阿里巴巴Java开发手册介绍
  • HanLP分词命名实体提取详解
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • 长三角G60科创走廊智能驾驶产业联盟揭牌成立,近80家企业助力智能驾驶行业发展 ...
  • #传输# #传输数据判断#
  • $$$$GB2312-80区位编码表$$$$
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (没学懂,待填坑)【动态规划】数位动态规划
  • (生成器)yield与(迭代器)generator
  • (算法二)滑动窗口
  • .halo勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复
  • .NET 4.0中的泛型协变和反变
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .Net MVC4 上传大文件,并保存表单
  • .Net Web项目创建比较不错的参考文章
  • .Net 访问电子邮箱-LumiSoft.Net,好用
  • .NET 自定义中间件 判断是否存在 AllowAnonymousAttribute 特性 来判断是否需要身份验证
  • /dev/sda2 is mounted; will not make a filesystem here!
  • /etc/shadow字段详解
  • @cacheable 是否缓存成功_让我们来学习学习SpringCache分布式缓存,为什么用?
  • @RequestBody与@ResponseBody的使用
  • [ NOI 2001 ] 食物链
  • [2009][note]构成理想导体超材料的有源THz欺骗表面等离子激元开关——
  • [Apio2012]dispatching 左偏树
  • [BZOJ] 3262: 陌上花开