feat:实现swiper indicator自定义动画效果

@@ -18,6 +18,8 @@ export { LabelComponent } from "./src/main/ets/components/view/LabelComponent"
 
 export { BannerComponent } from "./src/main/ets/components/view/BannerComponent"
 
+export { ZhCarouselLayout01 } from './src/main/ets/components/compview/ZhCarouselLayout01'
+
 export { SingleRow03Component } from "./src/main/ets/components/page/SingleRow03Component"
 
 export { SingleColumnComponent } from "./src/main/ets/components/page/SingleColumnComponent"

@@ -17,6 +17,7 @@ import { ZhSingleColumn04 } from './compview/ZhSingleColumn04';
 import { ZhSingleColumn05 } from './compview/ZhSingleColumn05';
 import { ZhSingleColumn09 } from './compview/ZhSingleColumn09';
 import { ZhGridLayout03 } from './compview/ZhGridLayout03';
+import { ZhCarouselLayout01 } from './compview/ZhCarouselLayout01';
 import { CardParser } from './CardParser';
 import { LiveHorizontalReservationComponent } from './view/LiveHorizontalReservationComponent';
 import { ZhGridLayout02 } from './compview/ZhGridLayout02';
@@ -45,7 +46,7 @@ export struct CompParser {
       if (compDTO.compStyle === CompStyle.Label_03) {
         LabelComponent({ compDTO: compDTO })
       } else if (compDTO.compStyle === CompStyle.Zh_Carousel_Layout_01) {
-        BannerComponent({ compDTO: compDTO })
+        ZhCarouselLayout01({ compDTO: compDTO })
       } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_01 && compDTO.imageScale === 2) {
         LiveHorizontalCardComponent({ compDTO: compDTO })
       } else if (compDTO.compStyle === CompStyle.Zh_Single_Row_01 && compDTO.imageScale === 3) {

+import { CompDTO, ContentDTO, } from 'wdBean';
+import { BreakpointConstants, CommonConstants, DurationEnum } from 'wdConstant';
+import { BreakPointType, Logger } from 'wdKit';
+import { CompUtils } from '../../utils/CompUtils';
+import { ProcessUtils } from '../../utils/ProcessUtils';
+import { EmptyComponent } from '../view/EmptyComponent';
+
+const TAG = 'Zh_Carousel_Layout-01';
+
+/**
+ * 轮播组件,即Banner/轮播大图/焦点图/自动滑动
+ * 样式：
+ * 'Zh_Carousel_Layout-01', // 通用轮播卡：视频、直播、活动、专题、榜单、外链
+ */
+
+
+class MyDataSource implements IDataSource {
+  private list: number[] = []
+
+  constructor(list: number[]) {
+    this.list = list
+  }
+
+  totalCount(): number {
+    return this.list.length
+  }
+
+  getData(index: number): number {
+    return this.list[index]
+  }
+
+  registerDataChangeListener(listener: DataChangeListener): void {
+  }
+
+  unregisterDataChangeListener() {
+  }
+}
+
+@Component
+export struct ZhCarouselLayout01 {
+  @StorageLink('currentBreakpoint') @Watch('watchCurrentBreakpoint') currentBreakpoint: string = BreakpointConstants.BREAKPOINT_XS;
+  @State compDTO: CompDTO = {} as CompDTO
+  private data: MyDataSource = new MyDataSource([])
+  @State firstWd: number = 0
+  @State SecondWd: number = 0
+  @State swiperIndex: number = 0
+
+  watchCurrentBreakpoint() {
+    Logger.info(TAG, `watchCurrentBreakpoint, this.currentBreakpoint: ${this.currentBreakpoint}`);
+  }
+
+  aboutToAppear() {
+    Logger.info(TAG, `aboutToAppear, beanList:${this.compDTO?.operDataList?.length}, currentBreakpoint:${this.currentBreakpoint}`);
+    let list: number[] = []
+    for (let i = 1; i <= this.compDTO?.operDataList?.length; i++) {
+      list.push(i);
+    }
+    this.data = new MyDataSource(list)
+  }
+
+  isAutoPlay() {
+    if (this.compDTO.extraData) {
+      return JSON.parse(this.compDTO.extraData).autoplay == 1
+    } else {
+      return false
+    }
+  }
+
+  build() {
+    if (this.compDTO?.operDataList?.length) {
+      Stack() {
+        Swiper() {
+          ForEach(this.compDTO?.operDataList, (item: ContentDTO, index: number) => {
+            CarouselLayout01CardView({
+              item: item,
+              index: index
+            })
+          })
+        }
+        .borderRadius($r('app.float.image_border_radius'))
+        .displayCount(this.buildDisplayCount()) // 仅展示1个图片
+        .cachedCount(2)
+        .index(0) // The default index of Swiper.
+        .indicator(false)
+        .loop(true)
+        .vertical(false)
+        .curve(Curve.Linear)
+        .autoPlay(this.isAutoPlay())
+        .onAnimationStart((index: number, targetIndex: number) => {
+          Logger.info(TAG, `Swiper onAnimationStart index : ${index}, targetIndex: ${targetIndex}`);
+          this.swiperIndex = targetIndex
+        })
+        .onChange((index: number) => {
+          Logger.info(TAG, `Swiper onChange index : ${index}`);
+
+        })
+        .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
+          this.firstWd = 12
+          setTimeout(() => {
+            this.SecondWd = 12
+          }, 2000)
+          console.info("onAnimationEnd, index: " + index)
+        })
+
+        // 自定义indicator
+        GridRow({
+          columns: this.data.totalCount(),
+          gutter: { x: 2 }
+        }) {
+          LazyForEach(this.data, (item: string, index: number) => {
+            GridCol() {
+              if (index === this.swiperIndex) {
+                indicatorAnimations({
+                  index: index,
+                  isAutoPlay: this.isAutoPlay()
+                })
+              } else {
+                Row() {
+                  Image($r('app.media.swiper_indicator_gray'))
+                    .width('100%')
+                    .height(2)
+                }
+              }
+            }
+          }, (item: string) => item)
+        }
+        .width(CommonConstants.FULL_PARENT)
+        .padding({
+          left: 10,
+          right: 10,
+          top: 12,
+          bottom: 12
+        })
+        .alignItems(ItemAlign.End)
+      }
+      .alignContent(Alignment.BottomEnd)
+      .width(CommonConstants.FULL_WIDTH)
+      .padding({
+        left: $r('app.float.card_comp_pagePadding_lf'),
+        right: $r('app.float.card_comp_pagePadding_lf'),
+        top: $r('app.float.card_comp_pagePadding_tb'),
+        bottom: $r('app.float.card_comp_pagePadding_tb')
+      })
+
+      // .backgroundColor($r('app.color.white'))
+    } else {
+      EmptyComponent({ emptyHeight: 200 })
+    }
+  }
+
+  public buildDisplayCount(): number {
+    return new BreakPointType({ xs: 1, sm: 1, md: 2, lg: 3 }).getValue(this.currentBreakpoint)
+  }
+}
+
+
+@Component
+struct CarouselLayout01CardView {
+  private item: ContentDTO = {} as ContentDTO;
+  private index: number = -1;
+
+  build() {
+    Stack() {
+      Image(this.item.coverUrl)
+        .width(CommonConstants.FULL_PARENT)
+        .height(CommonConstants.FULL_PARENT)
+        .objectFit(ImageFit.Cover)
+      Row()
+        .width(CommonConstants.FULL_PARENT)
+        .height(60)
+        .linearGradient({
+          direction: GradientDirection.Top, // 渐变方向:to Top/从下往上
+          colors: [[0x7508111A, 0.0], [0x7508111A, 0.3], [Color.Transparent, 1.0]]
+        })
+      // 文本信息
+      Text(`${this.item.newsTitle}`)
+        .width(CommonConstants.FULL_PARENT)
+        .height(39)
+        .padding({
+          left: 10,
+          right: 10
+        })
+        .margin({
+          bottom: 28
+        })
+        .fontColor(Color.White)
+        .fontSize($r('app.float.font_size_16'))
+        .fontWeight(FontWeight.Medium)
+        .textAlign(TextAlign.Start)
+        .align(Alignment.Bottom)
+        .maxLines(CompUtils.MAX_LINES_2)
+        .textOverflow({ overflow: TextOverflow.Ellipsis })
+    }
+    .width(CommonConstants.FULL_WIDTH)
+    .aspectRatio(CompUtils.ASPECT_RATIO_2_1)
+    .alignContent(Alignment.BottomStart)
+    .hoverEffect(HoverEffect.Scale)
+    .onClick((event: ClickEvent) => {
+      Logger.info(TAG, `ZhCarouselLayout01 onClick event index: ${this.index}`);
+      ProcessUtils.processPage(this.item)
+    })
+  }
+}
+
+
+@Component
+struct indicatorAnimations {
+  @Prop index: number = 0
+  @Prop isAutoPlay: boolean = true
+  @State leftW: number | string = 0
+  @State rightW: number | string = 0
+  @State centerFontSize: number = 0
+
+  aboutToAppear(): void {
+    if (this.isAutoPlay) {
+      setTimeout(() => {
+        this.leftW = '100%'
+        this.centerFontSize = 11
+      }, 0)
+      setTimeout(() => {
+        this.rightW = '100%'
+      }, 1500)
+    } else {
+      this.leftW = '100%'
+      this.centerFontSize = 11
+      this.rightW = '100%'
+    }
+
+  }
+
+  build() {
+    Flex({ alignItems: ItemAlign.End }) {
+      Stack() {
+        Image($r('app.media.swiper_indicator_gray'))
+          .width('100%')
+          .height(2)
+        Image($r('app.media.swiper_indicator_white'))
+          .width(this.leftW)
+          .height(2)
+          .animation({
+            duration: 1500,
+            curve: Curve.EaseOut,
+            playMode: PlayMode.Normal
+          })
+      }
+      .width('100%')
+      .alignContent(Alignment.Start)
+
+      Text(`0${this.index + 1}`)
+        .fontSize(this.centerFontSize)
+        .fontColor($r('app.color.white'))
+        .width(16)
+        .textAlign(TextAlign.Center)
+        .margin({
+          bottom: -2
+        })
+        .flexShrink(0)
+        .animation({
+          duration: 300,
+          curve: Curve.EaseOut,
+          playMode: PlayMode.Normal
+        })
+      Stack() {
+        Image($r('app.media.swiper_indicator_gray'))
+          .width('100%')
+          .height(2)
+        Image($r('app.media.swiper_indicator_white'))
+          .width(this.rightW)
+          .height(2)
+          .animation({
+            duration: 1500,
+            curve: Curve.EaseOut,
+            playMode: PlayMode.Normal
+          })
+      }
+      .width('100%')
+      .alignContent(Alignment.Start)
+    }
+    .height(14)
+  }
+}