【Unity3D插件】FancyScrollView通用UI滑動串列插件分享-有解無憂

推薦閱讀

CSDN主頁
GitHub開源地址
Unity3D插件分享
簡書地址
我的個人博客
QQ群：1040082875

一、前言

Hello，大家好，我是★恬靜的小魔龍★，又到了插件分享時刻，

今天分享的插件是FancyScrollView，

FancyScrollView是一個可以實作復雜靈活影片效果的通用UI滑動串列組件，可以幫助開發者快速實作表現力豐富的UI滑動串列，

可以輕松實作ScrollVIew串列的無線回圈、串列回圈、串列物體帶影片、自動停靠等功能，代碼在https://github.com/setchi/FancyScrollView已經開源，

Demo里已經給了9個案例，基本唱功的形式和功能都有，修改引數和影片就可以實作自己想要的效果，

在這里插入圖片描述

二、插件及原始碼

插件下載：
https://download.csdn.net/download/q764424567/20371136

開源地址：
https://github.com/setchi/FancyScrollView

三、Demo分析

3-1、01_Basic

在這里插入圖片描述
這個示例主要有三個比較重要的腳本組件：

1、Example01.cs

using System.Linq;
using UnityEngine;

namespace FancyScrollView.Example01
{
    class Example01 : MonoBehaviour
    {
        [SerializeField] ScrollView scrollView = default;

        void Start()
        {
            //生成一個有序的ItemData陣列
            var items = Enumerable.Range(0, 20)
                .Select(i => new ItemData($"Cell {i}"))
                .ToArray();

            //更新資料
            scrollView.UpdateData(items);
        }
    }
}

這個腳本就是生成一些資料，然后傳給ScrollView組件進行內容顯示，

2、ScrollView.cs
在這里插入圖片描述
這個就是用來顯示內容的組件

Cell Interval：單元格Cell間隔
Scroll Offset：滾動偏差
Loop：設定成頭尾相接的回圈串列
Cell Container：顯示單元格Cell的容器
Scroller：滾動條
Cell Prefab：單元格Cell的預制體

3、Scroller.cs滑動條
在這里插入圖片描述

Viewport：顯示的視窗
Scroll Direction：滑動條的排列方向
Movement Type：移動的型別，比如彈性的、緊繃的、自由的
Scroll Sensitivity：靈敏度
Inertia：串列是否有一個慣性
Deceleration Rate：減速的速率
Snap：啟用捕捉Snap后，在滑動快結束時會定位到最近的一個Cell，而不會停留在中間狀態，可以調整定位的速度、時長等引數
Scrollbar：滑動條

3-2、02_FocusOn

在這里插入圖片描述
Demo2跟Demo1基本沒有啥區別
主要變化：

增加了一個按鈕的點擊事件回應、
下面對當前選中的物件的下標的顯示
一個選中變藍的效果

首先看，Example02的變化：

using System.Linq;
using UnityEngine;
using UnityEngine.UI;

namespace FancyScrollView.Example02
{
    class Example02 : MonoBehaviour
    {
        [SerializeField] ScrollView scrollView = default;
        [SerializeField] Button prevCellButton = default;
        [SerializeField] Button nextCellButton = default;
        [SerializeField] Text selectedItemInfo = default;

        void Start()
        {
        	//增加了對兩個按鈕事件的回應
            prevCellButton.onClick.AddListener(scrollView.SelectPrevCell);
            nextCellButton.onClick.AddListener(scrollView.SelectNextCell);
            //對選中的當前物件的下標的顯示
            scrollView.OnSelectionChanged(OnSelectionChanged);

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

            scrollView.UpdateData(items);
            //選中的效果，每次更新選中的物件的時候這里也會變化
            scrollView.SelectCell(0);
        }

        void OnSelectionChanged(int index)
        {
            selectedItemInfo.text = $"Selected item info: index {index}";
        }
    }
}

ScrollView.cs腳本增加了幾個函式（沒有羅列完整）：

		public void OnSelectionChanged(Action<int> callback)
        {
            onSelectionChanged = callback;
        }

        public void SelectNextCell()
        {
            SelectCell(Context.SelectedIndex + 1);
        }

        public void SelectPrevCell()
        {
            SelectCell(Context.SelectedIndex - 1);
        }

        public void SelectCell(int index)
        {
            if (index < 0 || index >= ItemsSource.Count || index == Context.SelectedIndex)
            {
                return;
            }

            UpdateSelection(index);
            scroller.ScrollTo(index, 0.35f, Ease.OutCubic);
        }

增加了回呼函式，以及上一個下一個按鈕事件，最后就是選中Cell的效果展示函式SelectCell，

3-3、03_InfiniteScroll

在這里插入圖片描述
基本邏輯一致，通過掛載在ScrollView物件的ScrollView腳本組件和Scroller腳本組件進行控制顯示，

通過不同的預制體Cell顯示不同的效果，

這是Demo3的Cell預制體：
在這里插入圖片描述

3-4、04_Metaball

在這里插入圖片描述
Demo4和Demo5中，展示了如何使用Shader制作出表現力更豐富的滑動串列，

Demo4給出的例子是演示Metaball效果的應用，

在腳本目錄下，可以找到Metaball.hlsl，這個腳本里面顯示了Metaball效果的核心代碼：

#ifndef GALLERY_METABALL_HLSL_INCLUDED
#define GALLERY_METABALL_HLSL_INCLUDED

#define CELL_COUNT 5 // CeilToInt(1f / cellInterval)
#define DATA_COUNT 7 // CELL_COUNT + 2(objects)

// xy = cell position, z = data index, w = scale
float4 _CellState[DATA_COUNT];

float f(float2 v)
{
    return 1. / (v.x * v.x + v.y * v.y + .0001);
}

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);
}

#endif

這個_CellState就是ScrollView中的Cell的資料的集合，xy對應的是每個Cell集合的位置資料，w是每個Cell的縮放資料，

3-5、05_Voronoi

在這里插入圖片描述
Demo5給出的例子是演示Voronoi效果的應用，

在腳本目錄下，可以找到Voronoi.hlsl，這個腳本里面顯示了Voronoi效果的核心Shader代碼：

#ifndef GALLERY_VORONOI_HLSL_INCLUDED
#define GALLERY_VORONOI_HLSL_INCLUDED

#define CELL_COUNT  7 // CeilToInt(1f / cellInterval)
#define DATA_COUNT 11 // CELL_COUNT + 4(four corners)

// xy = cell position, z = data index, w = select animation
float4 _CellState[DATA_COUNT];

float3 hue_to_rgb(float h)
{
    h = frac(h) * 6 - 2;
    return saturate(float3(abs(h - 1) - 1, 2 - abs(h), 2 - abs(h - 2)));
}

float hash(float2 st)
{
    float3 p3  = frac(float3(st.xyx) * .1031);
    p3 += dot(p3, p3.yzx + 19.19);
    return frac((p3.x + p3.y) * p3.z);
}

float noise(float2 st)
{
    float2 i = floor(st);
    float2 f = frac(st);

    float a = hash(i);
    float b = hash(i + float2(1.0, 0.0));
    float c = hash(i + float2(0.0, 1.0));
    float d = hash(i + float2(1.0, 1.0));

    float2 u = f * f * (3.0 - 2.0 * f);
    return lerp(a, b, u.x) +
        (c - a)* u.y * (1.0 - u.x) +
        (d - b) * u.x * u.y;
}

float linework(float2 st)
{
    float a = atan2(st.y, st.x);
    float d = noise(float2(a * 120, 0)) + smoothstep(300, 50, length(st));
    return 1. - saturate(d);
}

float4 voronoi(float2 st)
{
    float cellIndex = 0, dist = 1e+9;
    float2 cellPos = 1e+5;

    [unroll]
    for (int i = 0; i < DATA_COUNT; i++)
    {
        float2 p = _CellState[i].xy;
        float2 q = st - p;
        float d = q.x * q.x + q.y * q.y;
        if (d < dist)
        {
            dist = d; cellPos = p; cellIndex = i;
        }
    }

    dist = 1e+5;

    [unroll]
    for (int j = 0; j < DATA_COUNT; j++)
    {
        if (cellIndex == j) continue;

        float2 p = _CellState[j].xy;
        float d = dot(st - (cellPos + p) * 0.5, normalize(cellPos - p));
        dist = min(dist, d);
    }

    float3 color = 1;
    float dataIndex = _CellState[cellIndex].z;
    color = hue_to_rgb(dataIndex * 0.1) + 0.1;
    color = lerp(color, 0, linework(st - cellPos) * _CellState[cellIndex].w);
    color = lerp(color, hue_to_rgb(cellIndex * 0.1) * 0.6, step(CELL_COUNT, cellIndex));

    float border = smoothstep(0, 13, dist);
    color = lerp(0.1, color, smoothstep(0.8 - 0.07, 0.8, border));
    color = lerp(1.0, color, smoothstep(0.5 - 0.07, 0.5, border));
    return float4(color, 1);
}

#endif

這個_CellState就是ScrollView中的Cell的資料的集合，xy對應的是每個Cell集合的位置資料，z是資料索引，w是選擇影片

3-6、06_LoopTabBar

在這里插入圖片描述
這個Demo演示了在確定有幾個界面的情況下，生成對應的切換Tab，

using System.Linq;
using UnityEngine;
using UnityEngine.UI;

namespace FancyScrollView.Example06
{
    class Example06 : MonoBehaviour
    {
        [SerializeField] ScrollView scrollView = default;
        [SerializeField] Text selectedItemInfo = default;
        [SerializeField] Window[] windows = default;

        Window currentWindow;

        void Start()
        {
            scrollView.OnSelectionChanged(OnSelectionChanged);

            var items = Enumerable.Range(0, windows.Length)
                .Select(i => new ItemData($"Tab {i}"))
                .ToList();

            scrollView.UpdateData(items);
            scrollView.SelectCell(0);
        }

        void OnSelectionChanged(int index, MovementDirection direction)
        {
            selectedItemInfo.text = $"Selected tab info: index {index}";

            if (currentWindow != null)
            {
                currentWindow.Out(direction);
                currentWindow = null;
            }

            if (index >= 0 && index < windows.Length)
            {
                currentWindow = windows[index];
                currentWindow.In(direction);
            }
        }
    }
}

使用了回呼函式去更新顯示的資訊，以及視窗的切換，

3-7、07_ScrollRect

在這里插入圖片描述
Demo7和Demo8演示了行列類的滑動串列，在示例工程中提供了可以實時修改引數的功能：
比如：

修改容器的的上邊距
修改容器的的下邊距
修改Cell的間距
修改Cell的數量
修改選中的Cell的下標
修改居中方式

Demo7顯示了單行單列Cell的顯示情況，

3-8、08_GridView

在這里插入圖片描述
Demo8顯示了單行多列Cell的顯示情況，

在這里插入圖片描述
修改引數，也由單例改成多列了，

3-9、09_LoadTexture

在這里插入圖片描述
這個Demo演示了，圖片的動態加載，如要構建一個ItemData[]資料，這個陣列里面的資料顯示了圖片的名字，圖片的說明以及圖片的加載路徑：

"FancyScrollView",
"A scrollview component that can implement highly flexible animation.",
"https://setchi.jp/FancyScrollView/09_LoadTexture/Images/00.png"

整體代碼：

using UnityEngine;

namespace FancyScrollView.Example09
{
    class Example09 : MonoBehaviour
    {
        readonly ItemData[] itemData =
        {
            new ItemData(
                "FancyScrollView",
                "A scrollview component that can implement highly flexible animation.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/00.png"
            ),
            new ItemData(
                "01_Basic",
                "Example of simplest implementation.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/01.png"
            ),
            new ItemData(
                "02_FocusOn",
                "Example of focusing on the left and right cells with buttons.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/02.png"
            ),
            new ItemData(
                "03_InfiniteScroll",
                "Example of infinite scroll implementation.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/03.png"
            ),
            new ItemData(
                "04_Metaball",
                "Example of metaball implementation using shaders.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/04.png"
            ),
            new ItemData(
                "05_Voronoi",
                "Example of voronoi implementation using shaders.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/05.png"
            ),
            new ItemData(
                "06_LoopTabBar",
                "Example of switching screens with tabs.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/06.png"
            ),
            new ItemData(
                "07_ScrollRect",
                "Example of ScrollRect style implementation with scroll bar.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/07.png"
            ),
            new ItemData(
                "08_GridView",
                "Example of grid layout implementation.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/08.png"
            ),
            new ItemData(
                "09_LoadTexture",
                "Example of load texture implementation.",
                "https://setchi.jp/FancyScrollView/09_LoadTexture/Images/09.png"
            )
        };

        [SerializeField] ScrollView scrollView = default;

        void Start()
        {
            scrollView.UpdateData(itemData);
        }
    }
}

可以用這個Demo去做一個動態加載的 “在線圖片系統”，

四、后言

這個插件，用起來也比較簡單上手，影片效果做的也挺好，可以幫助開發者快速實作靈活美觀的滑動串列影片，

但是，凡事有利皆有弊，這個插件的影片效果不錯，但由于這里面每個cell都用到一個Animator，在性能上也是有不少開銷的，

在滑動串列的時候，影片更新耗時和更新UI的開銷都比較大，均值在1.9ms和1.6ms，

所以，這個插件更適合于其他CPU壓力不大都場景下使用，且注意影片和影片狀態機不宜太過復雜，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/289950.html

標籤：其他

上一篇：【Unity Shader入門】?? | 使用Shader實作一個彩虹球效果?！閃閃發光的特效離我又近了一步！

下一篇：【Unity3D插件】UGUI MiniMap插件分享