creator 滑动循环展示图片 自动展示

import MyBaseView from "./MyBaseView";

const { ccclass, property } = cc._decorator;

@ccclass
export default class ScrollCard extends MyBaseView {
    @property({ tooltip: "是否自动展示" })
    Move_zidong: boolean = true;
    @property({ tooltip: "自动展示速度" })
    Speed_zidong: number = 0.05;

    @property({ tooltip: "是否纵方向" })
    Direction_isHorizontal: boolean = true;
    @property({ tooltip: "每个item的间隔" })
    itemOffset: number = 0;
    @property({ tooltip: "移动速度" })
    speed: number = 500;
    @property({ tooltip: "减速频率" })
    rub: number = 1.0;
    @property({ tooltip: "缩放最小值" })
    scaleMin: number = 1.0;
    @property({ tooltip: "缩放最大值" })
    scaleMax: number = 1.0;
    @property({ type: [cc.Node], tooltip: "滚动item" })
    item: cc.Node[] = [];
    _startTime = 0;
    _moveSpeed = 0;
    itemList = [];
    _maxSize;
    _screenRect;
    // LIFE-CYCLE CALLBACKS:

    onLoad() {
        this._initItemPos();
        this.updateScale();
    }
    public onTouchBegan(event: cc.Event.EventTouch): boolean {
        this.clickNode = null;
        if (this.getIsClickNode(this.node, event.getLocation())) {
            this.clickNode = this.node;
            this._moveSpeed = 0;
            this._startTime = new Date().getTime();
            return true;
        }
        return false;
    }
    public onTouchMoved(event: cc.Event.EventTouch): void {
        if (this.clickNode) {
            let movePos = event.getDelta();
            this.itemMoveBy(movePos);
        }
    }
    public onTouchEnd(event: cc.Event.EventTouch): void {
        if (this.clickNode) {
            this.clickNode = null;
            let curpos = event.getLocation();
            let startpos = event.getStartLocation();

            let dis;
            if (this.Direction_isHorizontal) {
                dis = startpos.x - curpos.x;

            } else {
                dis = startpos.y - curpos.y;
            }

            let curTime = new Date().getTime();
            let disTime = curTime - this._startTime;
            //v = s/t
            this._moveSpeed = dis / disTime;
        }
    }
    ontou
    _initItemPos() {
        this.node.anchorY = 0.5;
        this.node.anchorX = 0.5;
        this._maxSize = new cc.Size(0, 0);
        for (let i = 0; i < this.item.length; i++) {
            this._maxSize.width += this.item[i].width;
            this._maxSize.height += this.item[i].height;
            this._maxSize.width += this.itemOffset;
            this._maxSize.height += this.itemOffset;
        }
        let startPos;
        if (this.Direction_isHorizontal) {
            startPos = cc.v2(-this._maxSize.width * this.node.anchorX, -this._maxSize.height * this.node.anchorY);
        } else {
            startPos = cc.v2(this._maxSize.width * this.node.anchorX, this._maxSize.height * this.node.anchorY);
        }
        this._screenRect = new cc.Rect(startPos.x, startPos.y, this._maxSize.width, this._maxSize.height);
        this.itemList = [];
        for (let i = 0; i < this.item.length; i++) {
            let anchor = this.item[i].getAnchorPoint();
            let itemSize = this.item[i].getContentSize();

            if (this.Direction_isHorizontal) {
                startPos.addSelf(cc.v2(itemSize.width * anchor.x, itemSize.height * anchor.y));
                this.item[i].x = startPos.x;
                // cc.log('x:'+startPos.x);
                this.item[i].y = 0;
                startPos.addSelf(cc.v2(itemSize.width * anchor.x, itemSize.height * anchor.y));
                startPos.addSelf(cc.v2(this.itemOffset, this.itemOffset));
            } else {
                startPos.subSelf(cc.v2(itemSize.width * anchor.x, itemSize.height * anchor.y));
                this.item[i].x = 0;
                this.item[i].y = startPos.y;
                startPos.subSelf(cc.v2(itemSize.width * anchor.x, itemSize.height * anchor.y));
                startPos.subSelf(cc.v2(this.itemOffset, this.itemOffset));
            }
            this.itemList[i] = this.item[i];
        }

    }
    itemMoveBy(pos) {
        for (let i = 0; i < this.item.length; i++) {
            if (this.Direction_isHorizontal) {
                this.item[i].x += pos.x;
            } else {
                this.item[i].y += pos.y;
            }
        }
        this.updatePos();
    }
    updatePos() {

        let startItem = this.itemList[0];
        let endItem = this.itemList[this.itemList.length - 1];

        let startout = false;
        if (this.Direction_isHorizontal) {
            if (startItem.x < -this._maxSize.width / 2) {
                startout = true;
            }
        } else {
            if (startItem.y > this._maxSize.width / 2) {
                startout = true;
            }
        }

        //left
        if (startout) {
            let item = this.itemList.shift();
            this.itemList.push(item);

            if (this.Direction_isHorizontal) {
                item.x = endItem.x + endItem.width + this.itemOffset;
            } else {
                item.y = endItem.y - endItem.height - this.itemOffset;
            }
        }

        let endout = false;
        if (this.Direction_isHorizontal) {
            if (endItem.x > this._maxSize.width / 2) {
                endout = true;
            }
        } else {
            if (endItem.y < -this._maxSize.height / 2) {
                endout = true;
            }
        }

        //right
        if (endout) {
            let item = this.itemList.pop();
            this.itemList.unshift(item);

            if (this.Direction_isHorizontal) {
                item.x = startItem.x - startItem.width - this.itemOffset;
            } else {
                item.y = startItem.y + startItem.height + this.itemOffset;
            }
        }

        this.updateScale();
    }
    updateScale() {
        if (this.scaleMax < this.scaleMin || this.scaleMax == 0) {
            return;
        }
        for (let i = 0; i < this.item.length; i++) {

            let pre;
            if (this.Direction_isHorizontal) {
                let x = this.item[i].x + this._maxSize.width / 2;
                if (this.item[i].x < 0) {
                    pre = x / this._maxSize.width;
                }
                else {
                    pre = 1 - x / this._maxSize.width;
                }

            } else {
                let y = this.item[i].y + this._maxSize.height / 2;
                if (this.item[i].y < 0) {
                    pre = y / this._maxSize.height;
                }
                else {
                    pre = 1 - y / this._maxSize.height;
                }
            }
            pre *= 2;
            let scaleTo = this.scaleMax - this.scaleMin;
            scaleTo *= pre;
            scaleTo += this.scaleMin;
            scaleTo = Math.abs(scaleTo);
            this.item[i].scaleX = scaleTo;
            this.item[i].scaleY = scaleTo;
        }
    }
    update(dt) {
        if (this._moveSpeed == 0) {
            if (this.Move_zidong && !this.clickNode) {
                for (let i = 0; i < this.item.length; i++) {

                    if (this.Direction_isHorizontal) {
                        this.item[i].x -= this.Speed_zidong * dt * this.speed;
                    } else {
                        this.item[i].y -= this.Speed_zidong * dt * this.speed;
                    }
                }
                let moveTo = -this._moveSpeed * dt * this.speed;
                this.itemMoveBy(cc.v2(moveTo, moveTo))
                this.updatePos();
            }
            return;
        }
        for (let i = 0; i < this.item.length; i++) {

            if (this.Direction_isHorizontal) {
                this.item[i].x -= this._moveSpeed * dt * this.speed;
            } else {
                this.item[i].y -= 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;
            }
        }
        let moveTo = -this._moveSpeed * dt * this.speed;
        this.itemMoveBy(cc.v2(moveTo, moveTo))
        this.updatePos();
    }
}