...

assets/BezierCurveAnimation.ts

@@ -1,6 +1,5 @@
-import { _decorator, Component, Node } from 'cc';
+import { _decorator, Component } from 'cc';
 import * as cc from 'cc';
-import { EDITOR } from 'cc/env';
 import BezierCurve from './BezierCurve';
 const { ccclass, property } = _decorator;
 
@@ -9,11 +8,13 @@ let easingEnum = {};
 {
     let tempN = 0;
     for (let kS in cc.easing) {
+        if (Object.prototype.hasOwnProperty.call(cc.easing, kS)) {
             easingEnum[kS] = tempN;
             easingEnum[tempN] = kS;
             tempN++;
         }
     }
+}
 
 /** 缓动单元 */
 @ccclass('BezierCurveAnimationTweenUnit')
@@ -54,25 +55,36 @@ export class BezierCurveAnimation extends Component {
     /* --------------- 属性 --------------- */
     /** 缓动单元 */
     @property({ displayName: '缓动单元', type: [BezierCurveAnimationTweenUnit] })
-    tweenUnitAs: BezierCurveAnimationTweenUnit[] = [];
+    tweenUnitAS: BezierCurveAnimationTweenUnit[] = [];
 
     /** 缓动切换事件 */
-    @property({ displayName: '缓动切换事件', tooltip: '(当前缓动下标_indexN)', type: cc.EventHandler })
+    @property({ displayName: '缓动切换事件', tooltip: '(当前缓动下标_indexN)', type: [cc.EventHandler] })
-    tweenSwitchEvent = new cc.EventHandler();
+    tweenSwitchEventAS: cc.EventHandler[] = [];
 
     /** 更新事件 */
     @property({
         displayName: '更新事件',
         tooltip: '(总曲线Y_yN, 当前缓动下标_indexN, 当前缓动曲线Y_yN)',
-        type: cc.EventHandler
+        type: [cc.EventHandler]
     })
-    updateEvent = new cc.EventHandler();
+    updateEventAS: cc.EventHandler[] = [];
 
     /** 结束事件 */
-    @property({ displayName: '结束事件', type: cc.EventHandler })
+    @property({ displayName: '结束事件', type: [cc.EventHandler] })
-    endEvent = new cc.EventHandler();
+    endEventAS: cc.EventHandler[] = [];
     /* --------------- private --------------- */
-    /* ------------------------------- segmentation ------------------------------- */
+    /* ------------------------------- 功能 ------------------------------- */
+    /** 触发事件 */
+    emit(eventKey_: keyof BezierCurveAnimation, ...argsAS_: any[]): void {
+        let eventAS = this[eventKey_] as cc.EventHandler[];
+        if (!eventAS) {
+            return;
+        }
+        eventAS.forEach((v) => {
+            v.emit(argsAS_);
+        });
+    }
+
     /**
      * 开始缓动
      * @param startIndexN_ 缓动开始下标
@@ -80,7 +92,7 @@ export class BezierCurveAnimation extends Component {
      * @returns
      */
     startTween(startIndexN_?: number, endIndexN_ = (startIndexN_ ?? 0) + 1): cc.Tween<any> {
-        let tweenUnitAs = this.tweenUnitAs;
+        let tweenUnitAs = this.tweenUnitAS;
         if (startIndexN_ !== undefined) {
             tweenUnitAs = tweenUnitAs.slice(startIndexN_, endIndexN_);
         }
@@ -137,10 +149,10 @@ export class BezierCurveAnimation extends Component {
                         let y2N = yN * timeRangeN + lastTimeRatioN;
                         // 缓动切换事件触发
                         if (lastTweenIndexN !== tweenIndexN) {
-                            this.tweenSwitchEvent?.emit([lastTweenIndexN]);
+                            this.emit('tweenSwitchEventAS', lastTweenIndexN);
                         }
                         // 更新事件触发
-                        this.updateEvent?.emit([y2N, tweenIndexN, yN]);
+                        this.emit('updateEventAS', y2N, tweenIndexN, yN);
                         // 更新缓动下标
                         lastTweenIndexN = tweenIndexN;
                     }
@@ -148,7 +160,7 @@ export class BezierCurveAnimation extends Component {
             )
             .call(() => {
                 // 结束事件触发
-                this.endEvent?.emit([]);
+                this.emit('endEventAS');
             })
             .start();
         return tween;

assets/RollingLottery.ts

@@ -1,11 +1,10 @@
-import { _decorator, Component, Node } from 'cc';
+import { _decorator, Component } from 'cc';
 import * as cc from 'cc';
 import { BezierCurveAnimation } from './BezierCurveAnimation';
-import { EDITOR } from 'cc/env';
 const { ccclass, property, requireComponent, executeInEditMode } = _decorator;
 
 /** 旋转抽奖方向 */
-export enum RollingLotteryDirection {
+export enum RollingLottery2Direction {
     /** 竖 */
     VERTICAL,
     /** 横 */
@@ -13,21 +12,27 @@ export enum RollingLotteryDirection {
 }
 
 /** 循环滚动抽奖 */
-@ccclass('RollingLottery')
+@ccclass('RollingLottery2')
 @requireComponent(BezierCurveAnimation)
 @requireComponent(cc.Layout)
-export class RollingLottery extends Component {
+export class RollingLottery2 extends Component {
     /* --------------- 属性 --------------- */
     /** 滚动方向 */
-    @property({ displayName: '滚动方向', type: cc.Enum(RollingLotteryDirection) })
+    @property({ displayName: '滚动方向', type: cc.Enum(RollingLottery2Direction) })
-    dire = RollingLotteryDirection.VERTICAL;
+    dire = RollingLottery2Direction.VERTICAL;
 
     /** 子节点刷新事件 */
     @property({ displayName: '子节点刷新事件', tooltip: '(子节点_node, 下标_indexN)', type: cc.EventHandler })
     itemUpdateEvent = new cc.EventHandler();
+
+    /** 中心节点变更事件 */
+    @property({ displayName: '中心节点变更事件', tooltip: '(下标_indexN, 跳过状态_jumpB)', type: cc.EventHandler })
+    centerNodeEvent = new cc.EventHandler();
+
+    /** 滚动结束事件 */
+    @property({ displayName: '滚动结束事件', type: cc.EventHandler })
+    scrollEndEvent = new cc.EventHandler();
     /* --------------- private --------------- */
-    /** 曲线组件 */
-    private _curveComp: BezierCurveAnimation;
     /** transform 组件 */
     private _uiTransform: cc.UITransform;
     /** 周长 */
@@ -52,9 +57,35 @@ export class RollingLottery extends Component {
     private _currTargetN: number;
     /** 当前缓动下标 */
     private _currTweenN = 0;
+    /** 当前滚动配置 */
+    private _scrollConfig: RollingLottery2ScrollConfig;
+    /** 父节点中心点矩形 */
+    private _parentCenterRect: cc.Rect;
+    /** 跳过状态 */
+    private _jumpB = false;
     /* --------------- 临时变量 --------------- */
     private _tempM4 = cc.mat4();
     private _temp2M4 = cc.mat4();
+    /* --------------- public --------------- */
+    /** 曲线组件 */
+    curveComp: BezierCurveAnimation;
+    /** 末尾节点 */
+    get tailNode() {
+        return this.node.children[0];
+    }
+    /** 当前中心下标 */
+    get currIndexN() {
+        return this._currIndexN;
+    }
+    set currIndexN(valueN_) {
+        this.setCurrIndexN(valueN_);
+    }
+    /* ------------------------------- get/set ------------------------------- */
+    setCurrIndexN(valueN_: number) {
+        this._currIndexN = valueN_;
+        this.centerNodeEvent.emit([this._currIndexN, this._jumpB]);
+        // logger.log('当前选中', this._currIndexN);
+    }
     /* ------------------------------- 生命周期 ------------------------------- */
     onLoad() {
         this._initData();
@@ -88,16 +119,20 @@ export class RollingLottery extends Component {
         /** 当前节点 UITransform */
         let currTransform: cc.UITransform;
         /** 头节点 */
-        let headNode = this.node.children[0];
+        // let headNode = this.node.children[0];
-        /** 尾节点 */
+        // /** 尾节点 */
-        let tailNode = this.node.children[this.node.children.length - 1];
+        // let tailNode = this.node.children[this.node.children.length - 1];
-        /** 头节点矩形 */
+        // /** 头节点矩形 */
-        let headNodeRect: cc.Rect;
+        // let headNodeRect: cc.Rect;
-        /** 尾节点矩形 */
+        // /** 尾节点矩形 */
-        let tailNodeRect: cc.Rect;
+        // let tailNodeRect: cc.Rect;
+        /** 当前下标 */
+        let currIndexN: number;
 
         // 左右滚动
-        if (this.dire === RollingLotteryDirection.HORIZONTAL) {
+        if (this.dire === RollingLottery2Direction.HORIZONTAL) {
+            cc.error('未实现');
+            // ...
         }
         // 上下滚动
         else {
@@ -121,24 +156,41 @@ export class RollingLottery extends Component {
                         if (currNodeRect.yMin > this._selfRect.yMax) {
                             updatePosB = true;
                         } else {
-                            // setTimeout 防止获取节点坐标错误、防止 setSiblingIndex 后遍历错误
+                            // // setTimeout 防止获取节点坐标错误、防止 setSiblingIndex 后遍历错误
-                            setTimeout(() => {
+                            // setTimeout(() => {
-                                // 切换位置到头节点上方
+                            //     // 切换位置到头节点上方
-                                headNodeRect = this._getBoundingBoxToWorld(headNode);
+                            //     headNodeRect = this._getBoundingBoxToWorld(headNode);
+                            //     v.worldPosition = cc.v3(
+                            //         v.worldPosition.x,
+                            //         headNodeRect.yMax + currNodeRect.height * currTransform.anchorY
+                            //     );
+                            //     // 更新 item
+                            //     let indexN = Number(headNode.name) - 1;
+                            //     v.name = String(indexN);
+                            //     this.itemUpdateEvent.emit([v, indexN]);
+                            //     // 更新 item 下标
+                            //     headNode = v;
+                            //     v.setSiblingIndex(0);
+                            // }, 0);
+
+                            let tempN = this._selfRect.height + this._ItemSize.height * 2;
+                            // 超出圈数
+                            let beyondTurnsN = Math.floor((this._selfRect.yMin - currNodeRect.yMax) / tempN);
+
+                            // 超出距离
+                            let beyondDistN = (this._selfRect.yMin - currNodeRect.yMax) % tempN;
+                            cc.log(beyondDistN);
+
+                            currNodeRect.y = this._selfRect.yMax + currNodeRect.height - beyondDistN;
                             v.worldPosition = cc.v3(
                                 v.worldPosition.x,
-                                    headNodeRect.yMax + currNodeRect.height * currTransform.anchorY
+                                currNodeRect.y - currNodeRect.height * (1 - currTransform.anchorY)
                             );
 
-                                // 更新 item
+                            // // 更新 item
-                                let indexN = Number(headNode.name) - 1;
+                            // let indexN = Number(v.name) - beyondTurnsN;
-                                v.name = indexN + '';
+                            // v.name = String(indexN);
-                                this.itemUpdateEvent.emit([v, indexN]);
+                            // this.itemUpdateEvent.emit([v, indexN]);
-
-                                // 更新 item 下标
-                                headNode = v;
-                                v.setSiblingIndex(0);
-                            }, 0);
                         }
                     }
 
@@ -149,10 +201,16 @@ export class RollingLottery extends Component {
                             currNodeRect.y + currNodeRect.height * currTransform.anchorY
                         );
                     }
+
+                    // 更新当前下标
+                    currIndexN = Number(v.name);
+                    if (currIndexN < this._currIndexN && currNodeRect.intersects(this._parentCenterRect)) {
+                        this.currIndexN = currIndexN;
+                    }
                 });
             }
             // 从下往上滚动
-            else {
+            else if (distV3_.y > 0) {
                 this.node.children.forEach((v, kN) => {
                     currTransform = v.getComponent(cc.UITransform);
                     updatePosB = false;
@@ -171,24 +229,39 @@ export class RollingLottery extends Component {
                         if (this._selfRect.yMin > currNodeRect.yMax) {
                             updatePosB = true;
                         } else {
-                            // setTimeout 防止获取节点坐标错误、防止 setSiblingIndex 后遍历错误
+                            // // setTimeout 防止获取节点坐标错误、防止 setSiblingIndex 后遍历错误
-                            setTimeout(() => {
+                            // setTimeout(() => {
-                                // 切换位置到尾节点下方
+                            //     // 切换位置到尾节点下方
-                                tailNodeRect = this._getBoundingBoxToWorld(tailNode);
+                            //     tailNodeRect = this._getBoundingBoxToWorld(tailNode);
+                            //     v.worldPosition = cc.v3(
+                            //         v.worldPosition.x,
+                            //         tailNodeRect.yMin - currNodeRect.height * (1 - currTransform.anchorY)
+                            //     );
+                            //     // 更新 item
+                            //     let indexN = Number(tailNode.name) + 1;
+                            //     v.name = String(indexN);
+                            //     this.itemUpdateEvent.emit([v, indexN]);
+                            //     // 更新 item 下标
+                            //     tailNode = v;
+                            //     v.setSiblingIndex(this.node.children.length - 1);
+                            // }, 0);
+
+                            // 超出圈数
+                            let beyondTurnsN = Math.floor(
+                                (this._selfRect.yMin - currNodeRect.yMax) / this._selfRect.height
+                            );
+
+                            // 超出距离
+                            let beyondDistN = (currNodeRect.yMin - this._selfRect.yMax) % this._selfRect.height;
                             v.worldPosition = cc.v3(
                                 v.worldPosition.x,
-                                    tailNodeRect.yMin - currNodeRect.height * (1 - currTransform.anchorY)
+                                this._selfRect.yMin + beyondDistN + currNodeRect.height * currTransform.anchorY
                             );
 
                             // 更新 item
-                                let indexN = Number(tailNode.name) + 1;
+                            let indexN = Number(v.name) + beyondTurnsN;
-                                v.name = indexN + '';
+                            v.name = String(indexN);
                             this.itemUpdateEvent.emit([v, indexN]);
-
-                                // 更新 item 下标
-                                tailNode = v;
-                                v.setSiblingIndex(this.node.children.length - 1);
-                            }, 0);
                         }
                     }
 
@@ -199,6 +272,12 @@ export class RollingLottery extends Component {
                             currNodeRect.y + currNodeRect.height * currTransform.anchorY
                         );
                     }
+
+                    // 更新当前下标
+                    currIndexN = Number(v.name);
+                    if (currIndexN > this._currIndexN && currNodeRect.intersects(this._parentCenterRect)) {
+                        this.currIndexN = currIndexN;
+                    }
                 });
             }
         }
@@ -207,23 +286,62 @@ export class RollingLottery extends Component {
     /** 更新运动距离 */
     private _updateMoveDist(indexN_: number): void {
         /** 当前节点 */
-        let currNode = this.node.getChildByName(this._currIndexN + '');
+        let currNode = this.node.getChildByName(String(this._currIndexN));
         /** 间隔格子 */
         let intervalN = indexN_ - this._currIndexN;
         /** 格子距离 */
-        let boxDistN = this.dire === RollingLotteryDirection.HORIZONTAL ? this._ItemSize.width : this._ItemSize.height;
+        let boxDistN = this.dire === RollingLottery2Direction.HORIZONTAL ? this._ItemSize.width : this._ItemSize.height;
         /** 当前格子距父节点(0, 0)的偏移坐标 */
         let offsetDistV3 = this.node.worldPosition.clone().subtract(currNode.worldPosition);
         // 设置总距离
-        if (this.dire === RollingLotteryDirection.HORIZONTAL) {
+        if (this.dire === RollingLottery2Direction.HORIZONTAL) {
             this._totalDistV3 = cc.v3(intervalN * boxDistN + offsetDistV3.x);
         } else {
             this._totalDistV3 = cc.v3(0, intervalN * boxDistN + offsetDistV3.y);
+            cc.log('目标距离', this._currIndexN, offsetDistV3.y, this._totalDistV3.y);
         }
+        // // eslint-disable-next-line autofix/no-debugger
+        // debugger;
+        this._currDistV3 = cc.v3();
+    }
+
+    /** 初始化数据 */
+    private _initData(): void {
+        this.curveComp = this.node.getComponent(BezierCurveAnimation);
+        this._uiTransform = this.node.getComponent(cc.UITransform);
+
+        // 设置更新事件
+        let updateEvent = new cc.EventHandler();
+        updateEvent.component = cc.js.getClassName(this);
+        updateEvent.handler = '_eventUpdate';
+        updateEvent.target = this.node;
+        this.curveComp.updateEventAS.push(updateEvent);
+
+        // 设置结束事件
+        let endEvent = new cc.EventHandler();
+        endEvent.component = cc.js.getClassName(this);
+        endEvent.handler = '_eventEnd';
+        endEvent.target = this.node;
+        this.curveComp.endEventAS.push(endEvent);
+
+        this._updateData();
     }
 
     /** 更新数据 */
     private _updateData(): void {
+        this._ItemSize = this.node.children[0].getComponent(cc.UITransform).contentSize.clone();
+
+        // item 大小矩形，中心点在节点 (0, 0) 位置
+        this._parentCenterRect = cc.rect(
+            this.node.worldPosition.x - this._ItemSize.width * 0.5,
+            this.node.worldPosition.y - this._ItemSize.height * 0.5,
+            this._ItemSize.width,
+            this._ItemSize.height
+        );
+
+        // 自己矩形
+        this._selfRect = this._getBoundingBoxToWorld(this.node);
+
         // 单圈长度
         this._perimeterV3.set(cc.Vec3.ZERO);
         let size: cc.Size;
@@ -233,42 +351,32 @@ export class RollingLottery extends Component {
         });
     }
 
-    /** 初始化数据 */
-    private _initData(): void {
-        this._curveComp = this.node.getComponent(BezierCurveAnimation);
-        this._uiTransform = this.node.getComponent(cc.UITransform);
-        this._ItemSize = this.node.children[0].getComponent(cc.UITransform).contentSize.clone();
-
-        // 自己矩形
-        this._selfRect = this._getBoundingBoxToWorld(this.node);
-
-        // 设置更新事件
-        this._curveComp.updateEvent.component = cc.js.getClassName(this);
-        this._curveComp.updateEvent.handler = 'updateEvent';
-        this._curveComp.updateEvent.target = this.node;
-
-        // 设置结束事件
-        this._curveComp.endEvent.component = cc.js.getClassName(this);
-        this._curveComp.endEvent.handler = 'endEvent';
-        this._curveComp.endEvent.target = this.node;
-
-        this._updateData();
-    }
-
     /** 初始化视图 */
     private _initView(): void {
+        this.node.getComponent(cc.Layout).enabled = false;
+
+        // 初始化子节点及选中
+        if (this.node.children.length) {
             // 重置子节点
             this.node.children.forEach((v, kN) => {
-            v.name = kN + this._currIndexN + '';
+                v.name = String(kN + this._currIndexN);
                 this.itemUpdateEvent.emit([v, kN + this._currIndexN]);
             });
 
             this.jump(this._currIndexN);
         }
+    }
 
     /** 初始化事件 */
     private _initEvent(): void {
-        this.node.on(cc.Node.EventType.SIBLING_ORDER_CHANGED, this._nodeSiblingOrderChanged, this);
+        this.node.on(cc.Node.EventType.CHILD_ADDED, this._nodeChildAdded, this);
+        this.node.on(cc.Node.EventType.CHILD_REMOVED, this._nodeChildRemoved, this);
+    }
+
+    /** 重置 */
+    reset(): void {
+        this._updateData();
+        this._initView();
     }
 
     /**
@@ -293,7 +401,10 @@ export class RollingLottery extends Component {
                     },
                     {
                         onUpdate: (target?: any, ratioN?: number) => {
-                            if (this.dire === RollingLotteryDirection.HORIZONTAL) {
+                            if (!this.isValid) {
+                                return;
+                            }
+                            if (this.dire === RollingLottery2Direction.HORIZONTAL) {
                                 distV3.x = (target.valueN - target.lastValueN) * speedN_;
                             } else {
                                 distV3.y = (target.valueN - target.lastValueN) * speedN_;
@@ -316,26 +427,43 @@ export class RollingLottery extends Component {
 
     /** 跳转到指定下标 */
     jump(indexN_: number): void {
-        if (this._scrollB) {
+        if (this._scrollB && !this._loopScrollB) {
+            return;
+        }
+        if (this.currIndexN === indexN_) {
             return;
         }
         this._scrollB = true;
+        this._jumpB = true;
+
+        // 停止循环滚动
+        if (this._loopScrollB) {
+            this._loopTween.stop();
+            this._loopTween = null;
+            this._loopScrollB = false;
+        }
 
         // 更新移动距离
         this._updateMoveDist(indexN_);
         // 开始滚动
         this._scrollChild(this._totalDistV3);
         // 更新状态
-        this._currIndexN = indexN_;
+        this.currIndexN = indexN_;
         this._scrollB = false;
+        this._jumpB = false;
     }
 
     /** 滚动到指定下标 */
-    scroll(indexN_: number): void {
+    scroll(indexN_: number, scrollConfig_?: RollingLottery2ScrollConfig): void {
         if (this._scrollB && !this._loopScrollB) {
             return;
         }
+        if (this.currIndexN === indexN_) {
+            return;
+        }
+        cc.log('目标', indexN_);
         this._scrollB = true;
+        this._scrollConfig = new RollingLottery2ScrollConfig(scrollConfig_);
 
         // 停止循环滚动
         if (this._loopScrollB) {
@@ -349,32 +477,55 @@ export class RollingLottery extends Component {
         // 更新移动距离
         this._updateMoveDist(indexN_);
         // 开始滚动
-        this._currTweenN = 0;
+        this._currTweenN = this._scrollConfig.tweenIndexN;
-        this._curveComp.startTween(this._currTweenN);
+        this.curveComp.startTween(this._currTweenN);
     }
+    private _currDistV3: cc.Vec3;
     /* ------------------------------- 自定义事件 ------------------------------- */
-    updateEvent(yN_: number, indexN_: number, y2N_: number): void {
+    private _eventUpdate(yN_: number, indexN_: number, y2N_: number): void {
-        if (this.dire === RollingLotteryDirection.HORIZONTAL) {
+        if (this.dire === RollingLottery2Direction.HORIZONTAL) {
+            cc.error('未实现');
+            // ...
         } else {
+            this._currDistV3.add(cc.v3(0, (yN_ - this._lastCurveYN) * this._totalDistV3.y));
             this._scrollChild(cc.v3(0, (yN_ - this._lastCurveYN) * this._totalDistV3.y));
         }
         this._lastCurveYN = yN_;
-        if (yN_ === undefined) {
-            debugger;
-        }
         // cc.log('缓动更新', yN_, indexN_, y2N_, yN_ - this._lastCurveYN);
     }
 
-    endEvent(): void {
+    private _eventEnd(): void {
         this._scrollB = false;
+        this.currIndexN = this._currTargetN;
+
+        cc.log('滚动结束', this._currDistV3.y, this._totalDistV3.y);
+
         // 继续缓动
-        this._currTweenN++;
+        if (this._scrollConfig.nextPlayB && ++this._currTweenN < this.curveComp.tweenUnitAS.length) {
-        if (this._currTweenN < this._curveComp.tweenUnitAs.length) {
+            this.curveComp.startTween(this._currTweenN);
-            this._curveComp.startTween(this._currTweenN);
+        } else {
+            this.scrollEndEvent.emit([]);
+            this._scrollConfig.endCBF?.();
         }
     }
     /* ------------------------------- 节点事件 ------------------------------- */
-    private _nodeSiblingOrderChanged(): void {
+    private _nodeChildAdded(): void {
-        this._updateData();
+        this.reset();
+    }
+    private _nodeChildRemoved(): void {
+        this.reset();
     }
 }
+
+/** 滚动配置 */
+class RollingLottery2ScrollConfig {
+    constructor(init_?: RollingLottery2ScrollConfig) {
+        Object.assign(this, init_);
+    }
+    /** 指定缓动单元下标 */
+    tweenIndexN? = 0;
+    /** 继续下个缓动单元播放 */
+    nextPlayB? = false;
+    /** 结束回调 */
+    endCBF?: () => void;
+}

assets/main.scene

@@ -140,6 +140,9 @@
     ],
     "_active": true,
     "_components": [
+      {
+        "__id__": 54
+      },
       {
         "__id__": 55
       },
@@ -419,7 +422,7 @@
     "_active": true,
     "_components": [
       {
-        "__id__": 54
+        "__id__": 53
       }
     ],
     "_prefab": null,
@@ -622,7 +625,7 @@
         "__id__": 47
       },
       {
-        "__id__": 52
+        "__id__": 49
       }
     ],
     "_prefab": null,
@@ -1714,81 +1717,22 @@
     },
     "_enabled": true,
     "__prefab": null,
-    "tweenUnitAs": [
+    "tweenUnitAS": [
       {
         "__id__": 48
       }
     ],
-    "tweenSwitchEvent": {
+    "tweenSwitchEventAS": [],
-      "__id__": 49
+    "updateEventAS": [],
-    },
+    "endEventAS": [],
-    "updateEvent": {
-      "__id__": 50
-    },
-    "endEvent": {
-      "__id__": 51
-    },
     "_id": "81NhY/uUlE+bEhuJuC4gc1"
   },
   {
     "__type__": "BezierCurveAnimationTweenUnit",
     "customCurveB": false,
     "easing": 6,
-    "controlPointV3S": [
+    "controlPointV3S": [],
-      {
+    "timeSN": 1
-        "__type__": "cc.Vec3",
-        "x": 0,
-        "y": 0,
-        "z": 0
-      },
-      {
-        "__type__": "cc.Vec3",
-        "x": 0.086,
-        "y": 0.78,
-        "z": 0
-      },
-      {
-        "__type__": "cc.Vec3",
-        "x": 0.44,
-        "y": 0.916,
-        "z": 0
-      },
-      {
-        "__type__": "cc.Vec3",
-        "x": 1,
-        "y": 1.003,
-        "z": 0
-      }
-    ],
-    "timeSN": 5
-  },
-  {
-    "__type__": "cc.ClickEvent",
-    "target": null,
-    "component": "",
-    "_componentId": "b1f62Y9bmdIM5sNvTecZgMd",
-    "handler": "tweenSwitchEvent",
-    "customEventData": ""
-  },
-  {
-    "__type__": "cc.ClickEvent",
-    "target": {
-      "__id__": 16
-    },
-    "component": "RollingLottery",
-    "_componentId": "",
-    "handler": "updateEvent",
-    "customEventData": ""
-  },
-  {
-    "__type__": "cc.ClickEvent",
-    "target": {
-      "__id__": 16
-    },
-    "component": "RollingLottery",
-    "_componentId": "",
-    "handler": "endEvent",
-    "customEventData": ""
   },
   {
     "__type__": "b1f62Y9bmdIM5sNvTecZgMd",
@@ -1801,18 +1745,40 @@
     "__prefab": null,
     "dire": 0,
     "itemUpdateEvent": {
-      "__id__": 53
+      "__id__": 50
+    },
+    "centerNodeEvent": {
+      "__id__": 51
+    },
+    "scrollEndEvent": {
+      "__id__": 52
     },
     "_id": "6d+rTEEL9OZoMInU6l+PWp"
   },
   {
     "__type__": "cc.ClickEvent",
     "target": {
-      "__id__": 16
+      "__id__": 4
     },
     "component": "",
-    "_componentId": "b1f62Y9bmdIM5sNvTecZgMd",
+    "_componentId": "c6550RvRXBJCp7yhDZhJZ5N",
-    "handler": "childUpdate",
+    "handler": "eventItemUpdate",
+    "customEventData": ""
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": null,
+    "component": "",
+    "_componentId": "",
+    "handler": "",
+    "customEventData": ""
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": null,
+    "component": "",
+    "_componentId": "",
+    "handler": "",
     "customEventData": ""
   },
   {
@@ -1901,6 +1867,17 @@
     "_lockFlags": 0,
     "_id": "86y8GUj85EoaxJ3AmNeIZk"
   },
+  {
+    "__type__": "c6550RvRXBJCp7yhDZhJZ5N",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 4
+    },
+    "_enabled": true,
+    "__prefab": null,
+    "_id": "30wjiGi11PK6zFwTt8v3LO"
+  },
   {
     "__type__": "cc.Node",
     "_name": "SpriteSplash-001",

assets/main.ts

@@ -0,0 +1,17 @@
+import { _decorator, Component, Node } from 'cc';
+import * as cc from 'cc';
+import { RollingLottery2 } from './RollingLottery';
+const { ccclass, property } = _decorator;
+
+@ccclass('main')
+export class main extends Component {
+    /* ------------------------------- segmentation ------------------------------- */
+    start() {
+        let comp = this.node.getComponentInChildren(RollingLottery2);
+        comp.jump(-180);
+    }
+    /* ------------------------------- segmentation ------------------------------- */
+    eventItemUpdate(node_: cc.Node, indexN_: number): void {
+        node_.getComponentInChildren(cc.Label).string = indexN_ + '';
+    }
+}

assets/main.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.22",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "c655046f-4570-490a-9ef2-843661259e4d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}