Unity UGUI效果 之 动态照片墙效果

最新推荐文章于 2024-05-09 14:39:02 发布
最新推荐文章于 2024-05-09 14:39:02 发布
阅读量9.6k 收藏 65
点赞数 10
分类专栏： Unity Unity UGUI 文章标签： Unity UGUI效果 照片墙效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014361280/article/details/103708865
版权

 

 

Unity UGUI效果 之 动态照片墙效果

 

目录

Unity UGUI效果 之 动态照片墙效果

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

六、相关代码

七、代码工程

 


一、简单介绍

UGUI，是Unity自带的 GUI 系统，有别于 NGUI；使用 UGUI 也能制作出比较酷炫的效果 。

照片墙效果，即是动态的生成图片，效果，选择对应的照片会变大，周边的照片自动闪开，选中的照片也有点击效果；

 

二、实现原理

1、UGUI 制作 照片预制体；

2、DoTween 实现动画效果；

3、EventTrigger 监听鼠标 进入照片、退出照片、点击照片的效果；

4、关键：动态生成照片，并记录照片的位置列表；选中的照片进行变大，并推移周边的照片，并记录到另一个列表；鼠标移开照片，照片还原，并且周边的照片回到自己的位置；

 

三、注意事项

1、本效果，可以支持 UGUI Canvas 的 Render Mode 任意形式，包括 Screen space-Overlay，Screen space-Camera，World Space

2、预制体 Image 的 Anchors 设置为 右上，Anchors 为 （ 1，1）

 

四、效果预览

 

五、实现步骤

1、打开Unity，新建一个场景，添加一个 Image ，并且添加一个子物体 Text 添加文字描述区分，如下图

最低0.47元/天 解锁文章
仙魁XAN
关注
  • 10
    点赞
  • 踩
  • 65
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
DoTween-PhotoWall-0701.unitypackage unity动态照片墙
05-16
准备照片资源 PhotoList空游戏对象 Photo ZeroPosition空游戏对象 构建UI结构 Canvas 画布 Panel空游戏对象 CurrentViewPhotolmage控件 Close Button L鲽邴､婴ft Button Right Button LeftStartPos 动态照片墙 步骤豚 1、初始化 StartPosList RightStartPos 保证照片高度一致 计算照片终点位置 起始点 照片宽度，高度 照片间隔 用字典储存照片RectTransform以及终点位置信吉 添加脚本完成逻辑 2、照片动态加载 3、照片点击 重置所有照片位置 开启照片动态移动到终点位置 将CurrentViewPhoto置于点击照片位置，并放才 CurrentViewPhoto拖拽 CurrentViewPhoto关闭 4、照片避开CurrentViewPhoto展示照片 照片移动到自身终点位置计算避开之后的目标位置照片移动到目标位置 展示照片拖拽移动
unity照片墙效果加载大量照片
02-10
1.按键盘1,2,3共3种效果切换。 2.附件有效果视频，和完整工程 3.随意替换StreamingAssets/newphotos下的图片是资源
Unity 速成技巧：使用 UIEffect 实现炫酷的 UGUI 特效
最新发布
qq_44103359的博客
05-09 462
UIEffect 是一个 Unity 插件，它扩展了 UGUI 的功能，允许开发者轻松实现各种视觉效果。它通过在 UGUI 的基础上添加一些额外的组件和功能来实现这些效果，这些组件可以直接添加到任何 UGUI 的 UI 元素上。UIEffect 是一个强大的 Unity 插件，它为 UGUI 带来了更多的视觉特效可能性。通过简单的设置和代码控制，你可以轻松实现灰度、负片和像素化等效果，从而丰富你的游戏或应用程序的用户界面。
unity 图片轮播，左右可切换
weixin_42399500的博客
08-24 4823
using DG.Tweening; using System.Collections; using System.Collections.Generic; using UnityEngine; public class PictrueMove : MonoBehaviour { public static PictrueMove instance; /// <summary> /// 每一个初始的状态 /// </summary> ...
unity3d大型互动照片墙
m0_38116456的博客
01-24 8026
1.本次应客户需求，制作一个大型照片墙互动，输出分辨率为9600*4320（注：unity3d官方推荐最大分辨率为8192*3686.4），经过现场长达24小时暴力测试中途未发生问题，姑且判定可以达到正常标准，废话不多说，先上效果。 下面列举几项用到的技术 ...
Unity简单实现图片墙功能
波波斯维奇
04-10 5720
Unity简单实现图片墙功能 前言 在做之前公司的项目中，我做过很多实现照片墙效果的功能。其中我觉得我做的效果比较好而且比较有难度的就是雀巢项目中的那个仿照apple watch拖拽效果实现的那个照片墙功能。这个项目我在之前的博客中已经做过简单的介绍了，在这里不在赘述。今天在这篇博客中介绍下我在一家公司面试时，这家给我留得机试题，其实这个功能实现起来也不是很难，我在这里做下简单的介绍，实现效果如下图所示： 步骤 一、在项目中导入DoTween插件，图片的移动和放大变化需要用到这个插件，如下图所示： 二、编
Unity3D照片墙工程
09-18
Unity3D照片墙工程
3D动画效果照片墙demo
02-07
3D动画效果照片墙demo代码
Unity3D 互动照片墙
m0_46363155的博客
08-09 3281
最近看见一个花里胡哨的效果 在B站搜到了好多类似的，但是都没说怎么实现 然后发现居然有人在assetstore上卖50刀，我人傻了 研究了半天研究出来个差不多的 如果有需要可以联系我VX ling66154
Unity UGUI Photo Wall 照片墙效果
12-26
Unity UGUI Photo Wall 照片墙效果 1、里面包含DoTween 插件； 2、导入Unity，里面有完整测试工程； 3、Unity UGUI 实现； 4、可以支持 UGUI Canvas 的 Render Mode 任意形式，包括 Screen space-Overlay，Screen space-Camera，World Space；
Unity用插件CSharpCompilerOptions
11-14
好像用了反而不像没用，会写死一些config，自动化构建，规范化管理有点用吧，民间流传的插件 define symbols 管理用（player setting in Unity Editor)
超酷的照片墙展示效果
12-21
描述：结合淡入淡出、旋转、缩放、倾斜及3D效果，照片快速左侧切入，旋转3D效果. 参考示例：http://www.jq22.com/jquery-info5225
Unity3D中实现3D照片墙
03-09
Unity3D中实现3D照片墙。。。 教程在https://blog.csdn.net/q764424567/article/details/123368231
Unity UGUI翻书效果插件
11-21
Unity 使用UGUI模拟翻书效果的插件，资源内有案例场景，有多种效果
Unity UGUI字幕滚动效果
04-03
当文字长度小于边框时保持在边框的中间，长度大于边框时来回滚动 创建： - 创建一个Image并调整大小 ...代码使用了动态添加组件，确保组件能正常使用 注意： 代码是根据RectTransform的宽高或位置进行自适应
Unity3D UGUI特效之Image高斯模糊效果
12-31
第二个是凸显弹框效果的，将背景都模糊掉，自己将这个稍微加强了些可以指定模糊一个位置。 针对移动平台，使用高斯模糊，其实效率不是很高，如果要很好的效果，那么速度卡；如果要速度快，那么效果达不到要求。但是...
Unity UGUI教程之实现滑页效果
01-01
使用UGUI提供的ScrollRect和ScrollBar组件实现基本滑动以及自己控制每次移动一页来达到滑页的效果。 实现过程 1.创建两个panel，上面的panel用于显示，下面的panel用于存放按钮 2.在TopPanel上添加ScrollRect脚本，...
unity 照片墙 流动 排斥 引力
cq786的博客
09-23 2466
#Unity #雷达 #照片墙 unity 照片墙 最近有一个项目需要一个照片墙效果 在B站搜到了好多类似的，但是都没说怎么实现 有一个up留下一个基本算法 研究了半天研究出来个差不多的 相关参数 展示图片及demo下载链接 Demo链接:https://pan.baidu.com/s/1nSHbOhYeJiyhRYabRSWAXQ 提取码：gech 核心实现代码 ...
Unity炫酷照片墙
weixin_39341958的博客
12-22 173
https://www.bilibili.com/video/BV12i4y1a7SX/
Unity UGUI 效果 之 多页翻页，多页任意翻页的简单效果实现
05-26
实现多页翻页和多页任意翻页的方式有很多种，下面介绍一种较为简单的实现方式。 1. 创建一个 ScrollRect 对象，并将 Content 对象的 Rect Transform 的 Anchor Presets 设置为 Stretch。 2. 在 Content 下创建多个 Page 对象，并将它们的 Rect Transform 的 Anchor Presets 设置为 Stretch。每个 Page 对象都应该放置一个要显示的 UI 元素。 3. 为 ScrollRect 添加一个 Horizontal Layout Group 组件，并将 Child Force Expand 和 Child Control Height 设置为 true。 4. 在代码中添加以下代码，实现多页翻页和多页任意翻页的效果： ```csharp using UnityEngine; using UnityEngine.UI; using UnityEngine.EventSystems; using System.Collections.Generic; public class ScrollRectPage : MonoBehaviour, IBeginDragHandler, IEndDragHandler { public ScrollRect scrollRect; public float smoothTime = 0.5f; public float sensitivity = 0.2f; private List<float> pages = new List<float>(); private int currentPage = 0; private float targetPage = 0; private bool isDragging = false; void Start() { int pageCount = scrollRect.content.childCount; for (int i = 0; i < pageCount; i++) { float page = i * scrollRect.viewport.rect.width / (pageCount - 1); pages.Add(-page); } } void Update() { if (!isDragging) { float nearestPage = pages[currentPage]; for (int i = 0; i < pages.Count; i++) { if (Mathf.Abs(pages[i] - scrollRect.horizontalNormalizedPosition) < Mathf.Abs(nearestPage - scrollRect.horizontalNormalizedPosition)) { nearestPage = pages[i]; targetPage = i; } } if (currentPage != targetPage) { currentPage = (int)targetPage; } scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, nearestPage, smoothTime * Time.deltaTime); } } public void OnBeginDrag(PointerEventData eventData) { isDragging = true; } public void OnEndDrag(PointerEventData eventData) { isDragging = false; float delta = eventData.delta.x / scrollRect.viewport.rect.width; if (Mathf.Abs(delta) > sensitivity) { if (delta > 0) { currentPage--; } else { currentPage++; } } currentPage = Mathf.Clamp(currentPage, 0, pages.Count - 1); targetPage = currentPage; } } ``` 5. 将 ScrollRectPage 脚本挂载到 ScrollRect 对象上，并将 scrollRect 属性设置为 ScrollRect 对象。 6. 运行程序，就可以实现多页翻页和多页任意翻页的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙魁XAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值