cocos creator从零开发简单框架(15)-Panel缩放显示

目前Panel的打开和关闭是直接显示和隐藏节点，本章添加一个打开时从中间放大，关闭时从中间缩小的效果。

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

public duration: number = 0.2
public easingShow: any //打开时的缓动效果
public easingHide: any //关闭时的缓动效果

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

/** 中间变大 */
private static showCenterScale(go: PanelBase, isOpen: boolean) {
    this.showPanelBefore(go, isOpen)

    if (isOpen) {
        go.skin.scale = 0
        go.skin.active = true
        cc.tween(go.skin).to(go.duration, { scale: 1 }, go.easingShow).call(() => {
            go.showed()
            this.showPanelAfter(go, isOpen)
        }).start()
    } else {
        cc.tween(go.skin).to(go.duration, { scale: 0 }, go.easingHide).call(() => {
            this.destroy(go.panelName)
            this.showPanelAfter(go, isOpen)
        }).start()
    }
}

修改startShowPanel方法。

case AppConstants.panelShowStyle.Normal:
    this.showNormal(go, isOpen)
    break
case AppConstants.panelShowStyle.CenterSmallToBig:
    this.showCenterScale(go, isOpen)
    break

编辑scripts/PanelYellow.ts，增加panelShowStyle属性。

public panelMaskStyle: number = AppConstants.panelMaskStyle.Close | AppConstants.panelMaskStyle.Black //关闭组件(点击面板区域外会关闭面板)加半透明组件
public panelShowStyle: number = AppConstants.panelShowStyle.CenterSmallToBig

运行程序，点击黄面板按钮，发现黄色面板从中间慢慢变大显示了，再点击关闭面板，又从中间慢慢缩小隐藏了。