HarmonyOS API 15 Swiper动效模式SwiperAnimationMode应用展示 原创

​
滑块视图容器Swiper，提供子组件滑动轮播显示的能力。本节演示了API 15新增的动效模式SwiperAnimationMode的应用展示。

Swiper组件翻页至指定页面的动效模式。描述如下：

卡片能力： 从API version 15开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 15开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
安装新版的DevEco Studio 5.0.5 Release
新版的DevEco Studio包含了最新的API 17,可以更好的体验鸿蒙的开发乐趣。

创建一个SwiperAnimationMode示例
创建一个名为“ArkTSSwiperAnimationMode”的项目，用于演示SwiperAnimationMode的使用示例。

创建数据源类MyDataSource
该类主要是用于提供Swiper组件的数据源。代码如下

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() {
  }
}

创建Swiper组件
Swiper组件代码如下：

@Entry
@Component
struct Index {
  private swiperController: SwiperController = new SwiperController();
  private data: MyDataSource = new MyDataSource([]);

aboutToAppear(): void {
    let list: number[] = [];
    for (let i = 0; i <= 20; i++) {
      list.push(i);
    }
    this.data = new MyDataSource(list);
  }

build() {
    Column({ space: 5 }) {
      Swiper(this.swiperController) {
        LazyForEach(this.data, (item: string) => {
          Text(item.toString())
            .width(‘90%’)
            .height(360)
            .backgroundColor(0xAFEEEE)
            .textAlign(TextAlign.Center)
            .fontSize(30)
        }, (item: string) => item)
      }
      .cachedCount(2)
      .index(1)
      .autoPlay(false)
      .interval(4000)
      .loop(false)
      .duration(1000)
      .itemSpace(5)
      .prevMargin(35)
      .nextMargin(35)
      .onChange((index: number) => {
        console.info(index.toString());
      })
      .onAnimationStart((index: number, targetIndex: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index);
        console.info("targetIndex: " + targetIndex);
        console.info("current offset: " + extraInfo.currentOffset);
        console.info("target offset: " + extraInfo.targetOffset);
        console.info("velocity: " + extraInfo.velocity);
      })
      .onAnimationEnd((index: number, extraInfo: SwiperAnimationEvent) => {
        console.info("index: " + index);
        console.info("current offset: " + extraInfo.currentOffset);
      })

Column({ space: 5 }) {
        Button(‘NO_ANIMATION 0’)
          .onClick(() => {
            this.swiperController.changeIndex(0, SwiperAnimationMode.NO_ANIMATION);
          })
        Button(‘DEFAULT_ANIMATION 10’)
          .onClick(() => {
            this.swiperController.changeIndex(10, SwiperAnimationMode.DEFAULT_ANIMATION);
          })
        Button(‘FAST_ANIMATION 20’)
          .onClick(() => {
            this.swiperController.changeIndex(20, SwiperAnimationMode.FAST_ANIMATION);
          })
      }.margin(5)
    }.width(‘100%’)
    .margin({ top: 5 })
  }
}

这里重点介绍API 15新增的事件changeIndex(index: number, animationMode?: SwiperAnimationMode | boolean)，其中SwiperAnimationMode就是设置翻页至指定页面时的动效模式。默认值：SwiperAnimationMode.NO_ANIMATION。其中，动效模式有以下三种选择：

NO_ANIMATION 无动效翻页至指定页面。
DEFAULT_ANIMATION 有动效翻页至指定页面。
FAST_ANIMATION 先无动效翻页至指定页面附近，再有动效翻页至指定页面。
上述示例，通过三个按钮的点击，来触发不同的动效模式的效果。

NO_ANIMATION 无动效翻页至指定页面，效果如下。

DEFAULT_ANIMATION 有动效翻页至指定页面，效果如下。

FAST_ANIMATION 先无动效翻页至指定页面附近，再有动效翻页至指定页面，效果如下。

源码
本示例源码归档至《跟老卫学HarmonyOS开发》：https://github.com/waylau/harmonyos-tutorial

​