react 字轮播滚动

一、用计时器来实现

React 字符串滚动轮播,可以使用 setInterval 函数和 React 的生命周期方法来实现。以下是一个简单的示例:

import React from "react";export default class TextScroll extends React.Component {constructor(props) {super(props);this.state = {text: props.text,currentIndex: 0,};}componentDidMount() {this.intervalId = setInterval(() => {const { text, currentIndex } = this.state;const nextIndex = (currentIndex + 1) % text.length;this.setState({ currentIndex: nextIndex });}, 2000);}componentWillUnmount() {clearInterval(this.intervalId);}render() {const { text, currentIndex } = this.state;const displayText = `${text.slice(currentIndex)}${text.slice(0, currentIndex)}`;return <div>{displayText}</div>;}
}

在上述代码中,我们创建了一个名为 TextScroll 的 React 组件。该组件接受一个 text 属性作为字符串输入,并将其滚动显示。

在组件的构造函数中初始化了组件的 state,包括要滚动显示的文本 text 和当前的索引 currentIndex

在组件的 componentDidMount 生命周期方法中,我们使用 setInterval 函数创建了一个定时器,每隔 2 秒钟就更新一次 currentIndex 的值。这个定时器的 ID 被保存在组件的实例变量 intervalId 中。

在组件的 componentWillUnmount 生命周期方法中,我们清除了 setInterval 定时器,以避免内存泄漏。

最后,在组件的 render 方法中,我们根据当前的 currentIndex 将文本分成两部分,并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本,它被渲染到页面上。

请注意,在实际开发中,需要考虑更多的细节和优化。例如,可以添加控制按钮来暂停或重新启动滚动,或者使用 requestAnimationFrame 代替 setInterval 来提高性能等。

二、用requestAnimationFrame 来实现

当使用 requestAnimationFrame 代替 setInterval 来实现滚动时,可以利用 React 组件的 requestAnimationFrame 方法来进行调度。以下是更新后的示例代码:

import React from "react";export default class TextScroll extends React.Component {constructor(props) {super(props);this.state = {text: props.text,currentIndex: 0,};this.animationId = null;}componentDidMount() {this.startAnimation();}componentWillUnmount() {this.stopAnimation();}startAnimation() {const animate = () => {const { text, currentIndex } = this.state;const nextIndex = (currentIndex + 1) % text.length;this.setState({ currentIndex: nextIndex });this.animationId = requestAnimationFrame(animate);};this.animationId = requestAnimationFrame(animate);}stopAnimation() {cancelAnimationFrame(this.animationId);}render() {const { text, currentIndex } = this.state;const displayText = `${text.slice(currentIndex)}${text.slice(0, currentIndex)}`;return <div>{displayText}</div>;}
}

在更新后的代码中,我们添加了一个实例变量 animationId 来存储 requestAnimationFrame 的 ID。

在组件的 componentDidMount 生命周期函数中,调用了 startAnimation 方法,该方法会启动动画循环。

startAnimation 方法中,我们定义了一个名为 animate 的递归函数。该函数更新 currentIndex 的值,并通过调用 setState 方法来触发重新渲染。然后,我们使用 requestAnimationFrame 来调度下一帧动画,并将 animate 函数作为回调传递给它。

在组件的 componentWillUnmount 生命周期函数中,调用了 stopAnimation 方法来取消动画循环。

最后,在组件的 render 方法中,我们根据当前的 currentIndex 将文本分成两部分,并将它们重新拼接成一个新的字符串。这个新字符串就是要滚动显示的文本,它被渲染到页面上。

通过使用 requestAnimationFrame,可以更好地与浏览器的渲染机制进行协调,以提供更流畅的滚动效果。

三、实现每秒轮播

要实现每秒轮播,可以在 requestAnimationFrame 的回调函数中添加一个时间控制逻辑来实现。以下是更新后的代码示例:

import React from "react";export default class TextScroll extends React.Component {constructor(props) {super(props);this.state = {text: props.text,currentIndex: 0,lastTime: 0,};this.animationId = null;}componentDidMount() {this.startAnimation();}componentWillUnmount() {this.stopAnimation();}startAnimation() {const animate = (timestamp) => {const { lastTime, text, currentIndex } = this.state;if (!lastTime || timestamp - lastTime >= 1000) {const nextIndex = (currentIndex + 1) % text.length;this.setState({ currentIndex: nextIndex, lastTime: timestamp });}this.animationId = requestAnimationFrame(animate);};this.animationId = requestAnimationFrame(animate);}stopAnimation() {cancelAnimationFrame(this.animationId);}render() {const { text, currentIndex } = this.state;const displayText = `${text.slice(currentIndex)}${text.slice(0, currentIndex)}`;return <div>{displayText}</div>;}
}

在更新后的代码中,我们将 lastTime 加入了组件的 state 中,用于记录上一次动画触发的时间戳。

startAnimation 方法中的 animate 函数中,我们首先获取当前的时间戳 timestamp,然后判断距离上一次动画触发是否已经过去了 1000 毫秒(即 1 秒)。如果条件成立,就更新 currentIndex 的值,并将当前时间戳赋给 lastTime,然后触发重新渲染;否则,继续等待下一帧动画。

这样就实现了每秒一次的轮播效果。当然,在实际开发中,还可以根据需求进行更灵活的时间控制和动画效果的调整。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190866.shtml

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

相关文章

logistic回归详解

为什么不直接统计标签数和预测结果数&#xff0c;计算精度&#xff1f; 因为 存在梯度为0的情况梯度不连续 为什么叫logistic回归 logistic是因为加了一个sigmoid函数&#xff0c;将输出预测值映射到【0&#xff0c;1】 有时候使用MSE损失函数&#xff0c;拟合 有时候使用c…

selenium三猛士

selenium包括三个项目&#xff0c;分别是&#xff1a;Selenium WebDriver,Selenium IDE&#xff0c;Selenium Grid。 Selenium WebDriver Selenium WebDriver是客户端API接口&#xff0c;测试人员通过调用这些接口&#xff0c;来访问浏览器驱动&#xff0c;浏览器再访问浏览器…

利用Python中的Manim进行数学绘画和创作

相信很多同学就算没听过3Blue1Brown&#xff0c;也一定曾看过他们出品的视频&#xff0c;其从独特的视觉角度解说各种数学概念&#xff0c;内容包括线性代数、微积分、神经网络、傅里叶变换以及四元数等晦涩难懂的知识点。例如最火的《线性代数本质》系列视频。 那么这些视频是…

【算法】动态规划中的路径问题

君兮_的个人主页 即使走的再远&#xff0c;也勿忘启程时的初心 C/C 游戏开发 Hello,米娜桑们&#xff0c;这里是君兮_&#xff0c;如果给算法的难度和复杂度排一个排名&#xff0c;那么动态规划算法一定名列前茅。今天&#xff0c;我们通过由简单到困难的两道题目带大家学会动…

CDN加速技术的发展与演进

随着互联网的迅猛发展&#xff0c;用户对于网页加载速度和内容交付的需求也不断增长。为了应对这一挑战&#xff0c;内容交付网络&#xff08;CDN&#xff09;技术应运而生。本文将从 CDN 加速技术的发展角度&#xff0c;探讨其演进历程以及对网络性能的积极影响。 CDN技术的起…

文字、图片免费生成视频和专属数字人,你不来试试吗?

查看生成的效果&#xff1a;AI产生的视频&#xff08;关注公众号&#xff0c;获取精彩内容&#xff09; 您是否想要制作一些令人惊叹的视频&#xff0c;但又没有视频编辑的技能或经验&#xff1f;您是否想要利用人工智能的力量&#xff0c;让您的图片和声音变成动态的视频&…

如何强制任何Android应用程序进入全屏沉浸式模式(无生根)

谷歌在2012年发布了Android版本的Chrome&#xff0c;并且从未费心给它一个全屏模式。如果您厌倦了等待自己喜欢的Android应用程序提供全屏&#xff0c;则可以使用沉浸式模式自行完成。 来吧&#xff0c;谷歌&#xff0c;我真的一直在乞求你多年&#xff01;没有理由不给我们一…

【Go语言反射reflect】

Go语言反射reflect 一、引入 先看官方Doc中Rob Pike给出的关于反射的定义&#xff1a; Reflection in computing is the ability of a program to examine its own structure, particularly through types; it’s a form of metaprogramming. It’s also a great source of …

C语言——深入理解指针(4)

目录 1.回调函数 2. qsort 函数的使用 2.1 排序整型数据 2.2 排序结构体数据 3. qsort 函数的模拟实现 1.回调函数 回调函数就是通过一个函数指针调用的函数。 你把函数的地址作为参数传递给另一个函数&#xff0c;当这个指针被用来调用其所指向的函数时&#xff0c;被调…

【web安全】ssrf漏洞的原理与使用

前言 菜某对ssrf漏洞的总结。 ssrf的作用 主要作用&#xff1a;访问外界无法访问的内网进行信息收集。 1.进行端口扫描&#xff0c;资源访问 2.指纹信息识别&#xff0c;访问相应的默认文件 3.利用漏洞或者和payload进一步运行其他程序 4.get类型漏洞利用&#xff0c;传参数…

用CHAT 写一份销售人员激励方案

问CHAT &#xff1a;写一份销售人员早会激励方案 CHAT回复&#xff1a; 标题&#xff1a;鼓舞斗志&#xff0c;迎接新的一天 -- 销售人员早会激励方案 一、会议的氛围设定&#xff1a; 深呼吸&#xff0c;准备开始一天的事业&#xff1a;清晨的阳光&#xff0c;温暖而明亮&…

Nat. Rev. Chem. | 一份关于用机器学习研究化学问题的评估指导

今天为大家介绍的是来自Tiago Rodrigues团队的一篇论文。机器学习&#xff08;ML&#xff09;有望解决化学领域的重大挑战。尽管ML工作流程的适用性极广&#xff0c;但人们通常发现评估研究设计多种多样。目前评估技术和指标的异质性导致难以&#xff08;或不可能&#xff09;比…

js事件循环机制

1、为什么会有事件循环机制&#xff1f; JavaScript是一种单线程的语言&#xff0c;这意味着它一次只能执行一个任务。然后&#xff0c;Web应用通常需要处理多个任务&#xff0c;比如用户输入&#xff0c;网络请求&#xff0c;渲染页面等。如果所有的任务都按照同步的方式执行&…

Android BT HCI分析简介

对于蓝牙开发者来说&#xff0c;通过HCI log可以帮助我们更好地分析问题&#xff0c;理解蓝牙协议&#xff0c;就好像网络开发一定要会使用Wireshark分析网络协议一样。 本篇主要介绍HCI log的作用、如何抓取一份HCI log&#xff0c;并结合一个实际的例子来说明如何分析HCI log…

亚马逊云科技 re:Invent 2023:科技前沿风向标,探索未来云计算之窗

文章目录 一、前言二、什么是亚马逊云科技 re:Invent&#xff1f;三、亚马逊云科技 re:Invent 2023 将于何时何地举行四、亚马逊云科技 re:Invent 2023 有什么内容&#xff1f;4.1 亚马逊云科技 re:Invent 2023 主题演讲4.2 亚马逊云科技行业专家探实战 五、更多亚马逊云科技活…

单片机----汇编语言入门知识点

目录 汇编语句的格式 汇编语句的两个基本语句 子程序的调用 查表程序设计 1.x和y均为单字节数的查表程序设计 2.x为单字节数y为双字节数的查表程序设计 3.x和y均为双字节数的查表程序设计 分支转移程序设计 1.单分支选择结构 2.多分支选择结构 循环程序设计 (1) 计…

华为1+x网络系统建设与运维(中级)-练习题2

一.设备命令 LSW1 [Huawei]sys LSW1 同理可得&#xff0c;给所有设备改名 二.VLAN LSW1 [LSW1]vlan ba 10 20 [LSW1]int g0/0/1 [LSW1-GigabitEthernet0/0/1]port link-type trunk [LSW1-GigabitEthernet0/0/1]port trunk allow-pass vlan 10 20 [LSW1-GigabitEthernet0/0/1]in…

根目录/ 空间不够,扩容,导致web页面无法加载问题

现象就是&#xff1a;搭建的web页面无反应&#xff0c;也没报错&#xff0c;怀疑是内存空间不够导致的。/ 扩容步骤如下&#xff1a; 虚拟机为关机状态添加虚拟磁盘 #查看磁盘&#xff0c;并创建新分区 fdisk -l fdisk /dev/sdb p       查看已分区数量&#xff08;我看…

2312skia,14示例及一些介绍

pdf示例. SkDocument和SkCanvasAPI用Skia的PDF后端(SkPDF)的示例,[这里](https://fiddle.skia.org/c/PDF docs/examples/PDF.cpp). SkPDF限制 Skia的公共API有几个角落是SkPDF目前无法处理的,因为或没有已知的客户使用该功能,或没有简单的PDF式方法来处理它. 本文档中: 1,…

SQL Server 数据库,为products表添加数据

在插入数据的时候&#xff0c;需要注意以下事项。 > 每次插入一整行数据&#xff0c;不可能只插入半行或几列数据。 > 数据值的数目必须与列数相同&#xff0c;每个数据值的数据类型、精度和小数位数也必须与相应的 列匹配。 > INSERT语句不能为标识列指定值&#…