Unity Scroll View 滑动边界透明度渐变效果

最近有个需求，就是要求内容在滑动的时候边界Item透明度要有渐变效果，效果如下

有好的新鲜玩意不妨分享出来，方便自己（备忘）也方便他人！！！

#首先搭建个简单UI

各主要组件属性：
注意相机模式

好了，这样UI方便的准备工作就完成了，接着创建一个入口（挂载）脚本：TestGradientChange
下面展示一些 内联代码片。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class TestGradientChange : MonoBehaviour
{Transform   rect;GameObject go;TestData2[] datas;// Start is called before the first frame updatevoid Start(){go = transform.Find("Item").gameObject;go.SetActive(false);rect = transform.Find("Scroll View").GetComponent<RectTransform>();datas = new TestData2[]{new TestData2("1","Item1"),new TestData2("2","Item2"),new TestData2("3","Item3"),new TestData2("4","Item4"),new TestData2("5","Item5"),new TestData2("6","Item6"),new TestData2("7","Item7"),new TestData2("8","Item8"),new TestData2("9","Item9"),new TestData2("10","Item10"),new TestData2("11","Item11"),new TestData2("12","Item12"),new TestData2("13","Item13"),new TestData2("14","Item14"),new TestData2("15","Item15"),new TestData2("16","Item16"),new TestData2("17","Item17"),new TestData2("18","Item18"),new TestData2("19","Item19"),};Show();}private void Show(){foreach (var info in datas){GameObject obj = GameObject.Instantiate(go, rect.transform.Find("Viewport/Content"));obj.transform.Find("Id").GetComponent<Text>().text = info.Id;obj.transform.Find("Text").GetComponent<Text>().text = info.name;obj.SetActive(true);}ScrollRectHelper.Instance.Init(rect.GetComponent<RectTransform>(), rect.transform.Find("Viewport").GetComponent<RectTransform>(), rect.transform.Find("Viewport/Content").GetComponent<RectTransform>(), 50, 50, 0, 0, 0);}
}public class TestData2
{public string Id;public string name;public TestData2(string id, string n){Id = id;name = n;//.....你所需的各种数据}
}

嗯，重点来了，创建一个脚本：ScrollRectHelper

using System.Collections;
using System.Collections.Generic;
using System.Threading.Tasks;
using UnityEngine;
using UnityEngine.UI;public class ScrollRectHelper
{static ScrollRectHelper instance;public static ScrollRectHelper Instance{get{if (instance == null){instance = new ScrollRectHelper();}return instance;}}RectTransform scrollRect;RectTransform scrollTR;RectTransform contentTR;RectTransform viewTR;public GameObject ItemGo;public int GridHeight;          //public int GridWidth;public int wholeItemCount;     //格子总数public int lineCount;           //每一行的格子数public float top;//边距public float down;//边距public float left;public float right;public Vector2 space;int line;                       //面板里的行数float contentHeight;            //content根据grid数量初始化后的高度/// <summary> 最好y </summary>float lastContentRTy;float lastContentRTx;int itemCountInView;            //面板里可容纳的最大Item数量float scrollViewHeight;         //面板的初始高度float viewHeight;float viewWidth;/// <summary>/// /// </summary>/// <param name="scrollRect"></param>/// <param name="viewTR">View</param>/// <param name="contentTR">Content</param>/// <param name="top">上边距</param>public void Init(RectTransform scrollRect, RectTransform viewTR, RectTransform contentTR, float top, float down = 0, float left = 0, float right = 0, float viewHeight = 0){this.scrollRect = scrollRect;this.contentTR = contentTR;// scrollRect.Find("Viewport/Content").GetComponent<RectTransform>();// this.lineCount = lineCount;this.viewTR = viewTR;this.top = top;this.down = down;this.left = left;this.right = right;this.viewHeight = viewHeight;// ==0 ? Math.Abs (viewTR.GetComponent<RectTransform>().rect.height) :  viewHeight ;viewWidth = viewTR.GetComponent<RectTransform>().rect.width;var rect = scrollRect.GetComponent<RectTransform>().rect;scrollViewHeight = rect.height;lastContentRTy = GetContentPositionY();scrollRect.GetComponent<ScrollRect>().onValueChanged.AddListener(OnValueChanged);ReshView();}public void OnValueChanged(Vector2 pos){float nowContentRTy = GetContentPositionY();float nowContentRTx = GetContentPositionX();//Debug.LogError(lastContentRTy + "OnValueChanged==当前y=" + nowContentRTy  +"============"+ lastContentRTx +"=当前y= "+ nowContentRTx);//往上移bool isUp = false;        MoveItemGo(isUp);lastContentRTx = nowContentRTx;lastContentRTy = nowContentRTy;}private async void ReshView(){await Task.Delay(500);MoveItemGo(true);}float GetContentPositionY(){return contentTR.anchoredPosition.y;}float GetContentPositionX(){return contentTR.anchoredPosition.x;}void MoveItemGo(bool up){//Debug.LogError(viewHeight + "==View=== " + viewWidth + "GetContentPositionX()"+ GetContentPositionX()+" == "+ lastContentRTx);float currX = 0;float currY = 0;float alph = 0;float tempTop = 0;// top + viewHeight;float tempDown = 0;float tempLeft = 0;float tempRight = 0;if ((top != 0 || down != 0) && (left == 0 && right == 0)){if (viewTR.pivot.y == 0.5f){tempTop = Camera.main.WorldToScreenPoint(viewTR.position).y + Screen.height * 1f / 720 * viewTR.rect.height * .25f + Screen.height * 1f / 720 * top;tempDown = Camera.main.WorldToScreenPoint(viewTR.position).y - Screen.height * 1f / 720 * viewTR.rect.height * .25f - Screen.height * 1f / 720 * down;}else if (viewTR.pivot.y == 1.0f){tempTop = Camera.main.WorldToScreenPoint(viewTR.position).y - Screen.height * 1f / 720 * viewTR.rect.height * .25f + Screen.height * 1f / 720 * top;tempDown = Camera.main.WorldToScreenPoint(viewTR.position).y - Screen.height * 1f / 720 * viewTR.rect.height * 0.75f - Screen.height * 1f / 720 * down;}else if (viewTR.pivot.y == 0.0f){tempTop = Camera.main.WorldToScreenPoint(viewTR.position).y + Screen.height * 1f / 720 * viewTR.rect.height * .75f + Screen.height * 1f / 720 * top;tempDown = Camera.main.WorldToScreenPoint(viewTR.position).y + Screen.height * 1f / 720 * viewTR.rect.height * .25f - Screen.height * 1f / 720 * down;}for (int i = 0; i < contentTR.childCount; i++){currY = Camera.main.WorldToScreenPoint(contentTR.GetChild(i).transform.position).y;               if (currY <= tempTop && currY >= tempDown)//可视范围 不透明{alph = 1;// contentTR.GetChild(i).transform.Find("");}else//超出可视范围 开始变得透明{float tempHeight = 0;if (currY > tempTop){tempHeight = Screen.height * 1f / 720 * contentTR.GetChild(i).GetComponent<RectTransform>().rect.height;if (currY - tempTop > tempHeight) alph = 0;else alph = 1 - ((currY - tempTop) * 1f / tempHeight);if (i == 1) Debug.LogError((currY - tempTop) + " ======上========" + tempHeight + "  al=" + alph);}else if (currY < tempDown){tempHeight = Screen.height * 1f / 720 * contentTR.GetChild(i).GetComponent<RectTransform>().rect.height;if ((tempDown - currY) > tempHeight) alph = 0;else alph = 1 - ((tempDown - currY) * 1f / tempHeight);//if (i == 8) Debug.LogError((tempDown - currY) + " ======下========" + tempHeight + "  al=" + alph);}}if (i == 1)Debug.LogError(viewHeight + "==View=== " + viewWidth + "  " + currY + " =currY tempTop=" + tempTop + "  tempDown=== " + tempDown + "  al=" + alph);//设置透明度SetAlpha(contentTR.GetChild(i).gameObject, (int)(alph * 255), true);}}if ((left != 0 || right != 0) && (top == 0 && down == 0)){if (viewTR.pivot.x == 0.5f){tempLeft = Camera.main.WorldToScreenPoint(viewTR.position).x + Screen.width * 1f / 1280 * viewTR.rect.width * .25f + Screen.width * 1f / 1280 * left;tempRight = Camera.main.WorldToScreenPoint(viewTR.position).x - Screen.width * 1f / 1280 * viewTR.rect.width * .25f - Screen.width * 1f / 1280 * right;}else if (viewTR.pivot.x == 1.0f){tempLeft = Camera.main.WorldToScreenPoint(viewTR.position).x - Screen.width * 1f / 1280 * viewTR.rect.width * .25f + Screen.width * 1f / 1280 * left;tempRight = Camera.main.WorldToScreenPoint(viewTR.position).x - Screen.width * 1f / 1280 * viewTR.rect.width * 0.75f - Screen.width * 1f / 1280 * right;}else if (viewTR.pivot.x == 0.0f){tempLeft = Camera.main.WorldToScreenPoint(viewTR.position).x + Screen.width * 1f / 1280 * viewTR.rect.width * .75f + Screen.width * 1f / 1280 * left;tempRight = Camera.main.WorldToScreenPoint(viewTR.position).x + Screen.width * 1f / 1280 * viewTR.rect.width * .25f - Screen.width * 1f / 1280 * right;}for (int i = 0; i < contentTR.childCount; i++){currX = Camera.main.WorldToScreenPoint(contentTR.GetChild(i).transform.position).x;if (currX <= tempLeft && currX >= tempRight)//可视范围 不透明{alph = 1;// contentTR.GetChild(i).transform.Find("");}else//超出可视范围 开始变得透明{float tempWidth = 0;if (currX > tempLeft){tempWidth = Screen.width * 1f / 1280 * contentTR.GetChild(i).GetComponent<RectTransform>().rect.width;if (currX - tempLeft > tempWidth) alph = 0;else alph = 1 - ((currX - tempLeft) * 1f / tempWidth);//if (i == 1) Debug.LogError((currX - tempLeft) + " ======上========" + tempWidth + "  al=" + alph +" name="+ contentTR.GetChild(i).name);}else if (currX < tempRight){tempWidth = Screen.width * 1f / 1280 * contentTR.GetChild(i).GetComponent<RectTransform>().rect.width;if ((tempRight - currX) > tempWidth) alph = 0;else alph = 1 - ((tempRight - currX) * 1f / tempWidth);//if (i == 8) Debug.LogError((tempRight - currX) + " ======下========" + tempWidth + "  al=" + alph);}}//if (i==1)//Debug.LogError(viewHeight + "==View=== " + viewWidth+"  "+ currX + " =currX tempLeft=" + tempLeft  + "  tempRight=== " + tempRight + "  al=" + alph);//设置透明度SetAlpha(contentTR.GetChild(i).gameObject, (int)(alph * 255), true);}}}/// <summary>/// 设置图片透明度  isAll:true 则包含子物体/// </summary>       public void SetAlpha(GameObject target, int alpha, bool isAll = false){Graphic[] imgs = target.GetComponentsInChildren<Graphic>();float a = (1f / 255) * alpha;for (int i = 0; i < imgs.Length; i++){if (imgs[i] != null && (imgs[i] is Text || imgs[i] is Image)){imgs[i].color = new Color(imgs[i].color.r, imgs[i].color.g, imgs[i].color.b, a);}if (!isAll) break;}}
}

完成，将TestGradientChange脚本挂在UIWindow，运行，就可以看到效果了。

注意：这个跟上一篇多列无限循环不能共用，因为都涉及到了透明度的操作。。。。这也是我比较郁闷的地方。。。
工程链接：https://download.csdn.net/download/bingo105/12922594

Unity Scroll View 滑动边界透明度渐变效果相关推荐

Unity Scroll View列表滑动时列表内图片边缘闪烁问题解决
修改所在Canvas物体上的组件Canvas上的属性将Pixel Perfact 勾选上这一属性在Unity官方API的解释如下 Description Force elements in the ...
Unity Scroll View在Clamped模式下无法移动
稍微专业一些的问题,还是用Google去查吧 Q: Scrollrect Clamp Not Working Hi All, I'm trying to implement a vertical sc ...
【NGUI基础知识】—Scroll View(滚动视图)详解
下面给大家分享下NGUI中Scroll View(滚动视图)中的各功能属性,帮助大家去理解及使用. ScrollView属性 1.Content Origin: 控制 panle 相对的 Scroll ...
android view滑动到顶部并固定在顶部
创建自定义ScrollView /** * ProjectName: yuanxinclan_new * Author: lgq * Date: 2017/12/20 0020 10:07 */ pu ...
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用，并取消拖拽(滑动内容)效果，拖拽只在Scrollbar 上起作用
Unity UGUI基础之 Scroll View/Scroll Rect 的简单使用,并取消拖拽(滑动内容)效果,拖拽只在Scrollbar 上起作用目录 Unity UGUI基础之 Scro ...
Android透明到白色滑动渐变,Android中Toolbar随着ScrollView滑动透明度渐变效果实现...
Android中Toolbar随着ScrollView滑动透明度渐变效果实现一.思路:监听ScrollView的滑动事件不断的修改Toolbar的透明度二.注意 1.ScrollView 6.0 ...
文字太多时给文本框添加滑动条——text + ContentSizeFitter + Scroll View
文字少的时候,直接显示文字:文字多的时候,自动添加滑动条,拖动滑动条后查看全部文字. 1.字少的时候 2.字多的时候自动增加一个垂直滑动条一.问题的来源在一个固定区域显示文字,这些文字有时候会很多 ...
如何在Storyboard中使用Scroll view
本文章环境Xcode 11 在开始使用scroll view之前(storyboard/XIB),我们必须搞清楚两个东西在Storybord/Xib中使用Scroll view,会有哪些结构为什么 ...
Android 图片合成：添加蒙板效果不规则相框透明度渐变效果的实现
Android 图片合成:添加蒙板效果不规则相框透明度渐变效果的实现暂时还未有时间开发这效果,所以先贴出来. 先贴一张效果图,这是一张手机截屏: 左上方的风景图:背景图片右上方的人物图:前景图 ...

Unity Scroll View 滑动边界透明度渐变效果

Unity Scroll View 滑动边界透明度渐变效果相关推荐

最新文章

热门文章