cocos creator从零开发简单框架(17)-Panel自定义显示

虽然框架已经提供了几种显示方式，但对程序来讲是远远不够的，所以要有自定义显示方式。

编辑framework/scripts/view/PanelBase.ts，增加tweenShow和tweenHide两个成员。

public easingHide: any //关闭时的缓动效果
public tweenShow: cc.Tween //自定义打开动画
public tweenHide: cc.Tween //自定义关闭动画

编辑framework/scripts/view/PanelMgr.ts，增加showCustom方法。

/** 自定义 */
private static showCustom(go: PanelBase, isOpen: boolean) {
    this.showPanelBefore(go, isOpen)

    if (isOpen) {
        go.skin.active = true
        go.tweenShow.call(() => {
            go.showed()
            this.showPanelAfter(go, isOpen)
        }).start()
    } else {
        go.tweenHide.call(() => {
            this.destroy(go.panelName)
            this.showPanelAfter(go, isOpen)
        }).start()
    }
}

修改startShowPanel方法。

case AppConstants.panelShowStyle.DownToCenter:
    this.showSideToCenter(go, cc.v3(0, -cc.winSize.height, 0), isOpen)
    break
case AppConstants.panelShowStyle.Custom:
    if (isOpen && !go.tweenShow) {
        this.showNormal(go, isOpen)
    } else if (!isOpen && !go.tweenHide) {
        this.showNormal(go, isOpen)
    } else {
        this.showCustom(go, isOpen)
    }
    break

编辑scripts/PanelYellow.ts，修改panelShowStyle属性和增加onInitDone方法。

public panelMaskStyle: number = AppConstants.panelMaskStyle.Close | AppConstants.panelMaskStyle.Black //关闭组件(点击面板区域外会关闭面板)加半透明组件
public panelShowStyle: number = AppConstants.panelShowStyle.Custom //自定义显示方式


protected onInitDone(): void {
    this.skin.scale = 0

    this.tweenShow = cc.tween(this.skin).to(this.duration, { scale: 1, angle: 360 * 5 })
    this.tweenHide = cc.tween(this.skin).to(this.duration, { scale: 0, angle: 0 })
}

运行程序，点击黄面板按钮，发现黄色面板打开时同时有旋转和缩放两个动画了。