Unity FairyGUI(十三)

本文介绍了Unity FairyGUI的弹出对话框实现、3D UI 动效控制,包括面板展示、按钮交互、PopupMenu使用及动画操作的详细步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Unity FairyGUI(十三)

一.弹出功能

public class Lesson47 : MonoBehaviour
{
    void Start()
    {
        var panel = UIManager.Instance.ShowPanel<LearnFGUI4>("Package1");
        var btn = panel.GetChild("n1").asButton;
        var go = UIPackage.CreateObject("Package1", "MyLabel");
        btn.onClick.Add(() =>
        {
            //弹出在某个组件下
            //GRoot.inst.ShowPopup(go,btn);
            //弹出在鼠标位置
            GRoot.inst.ShowPopup(go);
            //弹出在任意位置
            // GRoot.inst.ShowPopup(go);
            // go.SetXY(0,0);
            //手动隐藏弹出的Popup
            //GRoot.inst.HidePopup();
            //移除舞台回调
            go.onRemovedFromStage.Add(() =>
            {
                Debug.Log("被移出了舞台");
            });
        });
        UIConfig.popupMenu = "ui://Package1/PopupMenu";
        var menu = new PopupMenu();
        for (int i = 0; i < 10; i++)
        {
            var i1 = i;
            var b = menu.AddItem("第一条", () =>
            {
                Debug.Log(i1);
            });
            b.name = i.ToString();
        }
        panel.onTouchBegin.Add((context) =>
        {
            Debug.Log(context.inputEvent.button);
            if (context.inputEvent.button == 1)
            {
                menu.Show();
            }
        });
        //置灰
        menu.SetItemGrayed("3",true);
        menu.SetItemGrayed("5",true);
    }
}

二.3D:UI

官方文档

三.动效相关

public class Lesson48 : MonoBehaviour
{
    private void Start()
    {
        var panel = UIManager.Instance.ShowPanel<LearnFGUI4>("Package1");
        var transition = panel.GetTransition("t0");
        transition.Play(() =>
        {
            Debug.Log("播放结束");
        });
        transition.Play(1,0,0,1, () =>
        {
            Debug.Log("播放结束");
        });
        //倒着播放,需要先正向播放过才能倒着播放
        transition.PlayReverse();
        //暂停
        transition.SetPaused(true);
        //停止
        //第一个参数表示,停止时是否停留在当前位置
        //第二个参数表示,播放完成后是否调用回调函数
        transition.Stop(true,true);
        //设置关键帧的值
        transition.SetValue("PosBegin",100,100);
        //设置Tween值
        transition.SetDuration("PosBegin",1f);
        //是否受到Unity时间缩放影响
        transition.ignoreEngineTimeScale = true;
        //单独设置动效的时间缩放
        transition.timeScale = 0.5f;
    }
}
### 实现 UniApp 中通告栏组件的垂直滚动效果 在 UniApp 开发环境中,为了实现通告栏(通常称为跑马灯或公告栏)的垂直滚动效果,可以通过自定义样式和 JavaScript 动画来完成这一功能。虽然 `uni-ui` 扩展组件提供了丰富的 UI 组件库[^1],但特定于垂直滚动通告栏的功能可能需要开发者自行构建。 #### HTML 结构设计 首先,在页面模板文件中创建一个容器用于放置要滚动的内容: ```html <template> <view class="scroll-container"> <text v-for="(item, index) in notices" :key="index">{{ item }}</text> </view> </template> ``` 这里使用了 Vue 的循环语法 `v-for` 来遍历通知列表并渲染每一项文字内容。 #### CSS 样式设置 接着通过 CSS 定义该容器及其内部元素的基础布局以及动画属性: ```css <style scoped> .scroll-container { height: 40px; /* 设置固定高度 */ overflow: hidden; } .scroll-item { display: block; white-space: nowrap; animation: scroll-up linear infinite; } @keyframes scroll-up { from { transform: translateY(0); } to { transform: translateY(-100%); } } </style> ``` 上述代码片段设置了 `.scroll-container` 的溢出隐藏特性,并给每一个子节点应用了一个名为 `scroll-up` 的关键帧动画,使得这些项目能够向上移动直到完全离开视口范围为止。 #### JavaScript 控制逻辑 最后利用 Vue 或者其他框架提供的生命周期钩子函数初始化数据源和其他必要的配置参数: ```javascript <script> export default { data() { return { notices: [ '欢迎访问我们的网站', '最新活动即将上线,请持续关注!', '感谢您一直以来的支持' ] }; }, mounted() { this.startScroll(); }, methods: { startScroll() { let items = document.querySelectorAll('.scroll-item'); setInterval(() => { Array.prototype.forEach.call(items, (el, i) => { el.style.animationDuration = `${items.length * 2}s`; }); }, 0); } } }; </script> ``` 此部分脚本负责准备显示的消息数组,并调用方法启动自动播放机制。注意这里的定时器是为了确保每次更新 DOM 后重新计算动画时间长度,从而保持流畅度。 综上所述,以上就是关于如何在 UniApp 应用程序里制作具有垂直滚动特性的通告栏的具体实施办法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值