一、简介

FancyScrollView是一个可以实现复杂灵活动画效果的通用UI滑动列表组件，可以帮助开发者快速实现表现力丰富的UI滑动列表。

开源库链接：https://lab.uwa4d.com/lab/5bc4219e04617c5805d4d3a1

二、创建一个FancyScrollView

以示例项目中最基础的第一个例子为例，来看一下如何使用FancyScrollView实现一个动画滑动列表。

1、创建一个ItemData类，用于存放每个单元中所需的数据。

public class ItemData
{
    public string Message { get; }
    public ItemData(string message)
    {
        Message = message;
    }
}

2、创建一个Cell类，继承自FancyCell<itemdata style="box-sizing: border-box;">。其中有两个主要函数，UpdateContent用于刷新UI上对应ItemData中的数据内容，UpdatePosition用于控制每个Cell的滑动效果，包括位置、动画等。在Example01中，使用了Animator来控制动画。

public class MyCell : FancyCell<ItemData>
{
    [SerializeField] Animator animator = default;
    [SerializeField] Text message = default;

    public override void UpdateContent(ItemData itemData)
    {
        message.text = itemData.Message;
    }

    public override void UpdatePosition(float position)
    {
        // position 是 0.0 ~ 1.0 之间的值
        // 基于position可以自由控制Scroll的外观
        if (animator.isActiveAndEnabled)
        {
            animator.Play(AnimatorHash.Scroll, -1, position);
        }

        animator.speed = 0;
    }
}

3、创建一个ScrollView类，继承自FancyScrollView。

public class MyScrollView : FancyScrollView<ItemData>
{
    [SerializeField] Scroller scroller = default;
    [SerializeField] GameObject cellPrefab = default;

    protected override GameObject CellPrefab => cellPrefab;

    void Start()
    {
        scroller.OnValueChanged(base.UpdatePosition);
    }

    public void UpdateData(IList<ItemData> items)
    {
        base.UpdateContents(items);
        scroller.SetTotalCount(items.Count);
    }
}

4、创建一个Example01，用于初始化列表数据。

public class Example01 : MonoBehaviour
{
    [SerializeField] MyScrollView myScrollView = default;

    void Start()
    {
        var items = Enumerable.Range(0, 20)
            .Select(i => new ItemData($"Cell {i}"))
            .ToArray();

        myScrollView.UpdateData(items);
    }
}

5、创建一个Cell Prefab，为它制作一个好看的动画效果，并创建制作好对应的AnimatorController。

6、组装好这些GameObject后，即可得到一个FancyScrollView效果啦。

三、其它功能及应用

1、无限循环
如果希望实现头尾相接的循环列表，只需要设置两个选项：勾选FancyScrollView的“Loop”，并将Scroller的Movement Type设定为Unrestricted即可。

2、捕捉（Snap）

启用Snap之后，在滑动快结束时会定位到最近的一个单元，而不会停留在中间状态。这也是滑动列表非常常用的功能。同时还可以调整这里定位的速度、时长、EasingType等参数。

3、结合Shader制作列表背景
在示例4和示例5中，展示了如何使用Shader制作出表现力更丰富的滑动列表。这里给出的两个例子分别是Metaball和Voronoi效果的应用。

在Metaball.hlsl中，可以找到Shader实现的核心方法。

float4 metaball(float2 st)
{
    float scale = 4600;
    float d = 0;

    [unroll]
    for (int i = 0; i < DATA_COUNT; i++)
    {
        d += f(st - _CellState[i].xy) * _CellState[i].w;
    }

    d *= scale;
    d = abs(d - 0.5);

    float3 color = 1;
    color = lerp(color, float3(0.16, 0.07, 0.31), smoothstep(d - 0.04, d - 0.04 + 0.002, 0));
    color = lerp(color, float3(0.16, 0.80, 0.80), smoothstep(d - 0.02, d - 0.02 + 0.002, 0));
    return float4(color, 1)
}

其中_CellState为ScrollView中的Cell数据集合。xy对应的是每个Cell的位置position数据，w对应的是每个cell的缩放scale数据。

4、ScrollRect和GridView
除了常规的滑动列表外，FancyScrollView还提供了行列类的滑动列表，且在示例工程中，提供了如果修改Cell单元间距、顶距等配置方式。但这两种ScrollView不支持无限循环和捕捉功能。