HarmonyOS 鸿蒙Next悬停动画

可以参考 如何实现页面上滑tabBar和顶部标题的悬停以及属性动画效果

1. 使用Stack层叠布局，将标题栏悬浮展示在页面顶部。
2. 考虑页面滚动以及tabContent里面的list滚动就要考虑滚动嵌套问题，目前场景需要选择：
   • 向上滚动时，父组件先滚动，父组件滚动到边缘以后自身滚。
   • 向下滚动时：自身先滚动，自身滚动到边缘以后父组件滚动。

   • .nestedScroll({
       scrollForward: NestedScrollMode.PARENT_FIRST,
       scrollBackward: NestedScrollMode.SELF_FIRST
     })
     

3. 父组件滚动过程中，根据滚动偏移量线性修改标题栏样式（如字体大小、透明度、背景等），onDidScroll可以返回当前帧滚动的偏移量和当前滚动状态。

   [@Entry](/user/Entry)
   [@Component](/user/Component)
   struct StickyNestedScroll {
     @State arr: number[] = []
     @State opacityNum: number = 0
     @State curYOffset: number = 0
   
     aboutToAppear() {
       for (let i = 0; i < 30; i++) {
         this.arr.push(i)
       }
     }
   
     @Styles
     listCard() {
       .backgroundColor(Color.White)
       .height(72)
       .width('calc(100% - 20vp)')
       .borderRadius(12)
       .margin({ left: 10, right: 10 })
     }
   
     build() {
       Stack() {
         Scroll() {
           Column() {
             Image($r('app.media.background'))// 图片资源需自行替换
               .width('100%')
               .height(300)
             Tabs({ barPosition: BarPosition.Start }) {
               TabContent() {
                 List({ space: 10 }) {
                   ForEach(this.arr, (item: number) => {
                     ListItem() {
                       Text('item' + item)
                         .fontSize(20)
                     }.listCard()
                   }, (item: string) => item)
                 }.width('100%')
                 .edgeEffect(EdgeEffect.None)
                 .nestedScroll({
                   scrollForward: NestedScrollMode.PARENT_FIRST,
                   scrollBackward: NestedScrollMode.SELF_FIRST
                 })
               }.tabBar('待办')
   
               TabContent() {
               }.tabBar('待阅')
             }
             .vertical(false)
             .width('100%')
             .height('calc(100% - 60vp)')
           }.width('100%')
         }
         .friction(0.6)
         .backgroundColor('#DCDCDC')
         .scrollBar(BarState.Off)
         .width('100%')
         .height('100%')
         .onDidScroll((xOffset: number, yOffset: number, scrollState: ScrollState): void => {
           // 累计计算当前父组件滚动在Y轴方向的偏移量
           this.curYOffset += yOffset
           // 根据父组件一共可以滚动的距离计算当前每帧的当前透明度
           let opacity = this.curYOffset / 240
           if (opacity >= 1) {
             opacity = 1
           }
           if (opacity <= 0) {
             opacity = 0
           }
           this.opacityNum = opacity
         })
   
         // 悬浮标题栏
         Text('工作台')
           .fontSize(24)
           .fontColor(Color.Black)
           .fontWeight(FontWeight.Bold)
           .backgroundColor(`rgba(255,255,255,${this.opacityNum})`)
           .position({ x: 0, y: 0 })
           .width('100%')
           .height(60)
           .padding({ left: 20 })
       }.width('100%')
       .height('100%')
     }
   }