鸿蒙ArkTs开发，仿抖音个人中心header 下拉放大

最新推荐文章于 2024-05-06 20:32:08 发布
最新推荐文章于 2024-05-06 20:32:08 发布
阅读量671 收藏 1
点赞数 8
分类专栏： 鸿蒙ArkTsUI开发 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hxpp777/article/details/138472386
版权
本文介绍了在鸿蒙操作系统ETS中，如何利用ScrollView的contentOffset和TouchEvent事件实现头部滑动功能，并探讨了如何添加动画效果以提升用户体验，包括滑动过程中的bounce感。
摘要由CSDN通过智能技术生成

如果是iOS 或者android 上实现，可以用Scollview 的contentOffset 来实现，然而在鸿蒙ets中该如何实现？废话不多说开始撸代码

第一步、实现一个header

// 创建header，准备一张背景图片
  @Builder
  HeaderBuilder(){
    Column() {
      Row() {
        Image($r('app.media.back'))
          .width(25)
          .height(25)
          .onClick(() => {
            router.back();
          })
        Text(this.distance == 0 ? 'test1' : "")
          .fontColor(Color.Black)
          .fontSize(20)
          .margin({ left: 5 })
        Blank()
        Image($r('app.media.share'))
          .width(25)
          .height(25)

        Image($r('app.media.more'))
          .width(25)
          .height(25)

      }
      .width('100%')
      .padding(20)
      .margin({ top: 20 })

      Row() {
        Text(this.distance > 0 ? 'test2' : '')
          .fontColor(Color.Red)
          .fontSize(30)
          .margin({ left: 5 })
      }
      .width("100%")
      .height(35)
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Start)
    }
    .height(this.ImHeight)
    .width(this.ImWidth)
    .align(Alignment.Center)
    .backgroundImage($r('app.media.banner'))
    .backgroundImageSize(ImageSize.Cover)
  }

 第二步、创建header下方的内容部分，通过下拉下面的部分来实现header 背景图放大，松开后复原

这里小编通过TouchEvent 事件来实现具体代码如下：

.onTouch((event: TouchEvent) => {
        var y = event.touches[0].y
        if (event.type === TouchType.Down) {
          this.duration = 1000;
          this.startY = y;

        }
        if (event.type === TouchType.Up) {
          this.duration = 500;
          this.ImHeight = 200
          this.ImWidth = "100%"
          this.distance = 0
        }
        if (event.type === TouchType.Move) {
          this.distance = event.touches[0].y - this.startY
          if (Math.abs(this.distance) <= 100) {
            console.log("height=>"+ this.ImHeight +  "distance= ", this.distance)
            var height = 200 + this.distance
            if (height <= 0) {
              height = 0
            }else {
              var scale = this.distance / 200;
              this.ImHeight = height
              console.log("height=>"+ this.ImHeight +  "distance= ", this.distance)
              var imgWidth = 100 + scale * 100 + '%'
              if (100 + scale * 100 < 100){
                imgWidth = '100%'
                this.offX = -25 + this.distance
              }else {
                this.offX = -25
              }
              this.ImWidth = imgWidth
            }
          }else{
            this.distance = 0
          }
        }
      })

然而只有手势虽然能实现滑动，但是效果不好，没有bounce 感！如何让他有bounce 感？需要使用动画，具体代码如下：

.animation({
        duration: this.duration,
        curve: Curve.FastOutSlowIn,
        delay: 0,
        iterations: 1,
        playMode: PlayMode.Normal
      })

以上代码基本上是实现本功能的核心部分，完整的代码如下：

// 可拖动子组件，动画，圆弧
      Column() {
        Row() {
          Text('当点击此场景卡片时：')
            .fontSize(16)
          Blank()
          Image($r('app.media.menu'))
            .width(30)
            .height(30)
        }
        .width('100%')
        .margin({ top: 10, left: 10, right: 10, bottom: 20 })
      }
      .offset({y: this.offX})
      .borderRadius(35)
      .padding(20)
      .onTouch((event: TouchEvent) => {
        var y = event.touches[0].y
        if (event.type === TouchType.Down) {
          this.duration = 1000;
          this.startY = y;

        }
        if (event.type === TouchType.Up) {
          this.duration = 500;
          this.ImHeight = 200
          this.ImWidth = "100%"
          this.distance = 0
        }
        if (event.type === TouchType.Move) {
          this.distance = event.touches[0].y - this.startY
          if (Math.abs(this.distance) <= 100) {
            console.log("height=>"+ this.ImHeight +  "distance= ", this.distance)
            var height = 200 + this.distance
            if (height <= 0) {
              height = 0
            }else {
              var scale = this.distance / 200;
              this.ImHeight = height
              console.log("height=>"+ this.ImHeight +  "distance= ", this.distance)
              var imgWidth = 100 + scale * 100 + '%'
              if (100 + scale * 100 < 100){
                imgWidth = '100%'
                this.offX = -25 + this.distance
              }else {
                this.offX = -25
              }
              this.ImWidth = imgWidth
            }
          }else{
            this.distance = 0
          }
        }
      })
      .height('100%')
      .animation({
        duration: this.duration,
        curve: Curve.FastOutSlowIn,
        delay: 0,
        iterations: 1,
        playMode: PlayMode.Normal
      })
      .linearGradient(
        {
          direction: GradientDirection.Top,
          angle: 180,
          colors: [['#c7e2eb', 0.01], ["#F7F7F7", 0.05], ["#F7F7F7", 1]]
        })
     }
    .justifyContent(FlexAlign.Start)

下面是本案列的全部代码，仅供参考：

@Preview
@Entry
@Component
struct DetailPage {
  @State duration: number = 1000
  @State ImHeight: number = 200
  @State ImWidth: string = '100%'
  @State distance: number = 0
  @State offX: number = -25
  private startY = 0

  // 创建header，准备一张背景图片
  @Builder
  HeaderBuilder(){
    Column() {
      Row() {
        Image($r('app.media.back'))
          .width(25)
          .height(25)
          .onClick(() => {
            router.back();
          })
        Text(this.distance == 0 ? 'test1' : "")
          .fontColor(Color.Black)
          .fontSize(20)
          .margin({ left: 5 })
        Blank()
        Image($r('app.media.share'))
          .width(25)
          .height(25)

        Image($r('app.media.more'))
          .width(25)
          .height(25)

      }
      .width('100%')
      .padding(20)
      .margin({ top: 20 })

      Row() {
        Text(this.distance > 0 ? 'test2' : '')
          .fontColor(Color.Red)
          .fontSize(30)
          .margin({ left: 5 })
      }
      .width("100%")
      .height(35)
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.Start)
    }
    .height(this.ImHeight)
    .width(this.ImWidth)
    .align(Alignment.Center)
    .backgroundImage($r('app.media.banner'))
    .backgroundImageSize(ImageSize.Cover)
  }


  build() {
    Column() {
      // header
      this.HeaderBuilder()
      // 可拖动子组件，动画，圆弧
      Column() {
        Row() {
          Text('当点击此场景卡片时：')
            .fontSize(16)
          Blank()
          Image($r('app.media.menu'))
            .width(30)
            .height(30)
        }
        .width('100%')
        .margin({ top: 10, left: 10, right: 10, bottom: 20 })
      }
      .offset({y: this.offX})
      .borderRadius(35)
      .padding(20)
      .onTouch((event: TouchEvent) => {
        var y = event.touches[0].y
        if (event.type === TouchType.Down) {
          this.duration = 1000;
          this.startY = y;

        }
        if (event.type === TouchType.Up) {
          this.duration = 500;
          this.ImHeight = 200
          this.ImWidth = "100%"
          this.distance = 0
        }
        if (event.type === TouchType.Move) {
          this.distance = event.touches[0].y - this.startY
          if (Math.abs(this.distance) <= 100) {
            console.log("height=>"+ this.ImHeight +  "distance= ", this.distance)
            var height = 200 + this.distance
            if (height <= 0) {
              height = 0
            }else {
              var scale = this.distance / 200;
              this.ImHeight = height
              console.log("height=>"+ this.ImHeight +  "distance= ", this.distance)
              var imgWidth = 100 + scale * 100 + '%'
              if (100 + scale * 100 < 100){
                imgWidth = '100%'
                this.offX = -25 + this.distance
              }else {
                this.offX = -25
              }
              this.ImWidth = imgWidth
            }
          }else{
            this.distance = 0
          }
        }
      })
      .height('100%')
      .animation({
        duration: this.duration,
        curve: Curve.FastOutSlowIn,
        delay: 0,
        iterations: 1,
        playMode: PlayMode.Normal
      })
      .linearGradient(
        {
          direction: GradientDirection.Top,
          angle: 180,
          colors: [['#c7e2eb', 0.01], ["#F7F7F7", 0.05], ["#F7F7F7", 1]]
        })
     }
    .justifyContent(FlexAlign.Start)
  }
}

Ellis_h
关注
专栏目录
HarmonyOS鸿蒙开发指南:基于ArkTS开发 网络管理
sybh的博客
01-10 970
应用通过HTTP发起一个数据请求，支持常见的GET、POST、OPTIONS、HEAD、PUT、DELETE、TRACE、CONNECT方法。使用WebSocket建立服务器与客户端的双向连接，需要先通过createWebSocket方法创建WebSocket对象，然后通过connect方法连接到服务器。当连接成功后，客户端会收到open事件的回调，之后客户端就可以通过send方法与服务器进行通信。当服务器发信息给客户端时，客户端会收到message事件的回调。
HarmonyOS鸿蒙开发指南:基于ArkTS开发 折叠屏 示例代码集
sybh的博客
01-11 1269
交互不中断示例代码、横竖屏旋转适配示例代码、字体/图标适配示例代码、图片/视频/弹出框适配示例代码、运营类图片/视频、其他控件适配示例代码
Android 利用CoordinatorLayout实现高仿抖音个人中心 下拉越界回弹 图片放大
12-04
利用CoordinatorLayout仿抖音个人中心 下拉越界回弹 图片放大，viewPager嵌套效果。效果基本一致，并且稳定。
仿潮自拍个人中心拖拉效果
文淑的博客
01-30 1307
一、前言 一直都想跟大家分享一篇好的文章，但苦于心中的墨水，写出来都平平无奇。我自己也在反思是不是没有表达清楚了，本篇文章我会尽量详细的讲解。 好久没有文章更新了，是我欠大家的一份承诺，拖拉的习惯一直没有改掉，希望大家能够监督监督我，同时我也尽量克制自己的懒惰，及时分享自己的一些学习成果。 二、正文 习惯了先上效果图，再逐一解剖，图文并茂有助于大家的理解 1、效果图 录制的
HarmonyOS NEXT 使用timeline时间轴下拉刷新效果
最新发布
shudaoshanQAQ的博客
05-06 867
本示例使用了onScroll回调监听接口.........
HarmonyOS Next 标题下拉缩放案例
shudaoshanQAQ的博客
03-20 1174
本文以备忘录应用为示例，介绍如何在实现标题展开时继续下拉的动效。
鸿蒙ArkTS仿写抖音-开篇(没有代码)
chejucao的博客
01-16 1199
今天刷到大嘴的采访视频，深有触动，每个位置都有每个位置的不易，既然每个人都有痛苦，何尝不是一种快乐。
HarmonyOS 实战开发案例-仿抖音短视频应用
1
02-18 1861
前段时间看到一篇文章，但是没有源码，是一个仿写抖音的文章，最近也在看这块，顺便写个简单的短视频小应用。
Android仿抖音主页效果实现
乔布奇的博客
12-08 9883
“抖音”都玩过吧，是不是很好玩，我反正是天天刷，作为一个非著名的Android低级攻城狮，虽然技术菜的一匹，但是也经常刷着刷着会思考：咦？这玩意是用哪个控件做的？这个效果是咋实现的啊？由于本人技术水平有限，所以今天咱就先挑个比较简单的来看看是如何实现的，思考再三，我们就拿抖音首页的这个效果来练练手吧，话不多说，开搞！
Android实现个人中心设置界面
这个男孩不简单的博客
02-19 9819
个人中心界面在每个APP上都会出现，相信大家一定不会陌生吧！在这篇文章中，我将实现个人中心设置界面，先看看效果图：  一、1.顶部磨砂图像背景以及圆形头像实现： 1）build.gradle中添加以下依赖： compile 'com.github.bumptech.glide:glide:3.7.0' compile 'jp.wasabeef:glide-transformati...
仿知乎个人中心沉浸式页面
denglixuan1996的博客
03-01 4402
最终效果：主要用到三个组件：CoordinatorLayout，AppBarLayout，CollapsingToolbarLayoutCoordinatorLayout协调者布局，Google将其解释为一个超级FrameLayout：CoordinatorLayout is a super-powered FrameLayout.CoordinatorLayout是支持包”com.Android...
个人信息界面 下拉头部图片视图跟随变化
12-21
个人信息界面 下拉头部图片视图跟随变化。
002 学习鸿蒙应用开发ArkTs语言
热门推荐
龚礼鹏的博客
04-19 1万+
ArkTs是目前鸿蒙开发的主要语言，目前鸿蒙的主推模型Stage的新版本(3.1.0(API 9))开发不支持Java和JavaScript了，所以开发鸿蒙应用学习ArkTs是很有必要的。5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集。
鸿蒙Harmony应用开发—ArkTS声明式开发（容器组件：List）
m0_64420071的博客
03-15 2536
ArkTS声明式开发（容器组件：List）
android 简书个人主页,使用Kotlin仿的简书个人主页，只需一个控件
weixin_31109967的博客
06-03 616
界面做的比较丑，但是基本上实现了功能。为了学习最近比较火的kotlin语言，就试着写了个demo。参考上篇文章仿掌上英雄联盟的效果。效果图一、开始前的准备导入kotlin开发环境：在androidStudio3.0版本默认已经集成好了。直接在创建项目的时候勾选include Kotlin support，会自动帮我们创建好kotlin语言的项目。不勾选就是java。image.png如果是手动集成...
鸿蒙ArkUI开发-属性动画的使用
m0_62167422的博客
01-25 1800
属性动画，是最为基础的动画，其功能强大、使用场景多，应用范围较广。简单来说，属性动画是组件的通用属性发生改变时而产生的属性渐变效果。如下图所示，其原理是，当组件的通用属性发生改变时，组件状态由初始状态逐渐变为结束状态的过程中，会创建多个连续的中间状态，逐帧播放后，就会形成属性渐变效果，从而形成动画。
HarmonyOS NEXT短视频切换实现案例
shudaoshanQAQ的博客
03-21 1469
本模块基于Swiper组件和Video组件实现短视频切换功能。
手把手教你写用 ArkTS 完成 HarmonyOS 实战项目编写 —— 支付宝页面仿写
欢迎来到Gorit的博客
12-15 2513
HarmonOS ArkTS 实战项目
ArkTs封装网络请求并发起一个Get请求
胡世林的博客
01-02 2125
本文讲的是封装下ArkTs的HTTP请求，做一下公共的拦截，并使用这个lib发起一次请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值