FairyGUI使用——列表居中放大动画

Unity:2021.1.14flc1
FairyGUI:4.2.0

效果图

FairyGUI使用——列表居中放大动画_第1张图片
这里的代码基于循环列表的基础上改进的,可以参考FairyGUI使用——循环列表

FairyGUI内部设置

FairyGUI使用——列表居中放大动画_第2张图片
list的大小要有余留,否则无法渲染出放大的部分
FairyGUI使用——列表居中放大动画_第3张图片
list与内部的button的装载器都要设置为关联容器,并调整为左右居中,上下居中

代码部分

DoSpecialEffect()为动画效果函数
函数设置好之后要在组件的Start()内调用,
另外给每一个按钮元素设置中心点在中间位置:

public class LoopList : MonoBehaviour
{
     
    private GComponent mainUI;
    private GList list;
    // Start is called before the first frame update
    void Start()
    {
     
        mainUI = GetComponent<UIPanel>().ui;
        list = mainUI.GetChild("n0").asList;
        list.SetVirtualAndLoop();
        list.itemRenderer = RenderListItem;
        list.numItems = 7;//设置列表内容数量
        list.scrollPane.onScroll.Add(DoSpecialEffect);//滚动时派发事件
        DoSpecialEffect();//初始化调用
    }

    /// 
    /// 循环列表中间元素放大效果
    /// 
    private void DoSpecialEffect()
    {
     
        float listCenter = list.scrollPane.posX + list.viewWidth / 2;
        //list组件的x值,加上list组件自身宽度的一半,设置为对标的中心x值
        for(int i = 1; i < list.numChildren; i++)
        {
     
            GObject item = list.GetChildAt(i);
            float itemCenter = item.x + item.width / 2;//循环列表内元素的中心x值
            float itemWidth = item.width;//列表元素的宽度
            float distance = Mathf.Abs(listCenter - itemCenter);
            if (distance<item.width)
            {
     
                float distanceRange = 1 + (1 - distance / itemWidth)*0.4f;//使放大动画有渐进效果
                item.SetScale(distanceRange, distanceRange);//设置放大比例
            }
            else
            {
     
                item.SetScale(1, 1);
            }
        }
    }

    private void RenderListItem(int index, GObject obj)
    {
     
        GButton button = obj.asButton;
        button.SetPivot(0.5f,0.5f);//设置中心点
        button.icon = UIPackage.GetItemURL("LoopList", "image0" + (index + 1));
    }
}

你可能感兴趣的:(unity,FairyGUI,unity,c#)