小程序中滚动字幕

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

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.rhkb.cn/news/239442.html

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

相关文章

Linux工具-搭建文件服务器

当我们使用linux系统作为开发环境时&#xff0c;经常需要在Linux系统之间、Linux和Windows之间传输文件。 对少量文件进行传输时&#xff0c;可以使用scp工具在两台主机之间实现文件传输&#xff1a; rootubuntu:~$ ssh --help unknown option -- - usage: ssh [-46AaCfGgKkMN…

五种嵌入式经典通信总线协议

一.先前知识 1.并行与串行 并行通信和串行通信是两种不同的数据传输方式&#xff1a; 并行通信&#xff1a;并行通信是指在同一时间使用多条并行传输的线路传输多个比特的数据。每个比特使用独立的线路进行传输&#xff0c;同时进行。这样可以在一个时钟周期内传输多个比特&…

nova组件讲解和glance对接swift

1、openstack架构 &#xff08;1&#xff09;openstack是一种SOA架构&#xff08;微服务就是从这种架构中剥离出来的&#xff09; &#xff08;2&#xff09;这种SOA架构&#xff0c;就是把每个服务独立成一个组件&#xff0c;每个组件通过定义好的api接口进行互通 &#xff…

复合机器人作为一种新型的智能制造装备高效、精准和灵活的生产方式

随着汽车制造业的快速发展&#xff0c;对于高效、精准和灵活的生产方式需求日益增强。复合机器人作为一种新型的智能制造装备&#xff0c;以其独特的优势在汽车制造中发挥着越来越重要的作用。因此&#xff0c;富唯智能顺应时代的发展趋势&#xff0c;研发出了ICR系列的复合机器…

京东年度数据报告-2023全年度笔记本十大热门品牌销量(销额)榜单

2023年度&#xff0c;在电脑办公市场整体销售下滑的环境下&#xff0c;笔记本市场的整体销售也不景气。 根据鲸参谋平台的数据显示&#xff0c;京东平台上笔记本的年度销量为650万&#xff0c;同比下滑约16%&#xff1b;销售额约为330亿&#xff0c;同比下滑约19%。同时&#…

CF1178F2 Long Colorful Strip 题解 搜索

Long Colorful Strip 传送门 题面翻译 题目描述 这是 F 题的第二个子任务。F1 和 F2 的区别仅在对于 m m m 和时间的限制上 有 n 1 n1 n1 种颜色标号从 0 0 0 到 n n n&#xff0c;我们有一条全部染成颜色 0 0 0 的长为 m m m 的纸带。 Alice 拿着刷子通过以下的过…

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -投票帖子明细实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

经典目标检测YOLO系列(一)复现YOLOV1(5)模型的训练及验证

经典目标检测YOLO系列(一)复现YOLOV1(5)模型的训练及验证 之前&#xff0c;我们依据《YOLO目标检测》(ISBN:9787115627094)一书&#xff0c;提出了新的YOLOV1架构&#xff0c;继续按照此书进行YOLOV1的复现。 经典目标检测YOLO系列(一)YOLOV1的复现(1)总体架构 经典目标检测Y…

Python Flask教程

Flask Doc: https://rest-apis-flask.teclado.com/docs/course_intro/what_is_rest_api/Github: https://github.com/tecladocode/rest-apis-flask-python 1. 最简单的应用 最小应用 from flask import Flaskapp Flask(__name__)app.route("/") def hello_world()…

18 串口通讯

文章目录 18.0 前言18.1 串口通讯协议简介18.1.1 物理层 18.2 RT1052 的 LPUART 简介18.3 UART 功能框图18.3.1 中断控制 18.4 UART 初始化结构体详解18.4.1 baudRate_Bps18.4.2 parityMode18.4.3 dataBitsCount18.4.4 isMsb18.4.5 stopBitCount18.4.6 txFifoWatermark与rxFifo…

Kubernetes 集群管理—日志架构

日志架构 应用日志可以让你了解应用内部的运行状况。日志对调试问题和监控集群活动非常有用。 大部分现代化应用都有某种日志记录机制。同样地&#xff0c;容器引擎也被设计成支持日志记录。 针对容器化应用&#xff0c;最简单且最广泛采用的日志记录方式就是写入标准输出和标…

RIP【新华三与华为区别】

【介绍】 rip分为rip 1 与 rip 2 &#xff0c;rip 2 是对 rip 1 的一种升级&#xff0c;rip 2 可以进行认证等功能 【命令】 新华三&#xff1a; [HC3-R1] rip #启用rip [HC3-R1-rip] version 2 #告知rip 版本号 [HC3-R1-rip] network 192.168.1.0 #宣告其网段 [HC3-R1-rip] …

ES分词器

Analysis&#xff1a;文本分析是把全文本转换一系列单词的过程&#xff0c;也叫分词。Analysis是通过Analyzer(分词器)来实现的。 1.Analyzer组成 注意&#xff1a;在ES中默认使用标准分词器&#xff1a;StandardAnalyzer。特点是&#xff1a;中文是单字分词&#xff0c;英文是…

Docker 容器之间的互相通信

Docker容器之间的互相通信 步骤一&#xff1a;创建自定义网络 首先&#xff0c;我们需要创建一个自定义网络&#xff0c;以便容器可以连接到这个网络上&#xff0c;从而实现互相通信。在命令行中执行以下命令&#xff1a; # 创建 docker network create ddz # 查看 docker n…

costmap_2d包介绍

文章目录 一. costmap_2d包介绍二. Costmap包的执行入口-- move_base中调用三. Costmap包的初始化以及维护3.1 Costmap2DROS类3.1.1 构造函数 Costmap2DROS::Costmap2DROS3.1.2 地图更新线程 Costmap2DROS::mapUpdateLoop3.1.3 地图更新 Costmap2DROS::updateMap()3.1.4 激活各…

openssl3.2 - 在VS2019下源码调试openssl.exe

文章目录 openssl3.2 - 在VS2019下源码调试openssl.exe概述笔记先看一个用.bat调用openssl干活的实例VS2019调试参数设置设置 - 命令参数设置 - 工作目录设置 - 环境变量将命令行中需要的文件拷贝到exe目录单步调试备注END openssl3.2 - 在VS2019下源码调试openssl.exe 概述 …

多租户体系实现

文章目录 核心思路方案选择设计考量安全性扩展性通用性易用性 具体实现租户信息透传透传变量名命名规范应用内透传应用间透传 数据层租户隔离MySQL存储方案&#xff1a;多租户Mybatis插件Mybatis插件特点使用多租户Mybatis插件的优势参考文档 应用场景 经过工作中的一处场景启发…

PLC编程中ST语言操作符的使用方法

ST&#xff08;Structured Text&#xff09;语言操作符主要用于PLC编程&#xff0c;主要包括算术运算符、比较运算符和逻辑运算符等。 算术运算符包括加&#xff08;&#xff09;、减&#xff08;-&#xff09;、乘&#xff08;*&#xff09;、除&#xff08;/&#xff09;和指…

中国1981-2023年逐年每15天8km植被指数数据集

摘要 中国1981-2023年逐年每15天8km植被指数数据集来源于GIMMS NDVI数据&#xff0c;包括了1981年7月&#xff0d;2023年12月的长时间序列逐年每15天植被指数变化&#xff0c;格式为arcgis grid格式&#xff0c;投影为WGS84&#xff0c;其时间分辨率是15天&#xff0c;空间分辨…

什么是云服务器,阿里云优势如何?

阿里云服务器ECS英文全程Elastic Compute Service&#xff0c;云服务器ECS是一种安全可靠、弹性可伸缩的云计算服务&#xff0c;阿里云提供多种云服务器ECS实例规格&#xff0c;如经济型e实例、通用算力型u1、ECS计算型c7、通用型g7、GPU实例等&#xff0c;阿里云百科aliyunbai…