找回密碼
 注冊帳號

掃一掃,訪問微社區

網蟲蟲 Unity使用DoTween實現照片墻效果

554
回復
17141
查看
打印 上一主題 下一主題
  [ 復制鏈接 ]
排名
1759
昨日變化

41

主題

202

帖子

2122

積分

Rank: 9Rank: 9Rank: 9

UID
178893
好友
14
蠻牛幣
2363
威望
0
注冊時間
2016-10-28
在線時間
851 小時
最后登錄
2020-7-4

專欄作家

馬上注冊,結交更多好友,享用更多功能,讓你輕松玩轉社區。

您需要 登錄 才可以下載或查看,沒有帳號?注冊帳號

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日久生情
4411/5000
排名
2318
昨日變化

5

主題

3083

帖子

4411

積分

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

UID
209186
好友
5
蠻牛幣
1182
威望
0
注冊時間
2017-3-1
在線時間
685 小時
最后登錄
2019-11-27
沙發
2017-12-4 11:11:49 只看該作者
謝謝分享
回復

使用道具 舉報

排名
39866
昨日變化
1

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熟悉之中
642/1000
排名
7194
昨日變化

0

主題

75

帖子

642

積分

Rank: 5Rank: 5

UID
152963
好友
0
蠻牛幣
109
威望
0
注冊時間
2016-6-21
在線時間
387 小時
最后登錄
2020-6-16
地板
2017-12-4 11:52:39 只看該作者
Unity使用DoTween實現照片墻效果
回復 支持 反對

使用道具 舉報

排名
64946
昨日變化

0

主題

8

帖子

22

積分

Rank: 1

UID
252339
好友
0
蠻牛幣
36
威望
0
注冊時間
2017-11-3
在線時間
12 小時
最后登錄
2019-12-2
5#
2017-12-4 13:01:24 只看該作者
Unity使用DoTween實現照片墻效果
回復 支持 反對

使用道具 舉報

5熟悉之中
545/1000
排名
5174
昨日變化

0

主題

69

帖子

545

積分

Rank: 5Rank: 5

UID
35683
好友
0
蠻牛幣
375
威望
0
注冊時間
2014-7-22
在線時間
197 小時
最后登錄
2019-12-26
6#
2017-12-4 13:45:05 只看該作者
atest thanks
回復

使用道具 舉報

7日久生情
1831/5000
排名
1769
昨日變化

4

主題

299

帖子

1831

積分

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

UID
98190
好友
3
蠻牛幣
3519
威望
0
注冊時間
2015-5-7
在線時間
780 小時
最后登錄
2018-8-8
7#
2017-12-4 14:00:03 只看該作者
看看效果怎么樣。。。
回復

使用道具 舉報

5熟悉之中
548/1000
排名
5712
昨日變化

0

主題

89

帖子

548

積分

Rank: 5Rank: 5

UID
47213
好友
0
蠻牛幣
794
威望
0
注冊時間
2014-9-29
在線時間
213 小時
最后登錄
2020-4-22
QQ
8#
2017-12-4 14:08:32 只看該作者

謝謝分享
回復

使用道具 舉報

5熟悉之中
727/1000
排名
3795
昨日變化

3

主題

110

帖子

727

積分

Rank: 5Rank: 5

UID
1528
好友
1
蠻牛幣
331
威望
0
注冊時間
2013-8-5
在線時間
215 小時
最后登錄
2020-5-6
9#
2017-12-4 15:17:00 只看該作者
謝謝分享
回復

使用道具 舉報

5熟悉之中
713/1000
排名
3900
昨日變化

0

主題

26

帖子

713

積分

Rank: 5Rank: 5

UID
81671
好友
1
蠻牛幣
1012
威望
0
注冊時間
2015-3-18
在線時間
303 小時
最后登錄
2018-12-20
QQ
10#
2017-12-4 15:31:46 只看該作者
那么效果呢?靜態圖啊
回復 支持 反對

使用道具 舉報

7日久生情
2287/5000
排名
859
昨日變化

1

主題

128

帖子

2287

積分

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

UID
64809
好友
1
蠻牛幣
2659
威望
0
注冊時間
2014-12-31
在線時間
998 小時
最后登錄
2020-7-7
11#
2017-12-4 15:45:52 只看該作者
Unity使用DoTween實現照片墻效果
回復 支持 反對

使用道具 舉報

排名
1759
昨日變化

41

主題

202

帖子

2122

積分

Rank: 9Rank: 9Rank: 9

UID
178893
好友
14
蠻牛幣
2363
威望
0
注冊時間
2016-10-28
在線時間
851 小時
最后登錄
2020-7-4

專欄作家

12#
樓主 2017-12-4 15:46:24 只看該作者
gaoxinliang 發表于 2017-12-4 15:31
那么效果呢?靜態圖啊

動態圖  就是圖有點大 2m 點開看應該可以
回復 支持 反對

使用道具 舉報

7日久生情
4403/5000
排名
1485
昨日變化

0

主題

2147

帖子

4403

積分

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

UID
219676
好友
1
蠻牛幣
5851
威望
0
注冊時間
2017-7-12
在線時間
1402 小時
最后登錄
2020-7-6

活力之星

13#
2017-12-4 16:03:59 只看該作者
感謝分享
回復

使用道具 舉報

5熟悉之中
850/1000
排名
3865
昨日變化

0

主題

103

帖子

850

積分

Rank: 5Rank: 5

UID
765
好友
3
蠻牛幣
260
威望
0
注冊時間
2013-7-11
在線時間
358 小時
最后登錄
2020-6-10
14#
2017-12-4 17:47:10 只看該作者
應該多弄幾張圖的
回復 支持 反對

使用道具 舉報

7日久生情
1615/5000
排名
2421
昨日變化

11

主題

329

帖子

1615

積分

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

UID
208404
好友
3
蠻牛幣
8901
威望
0
注冊時間
2017-2-24
在線時間
675 小時
最后登錄
2020-7-6
15#
2017-12-4 18:31:46 來自Mobile--- 只看該作者
感謝分享,正好用到
回復 支持 反對

使用道具 舉報

您需要登錄后才可以回帖 登錄 | 注冊帳號

本版積分規則

湖北快三开奖走势图 k7大圣闹海捕鱼游戏 河南快三开奖视频 平肖固定算法公式 贵阳川麻将 1950的时时彩平台 北京pk拾是正规的吗 pc蛋蛋群 手机怎么查股票代码 香港12生肖49号码图片 北京pk拾彩票网官网app