HarmonyOS开始玩耍：Scroll组件结合属性动画实现导航背景色切换效果（十六）

最新推荐文章于 2024-06-12 13:52:08 发布

夲奋亻Jay

最新推荐文章于 2024-06-12 13:52:08 发布

阅读量545

点赞数 3

分类专栏： HarmonyOS鸿蒙应用文章标签：微信鸿蒙

本文链接：https://blog.csdn.net/qq_29101285/article/details/139225959

版权

HarmonyOS鸿蒙应用专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、Scroll组件

可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

Scroll(scroller?: Scroller)

1、参数

参数名	参数类型	必填	参数描述
scroller	Scroller	否	可滚动组件的控制器。用于与可滚动组件进行绑定。

2、属性

名称	参数类型	描述
scrollable	ScrollDirection	设置滚动方向。默认值：ScrollDirection.Vertical
scrollBar	BarState	设置滚动条状态。默认值：BarState.Auto 说明：如果容器组件无法滚动，则滚动条不显示。如果容器组件的子组件大小为无穷大，则滚动条不支持拖动和伴随滚动。
scrollBarColor	string、number、Color	设置滚动条的颜色。
scrollBarWidth	string、number	设置滚动条的宽度，不支持百分比设置。默认值：4 单位：vp 说明：如果滚动条的宽度超过其高度，则滚动条的宽度会变为默认值。
edgeEffect	EdgeEffect	设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。默认值：EdgeEffect.None

3、事件

onScroll(event: (xOffset: number, yOffset: number) => void)

滚动事件回调, 返回滚动时水平、竖直方向偏移量。

触发该事件的条件：
1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。
2、通过滚动控制器API接口调用。
3、越界回弹。

4、Scroller

可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持绑定到List、Scroll、ScrollBar、Grid、WaterFlow上。

导入对象

scroller: Scroller = new Scroller()

二、属性动画

组件的某些通用属性变化时，可以通过属性动画实现渐变过渡效果，提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。

animation(value: {duration?: number, tempo?: number, curve?: string | Curve | ICurve, delay?:number, iterations: number, playMode?: PlayMode, onFinish?: () => void})

1、参数

名称	参数类型	必填	描述
duration	number	否	设置动画时长。默认值：1000 单位：毫秒说明： - 在ArkTS卡片上最大动画持续时间为1000毫秒。 - 设置浮点型类型的值时，向下取整；设置值为1.2，按照1处理。
tempo	number	否	动画播放速度。数值越大，动画播放速度越快，数值越小，播放速度越慢。值为0时，表示不存在动画。：默认值：1
curve	string、Curve、ICurve	否	设置动画曲线。默认值：Curve.EaseInOut
delay	number	否	设置动画延迟执行的时长。默认值：0，不延迟播放。单位：毫秒取值范围：[0, +∞) 说明：设置浮点型类型的值时，向下取整。例如，设置值为1.2，按照1处理。
iterations	number	否	设置播放次数。默认值：1 取值范围：[-1, +∞) 说明：设置为-1时表示无限次播放。设置为0时表示无动画效果。
playMode	PlayMode	否	设置动画播放模式，默认播放完成后重头开始播放。默认值：PlayMode.Normal
onFinish	() => void	否	状态回调，动画播放完成时触发。说明：当iterations设置为-1时，动画效果无限循环不会停止，所以不会触发此回调。

三、示例

导航栏背景色从透明到不透明的渐变

class ArticleItem {
  id: number;
  title: string;
  img: ResourceStr;
  author: string;
  date: string;

  constructor(id: number, title: string, img: ResourceStr, author: string, date: string) {
    this.id = id
    this.title = title
    this.img = img
    this.author = author
    this.date = date
  }
}


@Entry
@Component
struct Index {
  scroller: Scroller = new Scroller()
  @State scrollerFlag: boolean = false
  @State swiperImages: ResourceStr[] = [$r("app.media.1"), $r("app.media.4"), $r("app.media.3"), $r("app.media.download")]
  @State articleList: ArticleItem[] = [
    new ArticleItem(1, "嫦娥六号探测器进入环月轨道飞行", "https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/08/2024050820144382684.jpg", "央视网", "2014-05-08"),
    new ArticleItem(2, "“五一”假期游处处火爆 有哪些文旅新潮流？", "https://cms-emer-res.cctvnews.cctv.com/image/1005/upload/17292d188bc64cef882f1cd07d3d2acc.jpeg", "央视新闻客户端", "2024-05-08"),
    new ArticleItem(3, "杭州：全面取消住房限购，购房即可申请落户", $r("app.media.2"), "界面新闻", "2024-05-09"),
    new ArticleItem(4, "时隔五年，合肥或将再次引进“国宝”大熊猫", "https://pics4.baidu.com/feed/d50735fae6cd7b899b1d7bef7ec7b8aad8330e5d.jpeg@f_auto?token=e70fa976dceb8e88433c493f7e86b88c", "九派新闻", "2024-05-08"),
    new ArticleItem(5, "发布擦边广告再被罚，椰树集团徘徊在“土味”和“低俗”之间？", "https://pics1.baidu.com/feed/e824b899a9014c083cd8d85d067bf9057af4f471.jpeg@f_auto?token=c6770b5d0d99a68721fc88e7a337d01c", "北京商报", "2024-05-08"),
    new ArticleItem(6, "特斯拉在华推进全自动驾驶 智能网联车产业链迎新机遇", $r("app.media.2"), "每日经济新闻", "2024-05-09"),
    new ArticleItem(7, "嫦娥六号探测器进入环月轨道飞行", "https://p5.img.cctvpic.com/photoworkspace/contentimg/2024/05/08/2024050820144382684.jpg", "央视网", "2014-05-08"),
    new ArticleItem(8, "“五一”假期游处处火爆 有哪些文旅新潮流？", "https://cms-emer-res.cctvnews.cctv.com/image/1005/upload/17292d188bc64cef882f1cd07d3d2acc.jpeg", "央视新闻客户端", "2024-05-08"),
    new ArticleItem(9, "杭州：全面取消住房限购，购房即可申请落户", $r("app.media.2"), "界面新闻", "2024-05-09"),
    new ArticleItem(10, "时隔五年，合肥或将再次引进“国宝”大熊猫", "https://pics4.baidu.com/feed/d50735fae6cd7b899b1d7bef7ec7b8aad8330e5d.jpeg@f_auto?token=e70fa976dceb8e88433c493f7e86b88c", "九派新闻", "2024-05-08"),
    new ArticleItem(11, "发布擦边广告再被罚，椰树集团徘徊在“土味”和“低俗”之间？", "https://pics1.baidu.com/feed/e824b899a9014c083cd8d85d067bf9057af4f471.jpeg@f_auto?token=c6770b5d0d99a68721fc88e7a337d01c", "北京商报", "2024-05-08"),
    new ArticleItem(12, "特斯拉在华推进全自动驾驶 智能网联车产业链迎新机遇", $r("app.media.2"), "每日经济新闻", "2024-05-09"),
  ]

  // 自定义构建函数
  @Builder headerSwiper() {
    Swiper() {
      ForEach(this.swiperImages, (item: ResourceStr) => {
        Image(item)
          .width("100%")
          .objectFit(ImageFit.Cover)
      })
    }
    .autoPlay(true)
    .height(260)
    .indicatorStyle({
      color: '#ffffff'
    })
  }

  // 自定义构建函数
  @Builder topBar() {
    Row() {
      Row() {
        Image($r("app.media.back2"))
          .width(44)
          .height(44)
      }
      .height("100%")
      .width(60)

      Row() {
        Text("图片新闻")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .textAlign(TextAlign.Center)
          .width("100%")
          .fontColor(0xffffff)
      }
      .layoutWeight(1)
      .height("100%")

      Row() {
        Image($r("app.media.share_icon"))
          .width(28)
          .height(28)
      }
      .width(60)
      .height("100%")
      .justifyContent(FlexAlign.Center)
    }
    .height(60)
    .width("100%")
    .backgroundColor(this.scrollerFlag ? Color.Green : Color.Transparent)
    .animation({ duration: 500 })
  }

  // 自定义构建函数
  @Builder newsItem(item: ArticleItem) {
    Row() {
      Column() {
        Text(item.title)
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        Text(`${item.author} ${item.date}`)
          .fontSize(14)
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
      .height(68)
      .justifyContent(FlexAlign.SpaceBetween)

      Image(item.img)
        .width(100)
        .height(68)
        .margin({ left: 8 })
        .borderRadius(2)
        .objectFit(ImageFit.Cover)
    }
    .width('100%')
    .height(80)
    .padding(10)
  }

  build() {
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        Scroll(this.scroller) {
          Column({ space: 20 }) {
            this.headerSwiper()

            ForEach(this.articleList, (item: ArticleItem) => {
              this.newsItem(item)
            })
          }
          .justifyContent(FlexAlign.Start)
          .alignItems(HorizontalAlign.Start)
        }
        .onScroll((xOffset: number, yOffset: number) => {
          if (this.scroller.currentOffset().yOffset >= 174) {
            this.scrollerFlag = true
          } else {
            this.scrollerFlag = false
          }
        })

        this.topBar()
      }

    }
    .width('100%')
    .height('100%')
  }
}

四、效果

在这里插入图片描述

我的博客只写前端博文，点击我去看更多喜欢的前端博文，欢迎大家一起讨论学习！【https://blog.csdn.net/qq_29101285?spm=1011.2266.3001.5343】

夲奋亻Jay

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HarmonyOS开始玩耍：Scroll组件结合属性动画实现导航背景色切换效果（十六）

支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等。可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，同一个控制器不可以控制多个容器组件，目前支持绑定到List、Scroll、ScrollBar、Grid、WaterFlow上。1、滚动组件触发滚动时触发，支持键鼠操作等其他触发滚动的输入设置。的布局尺寸超过父组件的尺寸时，内容可以滚动。2、通过滚动控制器API接口调用。可滚动的容器组件，当。
复制链接

扫一扫