Animating a PageView Indicator in Cocos Creator

The default PageView indicator is static. This implementation stretches the active marker when the user swipes between pages.

Track the previous and current indices, resize the selected marker with UITransform, and animate the transition with tween:

import { tween, Size, Sprite, UITransform } from 'cc';

private previousPage = 0;

private updateIndicatorHighlight() {
    const indicator = this._view._PageC_banner.indicator;
    if (!indicator) return;

    const markers = indicator.node.children;
    const currentPage = this._view._PageC_banner.getCurrentPageIndex();

    for (let i = 0; i < markers.length; i++) {
        const sprite = markers[i].getComponent(Sprite);
        if (!sprite) continue;

        const transform = markers[i].getComponent(UITransform);
        if (i === currentPage) {
            Tool.setImgSprite(markers[i], 'texture/illustrate/UI_Introduce_Point1', UIPnlillustrateLogic.bundleName);
            transform.setContentSize(this.markerWidth2, this.markerHeight);
            tween(transform).to(0.2, {
                contentSize: new Size(this.markerWidth1, this.markerHeight)
            }, { easing: 'smooth' }).start();
        } else {
            Tool.setImgSprite(markers[i], 'texture/illustrate/UI_Introduce_Point2', UIPnlillustrateLogic.bundleName);
            tween(transform).to(0.2, {
                contentSize: new Size(this.markerWidth2, this.markerHeight)
            }, { easing: 'smooth' }).start();
        }
    }

    // currentPage > previousPage indicates a left swipe; a smaller value indicates a right swipe.
    this.previousPage = currentPage;
}

Call the method from PageView’s page-turning event. You can use the direction comparison to change the stretch origin if the marker artwork requires direction-specific animation.