cocos creator从零开发简单框架(09)-UI渐入渐出

UI打开和退出目前是直接显示和隐藏，给它加个渐入渐出的效果。

编辑framework/scripts/AppConstants.ts，添加UI显示方式。

// UI 显示方式
public static readonly uiShowStyle = {
    // 默认
    Normal: 1,
    // 渐入
    FadeIn: 2,
}

编辑framework/scripts/view/UIBase.ts，定义UI显示方式和过度时间。

public uiName: string
public uiShowStyle: number = AppConstants.uiShowStyle.Normal
public duration: number = 0.5

编辑framework/scripts/view/UIMgr.ts，修改hideLast方法。

private static hideLast(duration?: number) {
    const last = this._current
    if (!last) return

    this._current = null
    last.hiding()

    if (!duration) {
        this.hideUI(last)
    } else {
        cc.tween(last.skin).
            to(duration, { opacity: 0 }).
            call(() => this.hideUI(last)).
            start()
    }
}

添加showNormal和showFadeIn方法。

//#region 显示方式
/** 默认 */
private static showNormal(go: UIBase) {
    go.skin.opacity = 255
    go.skin.active = true

    go.showed()

    this.hideLast()
    this.showUIAfter(go)
}

/** 渐入 */
private static showFadeIn(go: UIBase) {
    go.skin.opacity = 0
    go.skin.active = true

    cc.tween(go.skin).
    to(go.duration, { opacity: 255 }).
    call(() => {
        go.showed()

        this.showUIAfter(go)
    }).
    start()

    this.hideLast(go.duration)
}
//#endregion

修改startShowUI方法。

private static startShowUI(go: UIBase) {
    go.showing()
    // 挂载 Widget 组件, 保持跟 Canvas 一样大小
    AppUtil.setWidget(go.skin)
    // 添加对象到 UI层级
    LayerMgr.setLayer(go.skin, AppConstants.viewLayer.UI)

    if (go.uiShowStyle == AppConstants.uiShowStyle.Normal || !this._current || go.duration <= 0) {
        this.showNormal(go)
        return
    }

    switch (go.uiShowStyle) {
        case AppConstants.uiShowStyle.FadeIn:
            this.showFadeIn(go)
            break
    }
}

编辑scripts/UIBag.ts，定义显示方式为渐入渐出。

public skinPath: string = 'UIBag'
public uiShowStyle: number = AppConstants.uiShowStyle.FadeIn

运行程序，从UIMain界面切换到UIBag界面有渐入渐出的效果了。

本作品采用《CC 协议》，转载必须注明作者和本文链接

mirahs

219 声望

暂无个人描述~

0 人点赞

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

cocos creator从零开发简单框架(09)-UI渐入渐出

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

cocos creator从零开发简单框架(09)-UI渐入渐出

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录