首页 > 其他分享 >鸿蒙NEXT开发实战教程:仿抖音短视频

鸿蒙NEXT开发实战教程:仿抖音短视频

时间:2024-11-03 08:49:47浏览次数:1  
标签:index Center 视频 仿抖 height width 音短 NEXT true

今天的实战教程是简单模仿一下抖音短视频,主要是首页部分的内容,先看效果图:

图片

下面为大家讲解这个项目的详细教程。

tabbar

Tabbar的难点在于中间有个发布按钮,思路是我们可以在tabbar里加个判断,中间按钮使用图片,其余按钮使用文字。相关代码如下:

@State arr: Array<string> =  ['首页', '朋友', '发布', '消息', '我'];


  @Builder TabBuilder(index: number) {
    Column() {
          if (index === 2) {
            Image($rawfile('add.png'))
              .width($r('app.float.width_small'))
          } else {
            Text(`${this.arr[index]}`)
              .fontColor(this.currentIndex === index ? Color.Red : Color.Gray)
              .fontSize(17)
              .fontWeight(500)
          }
    }
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
  }

导航栏

这里的导航栏是透明的,而且不占用空间,覆盖在视频之上,所以就不能使用系统的Navigation,我们要自定义一个导航栏。导航栏的内容有两边的图片按钮,还有中间可以滑动的菜单列表,实现代码如下:

Row(){
        Row(){
          Image($r('app.media.l_more'))
            .width(25)
            .height(25)
        }
        .height(56)
        .width(this.screenWidth/7)
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)


        YLTabbar()
          .width(5*this.screenWidth/7)


        Row(){
          Image($r('app.media.find'))
            .width(25)
            .height(25)
        }
        .width(this.screenWidth/7)
        .height(56)
        .width(this.screenWidth/7)
        .justifyContent(FlexAlign.Center)
        .alignItems(VerticalAlign.Center)


      }
      .margin({top:this.topHeight})
      .height(56)

播放视频

本项目使用的视频资源是本地文件,存放在rawfile文件夹下,鸿蒙系统提供了Video组件来播放视频,具体使用方法如下:

Video({
          src: this.videoResource,
          controller: this.controller
        })
          .height('100%')
          .autoPlay(true)
          .controls(false)
          .objectFit(ImageFit.Cover)
          .loop(true)

视频翻页

幽蓝君起初尝试过使用很多组件来实现翻页效果,比如List、Grid等等,最后发现swiper组件的效果最好,也最简单,只是要进行一些属性上的设置,比如动画曲线、循环模式等等,具体代码如下:

Swiper(this.swiperController){
        SingleRow({videoResource:$rawfile('video1.mp4')})
        SingleRow({videoResource:$rawfile('video2.mp4')})
        SingleRow({videoResource:$rawfile('video3.mp4')})
      }
      .index(videoIndex) // 设置当前在容器中显示的子组件的索引值
      .width('100%')
      .height('100%')
      .autoPlay(false)
      .indicator(false)
      .loop(true)
      .duration(200) // 子组件切换的动画时长
      .cachedCount(0)
      .vertical(true)
      .itemSpace(0)
      /**
       * 弹性曲线产生自然的弹簧效果,四个参数分别对应附着在弹簧上的对象的初始速度、附着在弹簧上的对象的质量、单位形变量所需弹力的大小、
       * 弹簧在振动过程中的减震力,使得弹簧振幅逐渐减小直至停止在平衡位置
       */
      .curve(curves.interpolatingSpring(-1, 1, 328, 34))
      .onChange((index) => {
        this.index = index;
        this.playBoo = true;
        videoIndex = index;
      })

以上就是本项目中的一些难点,大家可以私信‘鸿蒙短视频’获取本项目源码。

标签:index,Center,视频,仿抖,height,width,音短,NEXT,true
From: https://www.cnblogs.com/youlanjihua/p/18522883

相关文章

  • HarmonyOS NEXT开发实战教程:选择相册和拍照
    今天的内容是介绍在鸿蒙开发中从相册选择照片,和调用相机拍照,并使用这两个功能实现朋友圈编辑页面。  这部分内容没什么好废话的,都是固定用法,直接上代码。首先添加权限:ohos.permission.CAMERAohos.permission.READ_IMAGEVIDEO选择相册:​asyncgetAlbum(){co......
  • 开源全站第一个Nextron(NextJS+electron)项目--NextTalk:一款集成chatgpt的实时聊天工
    NextTalk简介该项目是一个基于Nextron(NextJS+Electron)的桌面端实时聊天工具。但由于使用了NextJS中的ssr及apiroute功能,该程序只能在开发环境运行。关于生产版本:我将其网页端部分分离,并用Pake将其打包成桌面端,生产体验安装包我放在了release里,目前只打包了windows版......
  • 从零开始仿抖音做一个APP(1.0 配置环境、创建项目)
    从零开始仿抖音做一个APP(创建项目)环境介绍创建项目随着HarmonyOSNEXT纯原生操作系统的正式发布,越来越多的软件开发爱好者开始知道鸿蒙、了解鸿蒙、学习鸿蒙,为了帮助更多的鸿蒙新人更好的学习鸿蒙技术,也为了练练手,准备简单分享一个仿抖音的项目开发过程,按计划搭框架、......
  • 从零开始仿抖音做一个APP(启动页icon优化&沉浸式)
    从零开始仿抖音做一个APP(启动页icon优化&沉浸式)沉浸式效果前面完成了欢迎页的简单UI和逻辑处理并实现了Har模块和Hap模块之间的依赖和关联。今天,对遗留问题做一些处理和优化。沉浸式效果典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条,其中状态栏和导航条,......
  • 移植 AWTK 到 纯血鸿蒙(HarmonyOS NEXT)系统 (0) - 序
    移植AWTK到纯血鸿蒙(HarmonyOSNEXT)系统(0)-序前段时间纯血鸿蒙系统HarmonyOS5.0(又称HarmonyOSNEXT)正式推出,这是继苹果iOS和安卓系统后,全球第三大移动操作系统。纯正国产操作系统登场,国人无不欢欣鼓舞,激动不已。HarmonyOS2.0时代我就尝试将AWTK移植到H......
  • 鸿蒙Next应用国际化:区域标识与文化差异
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)在应用国际化中区域标识与文化习惯划分方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者......
  • 鸿蒙Next应用界面设计:国际化最佳实践
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)在应用国际化界面设计方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在全球化的浪......
  • 鸿蒙Next应用全球化之路:国际化与本地化
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)在应用国际化与本地化方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在当今全球化......
  • 鸿蒙Next应用国际化:语言与区域设置
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统(截止目前API12)在应用国际化中语言与区域设置方面的技术细节,基于实际开发实践进行总结。主要作为技术分享与交流载体,难免错漏,欢迎各位同仁提出宝贵意见和问题,以便共同进步。本文为原创内容,任何形式的转载必须注明出处及原作者。在当......
  • nextjs 实战开发1 Mercury 二级域名分发系统| 曲速引擎 Warp Drive
    开发目标开发一个免费的二级域名分发系统创建项目root@ubuntu:~/dev-nextjs/mercury_frontend#pnpmcreatenext-app@latest.版本:pnpm-v9.12.2版本:node-vv20.16.0版本:next15.0.2为了开发方便,我们要将脚手架的package.json进行修改,nextdev-H0.0.0.0-p80,这样当我们运......