Creator无限滚动中间放大控件

如下图所示：

把脚本拖动到节点上，再在节点下增加item就可以了

源码：

cc.Class({
    extends: cc.Component,

    properties: {
        items: {
            default: [],
            type: [cc.Node],
            visible: false,
        },
        itemSize: cc.size(100, 100),
        itemStep: {
            default: 150,
            displayName: "间距",
        },
        selectIndex: {
            default: 0,
            visible: false,
        },
        resetMoveSpeed: {
            default: 100,
            displayName: "回复速度",
        },
    },

    onLoad: function () {
        this._initItems();
        this._initSender();
        this._initEvent();
    },

    onDestroy: function () {
        this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchBegan, this);
        this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.off(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
        this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancelled, this);
    },

    _initItems: function () {
        this.items = this.node.children;

        this.selectIndex = Math.floor(this.items.length * 0.5);
        this.arr = [];
        for (var i in this.items) {
            var item = this.items[i];
            item.setContentSize(this.itemSize);
            item.x = this.itemStep * (i - this.selectIndex);

            this._flashScaleAndOrder(item);
        }
    },

    _initSender: function () {
        this.isTouchMove = false;
        this.isWaitReset = false;
        this.halfCount = this.items.length * 0.5;
    },

    _initEvent: function () {
        this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchBegan, this);
        this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMoved, this);
        this.node.on(cc.Node.EventType.TOUCH_END, this._onTouchEnded, this);
        this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancelled, this);
    },

    _onTouchBegan: function (event) {
        this.isTouchMove = true;
        this.isWaitReset = false;
        return true;
    },

    _onTouchMoved: function (event) {
        this.itemsMove(event.getDeltaX());
    },

    _onTouchEnded: function (event) {
        this._resetMoveState();
    },

    _onTouchCancelled: function (event) {
        this._resetMoveState();
    },

    _resetMoveState: function () {
        this.isTouchMove = false;
        this.isWaitReset = true;
    },

    itemsMove: function (ds) {
        for (var i in this.items) {
            var item = this.items[i];
            item.x += ds;
        }
    },

    _flashScaleAndOrder: function (item) {
        item.setLocalZOrder(this.items.length * this.itemStep - Math.abs(item.x));
        item.scale = 1 - Math.abs(item.x) / this.itemStep * 0.2;
    },

    _updateItems: function (dt) {

        for (var i in this.items) {
            var item = this.items[i];
            var halfStep = this.itemStep * 0.5;
            if (item.x > -halfStep && item.x < halfStep) {
                this.selectIndex = i;
            }

            //超过处理
            if (item.x < -this.halfCount * this.itemStep)
                item.x += this.itemStep * (this.items.length);
            if (item.x > this.halfCount * this.itemStep)
                item.x -= this.itemStep * (this.items.length);

            this._flashScaleAndOrder(item);
        }

        //回弹
        var resetMoveSpeed = this.resetMoveSpeed * dt;
        if (this.isWaitReset && !this.isTouchMove) {
            if (this.items[this.selectIndex].x == 0) {
                this.isWaitReset = false;
                return;
            }

            var ds = this.items[this.selectIndex].x;
            var moveSpeed = 0;
            if (Math.abs(ds) >= resetMoveSpeed)
                moveSpeed = ds > 0 ? -resetMoveSpeed : resetMoveSpeed;
            else
                moveSpeed = -ds;

            this.itemsMove(moveSpeed);
        }
    },

    update: function (dt) {
        if (this.isWaitReset || this.isTouchMove)
            this._updateItems(dt);
    },
});