找回密码
 注册帐号

扫一扫,访问微社区

网虫虫 Unity使用DoTween实现照片墙效果

450
回复
13140
查看
  [ 复制链接 ]
排名
1761
昨日变化

40

主题

203

帖子

2106

积分

Rank: 9Rank: 9Rank: 9

UID
178893
好友
14
蛮牛币
2519
威望
0
注册时间
2016-10-28
在线时间
835 小时
最后登录
2019-11-13

专栏作家

2017-12-4 10:54:18 显示全部楼层 阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
本帖最后由 网虫虫 于 2017-12-5 11:28 编辑

之前Gif图太大,不能预览,已经替换成小图了~~~
前几天帮一个学生实现的照片墙的效果,分享给大家~~
效果:
脚本:
[C#] 纯文本查看 复制代码
using DG.Tweening;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
 
public class MyTest : MonoBehaviour {
 
    public RectTransform prefab;
 
    int row = 10;       // 行
    int column = 20;        // 列
 
    int startXPos = 60;
    int startZPos = -100;
 
    float distanceRandomMinX = 55;
    float distanceRandomMaxX = 65;
 
    float distanceRandomMinY = 60;
    float distanceRandomMaxY = 60;
 
    float initMoveDistance = 1200;
 
    float enlargeSize = 5;
 
    float radiateSize = 220;
 
    List<List<RectTransform>> goList;
    Dictionary<RectTransform, Vector2> itemPosDict;
    List<RectTransform> changedItemList;
 
    // Use this for initialization
    void Start () {
 
        goList = new List<List<RectTransform>>();
        itemPosDict = new Dictionary<RectTransform, Vector2>();
        changedItemList = new List<RectTransform>();
 
        CreateGos();
    }
 
 
    void CreateGos()
    {
        // 生成所有物体,并添加到字典
        for (int i = 0; i < row; i++)
        {
            List<RectTransform> gos = new List<RectTransform>();
            goList.Add(gos);
            float lastPosX = 0;
            for (int j = 0; j < column; j++)
            {
                RectTransform item = (Instantiate(prefab.gameObject) as GameObject).GetComponent<RectTransform>();
                item.name = i + " " + j;
                item.transform.SetParent(transform);
                Vector2 startPos = new Vector3(Random.Range(distanceRandomMinX, distanceRandomMaxX) + lastPosX, startZPos - i * Random.Range(distanceRandomMinY, distanceRandomMaxY));
                item.anchoredPosition = startPos;
                Vector2 endPos = new Vector3(startPos.x - initMoveDistance, startZPos - i * Random.Range(distanceRandomMinY, distanceRandomMaxY));
                Tweener tweener = item.DOAnchorPosX(endPos.x, Random.Range(1.8f, 2f));  // 缓动到目标位置
                tweener.SetDelay(j * 0.1f + (row - i) * 0.1f);      // 延时
                tweener.SetEase(Ease.InSine);           // 缓动效果
                item.gameObject.SetActive(true);
                gos.Add(item);
                itemPosDict.Add(item, endPos);
 
                lastPosX = item.anchoredPosition.x;
            }
        }
    }
 
 
    public void OnMousePointEnter(RectTransform item)
    {
        // 缓动改变中心物体尺寸
        item.DOScale(enlargeSize, 0.5f);
 
        Vector2 pos = itemPosDict[item];
 
        changedItemList = new List<RectTransform>();
 
        // 添加扩散物体到集合
        foreach (KeyValuePair<RectTransform, Vector2> i in itemPosDict)
        {
            if(Vector2.Distance(i.Value, pos) < radiateSize)
            {
                changedItemList.Add(i.Key);
            }
        }
 
        // 缓动来解决扩散物体的动画
        for (int i = 0; i < changedItemList.Count; i++)
        {
            Vector2 targetPos = itemPosDict[item] + (itemPosDict[changedItemList[i]] - itemPosDict[item]).normalized * radiateSize;
            changedItemList[i].DOAnchorPos(targetPos, 0.8f);
        }
    }
 
    public void OnMousePointExit(RectTransform go)
    {
        // 缓动恢复中心物体尺寸
        go.DOScale(1, 1);
        // 缓动将扩散物体恢复到初始位置
        for (int i = 0; i < changedItemList.Count; i++)
        {
            changedItemList[i].DOAnchorPos(itemPosDict[changedItemList[i]], 0.8f);
        }
    }
}

GitHub下载地址:
游客,如果您要查看本帖隐藏内容请回复

参与人数 2鲜花 +14 收起 理由
暮呈晨曦 + 4 这个效果看着还不错
lilexy + 10 很给力!效果图貌似不动,哈哈

查看全部评分总评分 : 鲜花 +14

回复

使用道具 举报

7日久生情
4409/5000
排名
2320
昨日变化

5

主题

3109

帖子

4409

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
209186
好友
5
蛮牛币
1181
威望
0
注册时间
2017-3-1
在线时间
684 小时
最后登录
2019-10-14
2017-12-4 11:11:49 显示全部楼层
谢谢分享
回复

使用道具 举报

排名
39864
昨日变化

0

主题

7

帖子

18

积分

Rank: 1

UID
219852
好友
0
蛮牛币
38
威望
0
注册时间
2017-7-7
在线时间
5 小时
最后登录
2017-12-4
2017-12-4 11:44:33 显示全部楼层
xiexie fengxiang
回复 支持 反对

使用道具 举报

5熟悉之中
566/1000
排名
7196
昨日变化

0

主题

69

帖子

566

积分

Rank: 5Rank: 5

UID
152963
好友
0
蛮牛币
2
威望
0
注册时间
2016-6-21
在线时间
318 小时
最后登录
2019-11-12
2017-12-4 11:52:39 显示全部楼层
Unity使用DoTween实现照片墙效果
回复 支持 反对

使用道具 举报

排名
64938
昨日变化

0

主题

5

帖子

17

积分

Rank: 1

UID
252339
好友
0
蛮牛币
45
威望
0
注册时间
2017-11-3
在线时间
10 小时
最后登录
2018-5-30
2017-12-4 13:01:24 显示全部楼层
Unity使用DoTween实现照片墙效果
回复 支持 反对

使用道具 举报

5熟悉之中
545/1000
排名
5176
昨日变化

0

主题

71

帖子

545

积分

Rank: 5Rank: 5

UID
35683
好友
0
蛮牛币
378
威望
0
注册时间
2014-7-22
在线时间
196 小时
最后登录
2019-11-12
2017-12-4 13:45:05 显示全部楼层
atest thanks
回复

使用道具 举报

7日久生情
1831/5000
排名
1771
昨日变化

4

主题

302

帖子

1831

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
98190
好友
3
蛮牛币
3519
威望
0
注册时间
2015-5-7
在线时间
780 小时
最后登录
2018-8-8
2017-12-4 14:00:03 显示全部楼层
看看效果怎么样。。。
回复

使用道具 举报

5熟悉之中
546/1000
排名
5714
昨日变化

0

主题

90

帖子

546

积分

Rank: 5Rank: 5

UID
47213
好友
0
蛮牛币
797
威望
0
注册时间
2014-9-29
在线时间
210 小时
最后登录
2019-8-6
QQ
2017-12-4 14:08:32 显示全部楼层

谢谢分享
回复

使用道具 举报

5熟悉之中
726/1000
排名
3797
昨日变化

3

主题

113

帖子

726

积分

Rank: 5Rank: 5

UID
1528
好友
1
蛮牛币
329
威望
0
注册时间
2013-8-5
在线时间
214 小时
最后登录
2019-9-17
2017-12-4 15:17:00 显示全部楼层
谢谢分享
回复

使用道具 举报

5熟悉之中
713/1000
排名
3902
昨日变化

0

主题

26

帖子

713

积分

Rank: 5Rank: 5

UID
81671
好友
1
蛮牛币
1012
威望
0
注册时间
2015-3-18
在线时间
303 小时
最后登录
2018-12-20
QQ
2017-12-4 15:31:46 显示全部楼层
那么效果呢?静态图啊
回复 支持 反对

使用道具 举报

7日久生情
2045/5000
排名
861
昨日变化

1

主题

128

帖子

2045

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
64809
好友
1
蛮牛币
2590
威望
0
注册时间
2014-12-31
在线时间
757 小时
最后登录
2019-11-4
2017-12-4 15:45:52 显示全部楼层
Unity使用DoTween实现照片墙效果
回复 支持 反对

使用道具 举报

排名
1761
昨日变化

40

主题

203

帖子

2106

积分

Rank: 9Rank: 9Rank: 9

UID
178893
好友
14
蛮牛币
2519
威望
0
注册时间
2016-10-28
在线时间
835 小时
最后登录
2019-11-13

专栏作家

楼主 2017-12-4 15:46:24 显示全部楼层
gaoxinliang 发表于 2017-12-4 15:31
那么效果呢?静态图啊

动态图  就是图有点大 2m 点开看应该可以
回复 支持 反对

使用道具 举报

7日久生情
3927/5000
排名
1487
昨日变化

0

主题

2151

帖子

3927

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
219676
好友
1
蛮牛币
4616
威望
0
注册时间
2017-7-12
在线时间
922 小时
最后登录
2019-11-15

活力之星

2017-12-4 16:03:59 显示全部楼层
感谢分享
回复

使用道具 举报

5熟悉之中
827/1000
排名
3867
昨日变化

0

主题

101

帖子

827

积分

Rank: 5Rank: 5

UID
765
好友
3
蛮牛币
295
威望
0
注册时间
2013-7-11
在线时间
338 小时
最后登录
2019-10-13
2017-12-4 17:47:10 显示全部楼层
应该多弄几张图的
回复 支持 反对

使用道具 举报

6蛮牛粉丝
1490/1500
排名
2423
昨日变化

11

主题

316

帖子

1490

积分

Rank: 6Rank: 6Rank: 6

UID
208404
好友
2
蛮牛币
7729
威望
0
注册时间
2017-2-24
在线时间
564 小时
最后登录
2019-11-15
2017-12-4 18:31:46 来自Mobile--- 显示全部楼层
感谢分享,正好用到
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则