Unity简单实现图片墙功能

最新推荐文章于 2024-12-22 21:42:40 发布

Unity官方开发者社区

最新推荐文章于 2024-12-22 21:42:40 发布

阅读量160

点赞数

本文链接：https://blog.youkuaiyun.com/unityofficial/article/details/131639916

版权

这篇博客介绍了在Unity3D中利用DoTween插件创建图片交互动画的步骤，包括图片的移动和缩放。作者分享了ChangeImages.cs脚本的实现，并展示了如何通过EventTrigger组件响应鼠标进入和离开事件，实现图片的放大、扩散及恢复效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

今天在这篇博客中介绍下我在一家公司面试时，这家给我留得机试题，其实这个功能实现起来也不是很难，我在这里做下简单的介绍，实现效果如下图所示：

步骤

一、在项目中导入DoTween插件，图片的移动和放大变化需要用到这个插件，如下图所示：

在这里插入图片描述二、编写ChangeImages.cs脚本，实现图片变化的核心功能，代码如下所示：

    
    
     
      
     
     using
     
      
     
     System
     
     .
     
     Collections
     
     ;
     
     

     
     using
     
      
     
     System
     
     .
     
     Collections
     
     .
     
     Generic
     
     ;
     
     

     
     using
     
      
     
     UnityEngine
     
     ;
     
     

     
     using
     
      
     
     DG
     
     .
     
     Tweening
     
     ;
     
     


     
     public
     
      
     
     class
     
      
     
     ToChangeImages
     
      
     
     :
     
      
     
     MonoBehaviour
     
     

     
     {
     
     
    
     
     float
     
      enlargeSize 
     
     =
     
      
     
     2.0f
     
     ;
     
     

    
     
     float
     
      radiateSize 
     
     =
     
      
     
     220
     
     ;
     
     

    
     
     Dictionary
     
     <
     
     RectTransform
     
     ,
     
      Vector2
     
     >
     
      itemPosDict 
     
     =
     
      
     
     new
     
      
     
     Dictionary
     
     <
     
     RectTransform
     
     ,
     
      Vector2
     
     >
     
     (
     
     )
     
     ;
     
     

    
     
     List
     
     <
     
     RectTransform
     
     >
     
      changedItemList 
     
     =
     
      
     
     new
     
      
     
     List
     
     <
     
     RectTransform
     
     >
     
     (
     
     )
     
     ;
     
     

    
     
     public
     
      
     
     RectTransform
     
     [
     
     ]
     
      item
     
     ;
     
      



    
     
     // Use this for initialization
     
     
    
     
     void
     
      Start 
     
     (
     
     )
     
     
    
     
     {
     
     
        
     
     StartThis
     
     (
     
     )
     
     ;
     
     
    
     
     }
     
     

    
     
     void
     
      
     
     StartThis
     
     (
     
     )
     
     
    
     
     {
     
     
        
     
     for
     
      
     
     (
     
     int
     
      i 
     
     =
     
      
     
     0
     
     ;
     
     i
     
     <
     
     item
     
     .
     
     Length
     
     ;
     
     i
     
     ++
     
     )
     
     
        
     
     {
     
     
            
     
     RectTransform
     
      item0 
     
     =
     
      item
     
     [
     
     i
     
     ]
     
     ;
     
     
            
     
     //Vector2 startPos = item0.position;
     
     
            
     
     Vector2
     
      startPos 
     
     =
     
      item0
     
     .
     
     transform
     
     .
     
     localPosition
     
     ;
     
     
            Debug
     
     .
     
     Log
     
     (
     
     startPos
     
     .
     
     ToString
     
     (
     
     )
     
     )
     
     ;
     
     
            itemPosDict
     
     .
     
     Add
     
     (
     
     item0
     
     ,
     
     startPos
     
     )
     
     ;
     
     

        
     
     }
     
     
    
     
     }
     
     

    
     
     // Update is called once per frame
     
     
    
     
     void
     
      Update 
     
     (
     
     )
     
      
     
     {
     
     

    
     
     }
     
     

    
     
     public
     
      
     
     void
     
      
     
     OnMousePointEnter
     
     (
     
     RectTransform
     
      item1
     
     )
     
     
    
     
     {
     
     
        
     
     //缓动改变中心物体的尺寸
     
     
        item1
     
     .
     
     DOScale
     
     (
     
     enlargeSize
     
     ,
     
     0.5f
     
     )
     
     ;
     
     

        
     
     Vector2
     
      pos 
     
     =
     
      itemPosDict
     
     [
     
     item1
     
     ]
     
     ;
     
     

        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
     
     [
     
     item1
     
     ]
     
      
     
     +
     
      
     
     (
     
     itemPosDict
     
     [
     
     changedItemList
     
     [
     
     i
     
     ]
     
     ]
     
      
     
     -
     
      itemPosDict
     
     [
     
     item1
     
     ]
     
     )
     
     .
     
     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
     
     )
     
     ;
     
     
        
     
     }
     
     
    
     
     }
     
     

     
     }