cocos creator从零开发简单框架(17)-Panel自定义显示
1 / 0 / 创建于 2个月前
mirahs 的个人博客
虽然框架已经提供了几种显示方式，但对程序来讲是远远不够的，所以要有自定义显示方式。
编辑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 })
}运行程序，点击黄面板按钮，发现黄色面板打开时同时有旋转和缩放两个动画了。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：