cocos creator从零开发简单框架(15)-Panel缩放显示
5 / 0 / 创建于 1个月前
mirahs 的个人博客
目前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运行程序，点击黄面板按钮，发现黄色面板从中间慢慢变大显示了，再点击关闭面板，又从中间慢慢缩小隐藏了。
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：