unity | 动画模块之滚动选项框

清疚 2023-10-12 08:59 41阅读 0赞

#### 一、效果动画 ####

如果不是你们想要的，就省的你们继续往下看了

![e3e47431e1494a71b00fcbb6b77d7bb0.gif][]

#### 二、作者的话 ####

对于我来说，计算一大堆数据简直太难了，所以自己想了点方法

#### 三、基本功的要求 ####

需要会使用Scroll View

#### 四、进入正题 ####

1.先做一个scrollView把自己想做的东西放进去

![effeaa8dfa244e70bf61cfdca1a6a51f.png][]

2.接下来的难度就是，当方块块移动到指定位置附近的时候，会变大

**分析：**scrollView在移动方块块的时候，移动的其实是Content的位置，

所以，方块块的本地位置是不变的，因此，我们都需要用世界坐标来计算

**a.我们先确定一个想要的坐标**

在这个图中，我就把第一个0的坐标，当成自己想要的坐标吧

![ee611b1b8c3a42f38b75fe0210b29fb5.png][]

但是，这里我们要注意，待会放大的时候，我们应该希望从中间放大，

所以我们的坐标锚点需要改

![69632b54cac641eb8d358d64e15784f9.png][]

把坐标都改成中间的位置，这时候我们去看看坐标

![4ef3c99f990c455d8c98b88e75b3dddd.png][]

他的坐标是0,360，我们就以这个位置为基础，上下100就开始变化，

**但是，这是本地坐标，我们需要0,360的世界坐标**

**b.把本地坐标转换成世界坐标**

> 备注：本地坐标转换世界坐标的方法
> 
>     public Vector2 anchorsPositon= new Vector2(0,360);
>     
>     //本地转换世界坐标时，它需要知道这个坐标是谁的，或者说相对于谁的坐标
>     //在这里我们就是第一个0，那个物体
>     public Transform anvhorsPositonP;
>     
>        private void Start()
>         {
>             //TransformPoint()，是本地转世界坐标的方法
>             wordPositon = anvhorsPositonP.TransformPoint(anchorsPositon);
>         }

**c.确定最大能放大多大，和你怎么去计算**

> **目标：代码计算看不懂在看这里**
> 
> 假如现在物体和我定的坐标相距400，然后我定的距离是300  
> 那么倍数就是400/300=1.33，超过1了，所以我就不希望移动  
> 如果现在距离是150，我定的距离是300,  
> 那么倍数就是0.5，我就希望它放大50%
> 
> **数学计算：**
> 
> 物体的坐标是y，我定的坐标是y1
> 
> 那么y-y1的绝对值，就是坐标相距的距离
> 
> 定的距离是d
> 
> 那么(y-y1)的绝对值/d
> 
> 上面算出了倍数
> 
> 1-倍数，
> 
> 是负数，就不放大，就是\*1
> 
> 如果是正数，就放大相应的倍数
> 
> 备注方法：
> 
> Math.Max(一个数，另一个数）
> 
> 这是选择谁大的方法，例int i =Math.Max(0，2）
> 
> 答案就是2

//这个脚本，我是打算每个方块上都挂一个的
    
        public Vector2 anchorsPositon= new Vector2(0,360);
        public Transform anvhorsPositonP;
    
        //我在选的坐标的上下150开始变化
        public float distance = 150;
        //最大变化1.5倍
        public float sizePersent = 1.5f;
    
        //记录一下初始的物体大小
        private Vector2 initialSize;
        //记录转换出来的世界坐标
        private Vector2 wordPositon;
    
        private void Start()
        {
            //这句就是记录现在这个方块是多大，宽多少，高多少
            initialSize = transform.GetComponent<RectTransform>().sizeDelta;
            //略，前面讲过了
            wordPositon = anvhorsPositonP.TransformPoint(anchorsPositon);
        }
    
        void Update()
        {
            //我知道现在这个方块的世界坐标的y
            float y = transform.position.y;
    
            //Math.Abs(y - wordPositon.y)：计算现在这个坐标离我定的坐标还多远
            //(Math.Abs(y - wordPositon.y) / distance)：计算这个距离是我希望距离的几倍
            //persent就是我最后打算放大多少
            float persent = Math.Max(0, 1 - (Math.Abs(y - wordPositon.y) / distance));
    
            //计算放大以后的宽高
            Vector2 size = initialSize + initialSize * (sizePersent - 1) * persent;
            //赋值计算好的宽高
            transform.GetComponent<RectTransform>().sizeDelta = size;
        }

**d.最后把脚本都挂到物体上**

![3d16ce5c8a80462bab7dd16d6500a260.png][]

五、现成的

以上是所有内容，但是想直接用不想看的宝这边请

如果链接打不开就是，还在被审核，因为刚发的

[https://download.csdn.net/download/weixin\_49427945/87855137][https_download.csdn.net_download_weixin_49427945_87855137]

[e3e47431e1494a71b00fcbb6b77d7bb0.gif]: https://img-blog.csdnimg.cn/e3e47431e1494a71b00fcbb6b77d7bb0.gif
[effeaa8dfa244e70bf61cfdca1a6a51f.png]: https://img-blog.csdnimg.cn/effeaa8dfa244e70bf61cfdca1a6a51f.png
[ee611b1b8c3a42f38b75fe0210b29fb5.png]: https://img-blog.csdnimg.cn/ee611b1b8c3a42f38b75fe0210b29fb5.png
[69632b54cac641eb8d358d64e15784f9.png]: https://img-blog.csdnimg.cn/69632b54cac641eb8d358d64e15784f9.png
[4ef3c99f990c455d8c98b88e75b3dddd.png]: https://img-blog.csdnimg.cn/4ef3c99f990c455d8c98b88e75b3dddd.png
[3d16ce5c8a80462bab7dd16d6500a260.png]: https://img-blog.csdnimg.cn/3d16ce5c8a80462bab7dd16d6500a260.png
[https_download.csdn.net_download_weixin_49427945_87855137]: https://download.csdn.net/download/weixin_49427945/87855137