HarmonyOS鸿蒙Next API 15 Swiper动效模式SwiperAnimationMode应用展示

HarmonyOS鸿蒙Next 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