鸿蒙开发实现弹幕功能

news2024/10/7 18:31:47

鸿蒙开发实现弹幕功能如下:
在这里插入图片描述
弹幕轮播组件:BannerScroll

import type { IDanMuInfoList, IDanMuInfoItem } from '../model/DanMuData'
//定义组件
@Component
export default struct BannerScroll {
  //@Watch 用来监视状态数据的变化,包括:@State、@Prop、@Link、@Provide、@Consume
  //一旦状态数据变化,监视的回调就会调用
  // 我们可以在监视的回调中执行应用需要的特定逻辑
  @Link @Watch('start') bannerList: IDanMuInfoList
  @State scrollList: IDanMuInfoList = []
  scroller: Scroller = new Scroller()

  aboutToAppear() {
    this.start()
  }

  aboutToDisappear() {
    this.stop()
  }

  xOffset: number = 0 // 位移距离
  timeId: number // 定时器标识
  duration: number = Math.round(1000 / 60) // 位移间隔时间

  move() {
    this.stop()
    this.timeId = setTimeout(() => {
      this.xOffset += 4
      // 动画的持续时间,不能大于或等于定时器的间隔
      this.scroller.scrollTo({
        xOffset: this.xOffset / 10,
        yOffset: 0,
        animation: { duration: this.duration - 5, curve: Curve.Linear }
      })
      this.move()
    }, this.duration)
  }

  start() {
    const bannerList = this.bannerList;
    if (bannerList.length === 0) {
      return;
    }
    this.scrollList = [...bannerList, ...bannerList].map((item, index) => {
      return {
        ...item,
        id: index
      }
    })
    this.move()
  }

  stop() {
    clearInterval(this.timeId);
  }

  reset(firstIndex: number) {
    if (firstIndex === this.bannerList.length) {
      this.xOffset = 0;
      this.scroller.scrollTo({ xOffset: 0, yOffset: 0, animation: { duration: 0, curve: Curve.Linear } })
    }
  }

  build() {
    List({ scroller: this.scroller }) {
      ForEach(this.scrollList, (banner: IDanMuInfoItem) => {
        ListItem() {
          Row({ space: 6 }) {
            Text(banner.content).fontSize(14)
          }
          .padding({ top: 6, left: 6, bottom: 6, right: 10 })
          .borderRadius(42)
          .backgroundColor('#CDFFD9')
          .margin({ left: 10 })
        }
      }, banner => banner.id)
    }
    .listDirection(Axis.Horizontal) // 排列方向
    .edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
    .onScrollIndex(this.reset.bind(this))
    .width('100%')
    .cachedCount(4)
    .hitTestBehavior(HitTestMode.None)
  }
}

关注‘猿来编码’,回复弹幕,获取更多,以后也会继续分享鸿蒙相关知识,相互学习。谢谢

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

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

相关文章

软考79-上午题-【面向对象技术3-设计模式】-结构型设计模式02

一、组合模式 1-1、意图 将对象组合成树型结构,以表示"部分-整体"的层次结构。Composite使得用户对单个对象和组 合对象的使用具有一致性。 示例:对象:文件、文件夹 1-2、结构 Component 为组合中的对象声明接口;在适…

CKA认证之Etcd备份与恢复

题目介绍: 资料参考: https://kubernetes.io/zh-cn/docs/tasks/administer-cluster/configure-upgrade-etcd 解题: 1、备份 #参考模板列出 etcdctl 可用的各种选项。 #例如,你可以通过指定端点、证书和密钥来制作快照&#xff0…

Android 开发 地图 polygon 显示信息

问题 Android 开发 地图 polygon 显示信息 详细问题 笔者进行Android项目开发,接入高德地图绘制区域后,需要在指定区域(位置)内显示文本信息,如何实现 实现效果 解决方案 代码 import com.amap.api.maps.model.T…

Day47-http和www基础2

Day47-http和www基础2 1.Linux下实践观察HTTP协议通信过程1.1 DNS解析过程1.2 tcp三次握手1.3 发起HTTP请求报文阶段1.4 请求报文阶段1.5 响应报文部分1.6 分析URL,DNS解析1.7 HTTPS连接建立的过程1.8 请求报文阶段1.8.1 referer1.8.2 如何解决防盗链? 2…

【机器学习】分类模型的评价方法

🌻个人主页:相洋同学 🥇学习在于行动、总结和坚持,共勉! #学习笔记# 目录 一、混淆矩阵(Confusion Matrix) 二、评估指标(Evaluation metrics) 1.正确率(accuracy) …

HCIP—OSPF课后练习一

本实验模拟了一个企业网络场景,R1、R2、R3为公司总部网络的路由器,R4、R5分别为企业分支机构1和分支机构2的路由器,并且都采用双上行方式与企业总部相连。整个网络都运行OSPF协议,R1、R2、R3之间的链路位于区域0,R4与R…

数据分析-Pandas的直接用Matplotlib绘图

数据分析-Pandas的直接用Matplotlib绘图 数据分析和处理中,难免会遇到各种数据,那么数据呈现怎样的规律呢?不管金融数据,风控数据,营销数据等等,莫不如此。如何通过图示展示数据的规律? 数据表…

Swift 面试题及答案整理,最新面试题

Swift 中如何实现单例模式? 在Swift中,单例模式的实现通常采用静态属性和私有初始化方法来确保一个类仅有一个实例。具体做法是:定义一个静态属性来存储这个单例实例,然后将类的初始化方法设为私有,以阻止外部通过构造…

[java基础揉碎]多态参数

多态参数 方法定义的形参类型为父类类型,实参类型允许为子类类型 例子: 定义一个员工类, 有名字和工资两个属性, 有年工资的方法 定义一个普通员工继承了员工类 , 重写了年工资的方法 定义一个经理类, 也继承了员工类, 同时经理多以了一个奖金的属性, 重写的年…

Ubuntu 如何安装 Beyond Compare?

Ubuntu20.04安装Beyond Compare 4.3.7 一、官网下载方式一:方法二:使用 .deb 包安装 二、安装相关依赖和bcompare三、破解常见错误解决方法 ) 文件比较工具Beyond Compare是一套由Scooter Software推出的文件比较工具。主要用途是对比两个文件夹或者文件…

JUnit 面试题及答案整理,最新面试题

JUnit中的断言(Assert)有哪些类型? JUnit提供了多种断言类型来帮助测试代码的正确性。常见的断言类型包括: 1、assertEquals: 用于检查两个值是否相等。如果不相等,测试失败。 2、assertTrue和assertFal…

监控系统prometheus+grafana+发送告警信息

1、基础环境准备两台或更多的主机 2、关闭selinux vi /etc/selinux/config,修改SELINUX的值为disabled 3、关闭防火墙 systemctl disable firewalld systemctl stop firewalld 4、prometheus官网下载 https://prometheus.io/download/ 5、grafana官网下载 https…

HTML语法基础

1.HTML是什么 HTML是超文本标记语言,标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分&…

如何在“Microsoft Visual Studio”中使用OpenCV编译应用程序

返回目录:OpenCV系列文章目录(持续更新中......) 前一篇:OpenCV4.9.0在windows系统下的安装 后一篇: 警告: 本教程可以包含过时的信息。 我在这里描述的所有内容都将适用于 OpenCV 的C\C接口。我首先假…

在centos8中部署Tomcat和Jenkins

参考链接1:tomcat安装和部署jenkins_jenkins和tomcat-CSDN博客 参考链接2:--配置开机启动tomcat文件 x​​​​​​超详细:Centos8安装Tomcat并配置开机自动启动_centos设置tomcat开机自启-CSDN博客文章浏览阅读4.4k次,点赞4次&…

爱奇艺 CTR 场景下的 GPU 推理性能优化

01 背景介绍 GPU 目前大量应用在了爱奇艺深度学习平台上。GPU 拥有成百上千个处理核心,能够并行的执行大量指令,非常适合用来做深度学习相关的计算。在 CV(计算机视觉),NLP(自然语言处理)的模型…

判断一个时间序列中每个元素的年份是否为闰年

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 判断一个时间序列中 每个元素的年份是否为闰年 Series.dt.is_leap_year 选择题 以下代码的输出结果中正确的是? import pandas as pd ts pd.Series(pd.date_range("2024-03-17",…

ARM 汇编指令:(七) STM/LDM多寄存器加载/多存储指令

目录 一.四种栈 1.满增栈:进栈(先移动指针再入栈,指针往地址增大的方向移动);出 栈(先出栈,栈指针往地址减小的地方移动)。 2.满减栈:进栈(先移动指针再入…

android studio设置flutter和dart的sdk配置

提示没有配置dart sdk的时候,其实只需要配置一下flutter的sdk就可以了,因为flutter的安装包里面包含了dart的sdk: 按照提示选中这个flutter的安装包路径就可以了: 并且需要开启windows的开发者开关:start ms-settings:…

【代码随想录】【回溯算法】补day25:组合总和,电话号码的总和

组合总和 def backtracking2(self, n: int, k: int, startindex: int, targetsum, sum):# 递归的终止条件if sum > targetsum:returnif len(self.path) k and sumtargetsum:self.result.append(self.path[:]) # 结果拷贝return self.result# for i in range(startindex,n1…