cocos creator从零开发简单框架(16)-Panel位移显示

Panel的位移显示包括从 上、下、左、右 到中间的移动，因为只有初始点位置不一样，这里抽成一个方法。

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

/** 从四边移动到中间 */
private static showSideToCenter(go: PanelBase, from: cc.Vec3, isOpen: boolean) {
    this.showPanelBefore(go, isOpen)
    const to = cc.Vec3.ZERO

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

修改startShowPanel方法。

case AppConstants.panelShowStyle.CenterSmallToBig:
    this.showCenterScale(go, isOpen)
    break
case AppConstants.panelShowStyle.LeftToCenter:
    this.showSideToCenter(go, cc.v3(-cc.winSize.width, 0, 0), isOpen)
    break
case AppConstants.panelShowStyle.RightToCenter:
    this.showSideToCenter(go, cc.v3(cc.winSize.width, 0, 0), isOpen)
    break
case AppConstants.panelShowStyle.UpToCenter:
    this.showSideToCenter(go, cc.v3(0, cc.winSize.height, 0), isOpen)
    break
case AppConstants.panelShowStyle.DownToCenter:
    this.showSideToCenter(go, cc.v3(0, -cc.winSize.height, 0), isOpen)
    break

编辑scripts/PanelYellow.ts，修改panelShowStyle属性。

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

运行程序，点击黄面板按钮，发现黄色面板从底部移动到中间了，再点击关闭面板，又从中间移动到底部了。

再次编辑scripts/PanelYellow.ts，增加easingShow和easingHide属性添加缓动动画。

public panelShowStyle: number = AppConstants.panelShowStyle.DownToCenter

public easingShow: any = cc.easeBackOut()
public easingHide: any = cc.easeBackIn()

运行程序，点击黄面板按钮，发现打开和关闭不是硬生生地移动效果了。