Cocos makes Scrollview to realize the effect of zooming in the middle and zooming out on both sides

The effect is as follows ：

1. To make a prefab, Then generate 10 Join to an empty node , Considering that if the number of levels generated is large , load prefab There must be a Caton effect when , So I found a method similar to frame loading on the Internet , Every prefab The position calculation can calculate the arrangement by itself , The code is as follows ：

_initData(){
	 // establish item
        let cb = (i) => {
            this._initItemPrefab(i)
        };
        this._loadPrefabFrame('item', 2, this._itemLength, cb);
 }

 _loadPrefabFrame(name, limit, max, cb) {
        let count = 0;
        this[name] = () => {
            if (count < max) {
                for (let i = 0; i < limit; i++) {
                    count++;
                    cb && cb(count);
                    // Turn off animation 
                    if (count === max - 1) {
                        
                    }
                }
            }
        };
        this.schedule(this[name], 1 / 60, (max - 1) / limit, 0);
    }

  private _initItemPrefab(index: number) {
        let node = LevelModel.inst.createLevelUnitNode();
        let unit: HomeLevelUnit = node.getComponent("HomeLevelUnit");
        unit.ID = index;
        unit.setData();
        this.itemList.push(unit);
        this.levelContent.addChild(node);
    }

2. Load this prefab The parent node of joins the click event

_touchEvent(){
        this.levelContent.on('touchstart', function (event) {
            this._moveSpeed = 0;
            this._startTime = new Date().getTime();
        }.bind(this));
        
        this.levelContent.on('touchmove', function (event) {
            var movePos = event.getDelta();
            this.itemMoveBy(movePos);
        }.bind(this));
        
        this.levelContent.on('touchend', function (event) {
            this.touchEnd(event)
        }.bind(this));
        
        this.levelContent.on('touchcancel', function (event) {
            this.touchEnd(event)
        }.bind(this));
    }

3. Listen and handle events

touchEnd(event) {
        var curpos = event.getLocation();
        var startpos = event.getStartLocation();
        var dis = startpos.x - curpos.x;
        var curTime = new Date().getTime();
        var disTime = curTime - this._startTime;
        this._moveSpeed = dis / disTime;
        this.fixedPosition = true;
    }

    itemMoveBy(pos) {
        if(this.itemList[0].node.x > 0 && pos.x>0){
            return;
        }
        if(this.itemList[this.itemList.length-1].node.x < 0 && pos.x<0){
            return;
        }
        for (let i = 0; i < this.itemList.length; i++) {
            this.itemList[i].node.active = true;
            this.itemList[i].node.x += pos.x;
        }
        this.updateScale();
    }

    updateScale() {
        if (this.scaleMax < this.scaleMin || this.scaleMax == 0) {
            return;
        }
        for (let i = 0; i < this.itemList.length; i++) {
            var pre;
            var x = this.itemList[i].node.x + this._maxSize.width / 2;
            if (this.itemList[i].node.x < 0) {
                pre = x / this._maxSize.width;
            }
            else {
                pre = 1 - x / this._maxSize.width;
            }
           
            pre *= 2;
            var scaleTo = this.scaleMax - this.scaleMin;
            scaleTo *= pre;
            scaleTo += this.scaleMin;
            scaleTo = Math.abs(scaleTo);
            this.itemList[i].node.scaleX = scaleTo;
            this.itemList[i].node.scaleY = scaleTo;
            if(this.itemList[i].node.scaleX < 0.8){
                this.itemList[i].node.active = false;
            }else if(this.itemList[i].node.scaleX >=0.95 && this.itemList[i].node.scaleX<=1){
                this.itemList[i].node.zIndex = 100;
            }else{
                this.itemList[i].node.zIndex = 0;
            }

        }
    }

    update(dt) {
        if(!this.fixedPosition){
            return;
        }
        if (this._moveSpeed == 0 && this.fixedPosition){
            this.fixedPosition = false;
            let _maxIndex = 0;
            let _maxScale = 0;
            for (let i = 0; i < this.itemList.length; i++) {
                if(this.itemList[i].node.scaleX > _maxScale){
                    _maxScale = this.itemList[i].node.scaleX;
                    _maxIndex = i;
                }
            }
            for (let i = 0; i < this.itemList.length; i++) {
                this.itemList[i].node.x = 168 * (i - _maxIndex);
                if(i == _maxIndex){
                    this.itemList[_maxIndex].node.scaleX = 1;
                    this.itemList[_maxIndex].node.zIndex = 100;
                }else{
                    this.itemList[i].node.scaleX = 0.8;
                    this.itemList[i].node.zIndex = 0;
                }
            }
        };
        if(this.itemList[0].node.x > 0){
            return;
        }
        if(this.itemList[this.itemList.length-1].node.x < 0){
            return;
        }
        for (let i = 0; i < this.itemList.length; i++) {
                this.itemList[i].node.x -= this._moveSpeed * dt * this.speed;
        }
        if (this._moveSpeed > 0) {
            this._moveSpeed -= dt * this.rub;
            if (this._moveSpeed < 0) {
                this._moveSpeed = 0;
            }
        } else {
            this._moveSpeed += dt * this.rub;
            if (this._moveSpeed > 0) {
                this._moveSpeed = 0;
            }
        }
        var moveTo = -this._moveSpeed * dt * this.speed;
        this.itemMoveBy(cc.v2(moveTo, moveTo))
    }

4. explain
Last in update The main processing in is to let him have a smooth deceleration to stop process , Make him look less stiff .

（ Of course, when doing this, you don't need to generate so many at once prafab Of , I thought for a moment about 5 Just one , Then do the fake infinite loop effect , This should be the best , I'll change it later , Code has reference to others' code , It's a little messy. I'll sort it out later ）

** Be careful ： I'll give it directly here node Of x assignment , In fact, this is wrong , It is better not to assign the location information directly , To pass the setPosition Go set , Otherwise, the matrix will not be updated , Typically, this node has child nodes , If you assign directly , Child nodes will not follow the change of location