cocos creator从零开发简单框架(16)-Panel位移显示
4 / 0 / 创建于 1个月前
mirahs 的个人博客
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()运行程序，点击黄面板按钮，发现打开和关闭不是硬生生地移动效果了。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：