【cocoscreator】列表UI显示特效

// Learn cc.Class:
//  - https://docs.cocos.com/creator/manual/en/scripting/class.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },
        showType: 1,
        MaxShowType: 1,
        Label: cc.Label,
        ScrollView: cc.ScrollView,
        content: cc.Node,
        item: cc.Node,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad() {
    },
    start() {
        this.show();
    },

    show() {
        var str = "show" + this.showType;
        this[str]();
    },

    last() {
        this.showType--;
        if (this.showType <= 0) {
            this.showType = this.MaxShowType;
        }
        this.show();
    },

    next() {
        this.showType++;
        if (this.showType > this.MaxShowType) {
            this.showType = 1;
        }
        this.show();
    },


    Test() {
        cc.tween(this.ScrollView.node)
            .to(1, { scale: 2, position: cc.v3(100, 100, 100) })
            .call(() => { console.log('This is a callback'); })
            .by(1, { scale: 3, position: cc.v3(200, 200, 200) }, { easing: 'sineOutIn' })
            .start();
    },

    show1() {
        this.ScrollView.node.scaleX = 0;
        this.ScrollView.node.anchorX = 0;
        this.content.anchorX = 0;
        this.content.parent.anchorX = 0;
        this.content.parent.x = 0;
        this.content.x = 0;
        this.content.removeAllChildren();
        var index = 0;
        this.scheduleOnce(() => {
            this.schedule(() => {
                var node = cc.instantiate(this.item);
                node.anchorX = 0;
                node.anchorY = 1;
                node.scaleY = 0;
                node.parent = this.content;
                node.x = 20;
                cc.tween(node)
                    .to(0.3, { scaleY: 1 })
                    .start();
                index++;
            }, 0.3, 5);
        }, 0.7);
        cc.tween(this.ScrollView.node)
            .to(1, { scaleX: 1 })
            .start();
    },

    show2() {
        this.ScrollView.node.scaleX = 0;
        this.ScrollView.node.anchorX = 0;
        this.content.anchorX = 0;
        this.content.parent.anchorX = 0;
        this.content.parent.x = 0;
        this.content.x = 0;
        this.content.removeAllChildren();
        this.scheduleOnce(() => {
            for (var i = 0; i < 5; i++) {
                var node = cc.instantiate(this.item);
                node.anchorX = 0;
                node.anchorY = 1;
                node.scaleY = 0;
                node.parent = this.content;
                node.x = 20;
                cc.tween(node)
                    .to(0.5, { scaleY: 1 })
                    .start();
            }
        }, 1);
        cc.tween(this.ScrollView.node)
            .to(1, { scaleX: 1 })
            .start();
    },

    show3() {
        this.ScrollView.node.anchorX = 0;
        this.content.anchorX = 0;
        this.content.parent.anchorX = 0;
        this.content.parent.x = 0;
        this.content.x = 0;
        this.content.removeAllChildren();
        for (var i = 0; i < 5; i++) {
            var node = cc.instantiate(this.item);
            node.anchorX = 0;
            node.anchorY = 1;
            node.scaleY = 0;
            node.parent = this.content;
            node.x = 20;
            cc.tween(node)
                .to(0.5, { scaleY: 1 })
                .start();
        }
        this.scheduleOnce(() => {
            var children = this.content.children;
            for (var i = 0; i < children.length; i++) {
                var node = cc.instantiate(this.item);
                node.anchorX = 0;
                node.anchorY = 1;
                node.scaleY = 0;
                node.parent = this.content;
                node.x = 20;
                cc.tween(node)
                    .to(0.5, { blink: 1 })
                    .start();
            }
        }, 0.2);
    },
    // update (dt) {},
});