求用cocos creator 3.5 以上版本写的模拟书本翻页效果

您好，针对您的问题，我提供以下代码示例实现模拟书本翻页效果：

1. 首先创建一个节点作为书页，该节点下面添加一个 Sprite 组件用于显示书页的背景图。

2. 创建一个脚本组件，命名为 PageFlip，将该组件挂在书页节点上。在 PageFlip 组件中添加以下代码：

const {ccclass, property} = cc._decorator;

@ccclass
export default class PageFlip extends cc.Component {
    @property(cc.Node)
    private leftPage: cc.Node = null;
    @property(cc.Node)
    private rightPage: cc.Node = null;

    private touchStartPos: cc.Vec2 = cc.Vec2.ZERO;
    private touchEndPos: cc.Vec2 = cc.Vec2.ZERO;
    private touchMovePos: cc.Vec2 = cc.Vec2.ZERO;
    private touchMoveDir: number = 0;
    private isTouching: boolean = false;

    private readonly maxAngle: number = 20;

    onLoad() {
        this.node.on(cc.Node.EventType.TOUCH_START, this.onTouchStart, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this.onTouchEnd, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.onTouchEnd, this);
    }

    start() {
        this.updatePagePos(0);
    }

    private onTouchStart(event: cc.Event.EventTouch) {
        if (this.isTouching) {
            return;
        }
        this.isTouching = true;
        this.touchStartPos = event.getLocation();
    }

    private onTouchMove(event: cc.Event.EventTouch) {
        if (!this.isTouching) {
            return;
        }
        this.touchMovePos = event.getLocation();
        const distance = this.touchMovePos.sub(this.touchStartPos);
        if (distance.mag() < 10) {
            return;
        }
        this.touchMoveDir = distance.x > 0 ? -1 : 1;
        this.updatePagePos(distance.x);
    }

    private onTouchEnd(event: cc.Event.EventTouch) {
        if (!this.isTouching) {
            return;
        }
        this.isTouching = false;
        const distance = this.touchEndPos.sub(this.touchStartPos);
        if (distance.mag() < 10) {
            return;
        }
        this.touchEndPos = event.getLocation();
        const angle = distance.signAngle(cc.v2(1, 0)) * 180 / Math.PI;
        if (angle > this.maxAngle) {
            this.turnPage();
        } else {
            this.updatePagePos(0);
        }
    }

    private updatePagePos(deltaX: number) {
        const nodeSize = this.node.getContentSize();
        const halfWidth = nodeSize.width / 2;
        const pageWidth = halfWidth - Math.abs(deltaX);
        const angle = this.maxAngle * Math.abs(deltaX) / halfWidth;
        const leftPagePosX = deltaX > 0 ? halfWidth + pageWidth * Math.sin(angle * Math.PI / 180) : halfWidth - pageWidth;
        const rightPagePosX = deltaX > 0 ? halfWidth + pageWidth : halfWidth - pageWidth * Math.sin(angle * Math.PI / 180);
        this.leftPage.setPosition(leftPagePosX, nodeSize.height / 2);
        this.rightPage.setPosition(rightPagePosX, nodeSize.height / 2);
        this.leftPage.setRotation(angle * this.touchMoveDir);
        this.rightPage.setRotation(-angle * this.touchMoveDir);
    }

    private turnPage() {
        const nodeSize = this.node.getContentSize();
        const duration = 0.3;
        const deltaX = this.touchMoveDir * nodeSize.width;
        const leftPagePosX = deltaX > 0 ? -nodeSize.width / 2 : nodeSize.width / 2;
        const rightPagePosX = deltaX > 0 ? nodeSize.width / 2 : -nodeSize.width / 2;
        const angle = deltaX > 0 ? -this.maxAngle : this.maxAngle;
        const leftPageMove = cc.moveTo(duration, cc.v2(leftPagePosX, nodeSize.height / 2)).easing(cc.easeOut(2));
        const rightPageMove = cc.moveTo(duration, cc.v2(rightPagePosX, nodeSize.height / 2)).easing(cc.easeOut(2));
        const leftPageRotate = cc.rotateTo(duration, angle * this.touchMoveDir).easing(cc.easeOut(2));
        const rightPageRotate = cc.rotateTo(duration, -angle * this.touchMoveDir).easing(cc.easeOut(2));
        const resetPagePos = cc.callFunc(() => {
            this.leftPage.setPosition(-nodeSize.width / 2, nodeSize.height / 2);
            this.rightPage.setPosition(nodeSize.width / 2, nodeSize.height / 2);
            this.leftPage.setRotation(0);
            this.rightPage.setRotation(0);
            this.updatePagePos(0);
        });
        const seq = cc.sequence(cc.spawn(leftPageMove, leftPageRotate), cc.spawn(rightPageMove, rightPageRotate), resetPagePos);
        this.node.runAction(seq);
    }
}

3. 在编辑器中将书页节点复制一份并且翻转，作为右侧的书页。将左侧的书页节点挂载 PageFlip 组件，并且将右侧的书页节点挂载 PageFlip 组件的克隆节点上。

4. 在场景中添加两个按钮用于翻页操作。在按钮的点击事件中调用 PageFlip 组件的 turnPage 方法即可实现翻页效果。

以上就是使用 cocos creator 3.5 实现模拟书本翻页效果的示例代码。如果您有任何问题，请随时向我提问。