2.5D玻璃_百度百科
清除历史记录关闭
声明：百科词条人人可编辑，词条创建和修改均免费，绝不存在官方及代理商付费代编，请勿上当受骗。
2.5D玻璃屏幕是在玻璃的中心有一个平面的区域，然后在平面玻璃的基础上对边缘进行了处理。现在运用2.5D弧面玻璃屏幕的越来越多，因为应用2.5D玻璃屏幕能够使手机表面外观就如同盈而不溢的水滴，所以2.5D玻璃屏幕又称之为水滴屏。
2.5D玻璃概念
传统意义上的是平的，无论选择玻璃上任何一个点，它都应该是和玻璃上其他的点在同一个上。而2.5D玻璃和普通最大的区别在于这种玻璃尽管正面也是平的，但是在的部分会向下凹陷成一个弧形。
2.5D玻璃区分
2D是平的，无论选择玻璃上任何一个点，它都应该是和玻璃上其他的点在同一个平面上。
指的是屏幕保护玻璃的弧度。
2.5D玻璃是在玻璃的中心有一个平面的区域，然后在平面玻璃的基础上对边缘进行了弧度处理。
3D玻璃是指那种整个表面都具备弧度的。
2.5D玻璃优势
2.5D玻璃屏幕的最主要的作用在于提升屏幕和机身整体的视觉效果，提升手感。在手机屏幕表面覆上一块2.5D的弧面玻璃，能够使手机表面外观就如同盈而不溢的水滴，更具视觉张力，为手机屏幕的视觉表现力加分不少。而在实际使用中，单手握持并以大拇指来滑动屏幕的操作方式出现几率很高，而当使用者采用这种姿势时，大拇指的滑动并非平面而是一个弧形，因此2.5D屏的弧面造型更加符合人体工程学原理。
．腾讯网[引用日期]
清除历史记录关闭扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
当前位置： &
查看: 1804|回复: 10
UGUI如何实现3D旋转特效？
4354/500排名<font color="#FF昨日变化10主题帖子积分
四处流浪, 积分 354, 距离下一级还需 146 积分
四处流浪, 积分 354, 距离下一级还需 146 积分
蛮牛币1007
在线时间52 小时
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
才可以下载或查看，没有帐号？
首先，我们先来对这个需求进行分析，从这篇文章的题目我们获得的一个关键信息是，希望通过某种方式实现3D滚动特效。因此我们首先要解决的一个是，我们应该采用方式来实现还是采用3D方式来实现这种界面效果。我们假定这里希望实现的效果如下图所示，我们可以注意到从这张图片的设计初衷来看，它更像是一种介绍产品特性的文案设计，我们这里仅仅是想通过这张图告诉大家，我们需要实现一个什么样的效果。软件开发过程中最大的成本在我看来主要来自沟通。因为事实上对普通用户而言技术并不重要，重要的是能否实现用户想要的功能，可是大部分情形是用户并不知道自己想要什么，除非你将实际的产品放到用户眼前甚至手中。好了，在对需求有了一个基本的印象以后，我们来思考如何实现这个需求。
具体来讲，我们有两种思路：
* 其一是采用真实的3D来制作，即我们通过一个圆柱体或者是多棱柱将图片”粘贴”在不同的面上，通过对圆柱体或者多棱柱进行旋转，然后以真实的3D的形式来呈现给用户。
* 其二是采用伪3D来制作，即我们通过在2D平面内对图片的层次进行合理化调整实现伪3D效果，配合插值、缩放等技巧来实现2D平面上的旋转，然后给用户一种视觉上的3D效果。
1.png (252.55 KB, 下载次数: 0)
10:20 上传
在这里我们选择采用伪3D来制作，为什么选择这种方案呢？因为它简单啊，哈哈。好了，我们现在将实际的需求进行抽象，我们会发现什么呢？我们注意到这本质上是一个曲线问题，我们可以将每个图片的中心用平滑的曲线连接起来，然后我们就得到了一条抛物线或者是圆锥曲线或者是贝塞尔曲线，在这里我们将其理解为什么样的曲线并不重要，因为这最终影响到的是曲线的平滑度问题，即细节上的调整。沿着这个思路，我们就意识到，这是一个根据曲线平均分布坐标点的过程，假设我们这里5张图片，并且曲线在中间位置可以找到一条垂直的对称轴，那么我们只需要将这5个点在水平方向上平均分布即可，事实上根据人类视觉的特点，这个距离应该是越来越小的，就像我们看到的一排并列的树木，越远的地方它们的间距会越来越小，而事实上它们的间距是一样的，根据这个特性我们可以表现出这种视觉上的纵深的感觉，在实际项目中它取决于美术设定和策划设定，我们这里就从最简单的情况开始分析。
好了，在解决了精灵放置的这个问题以后，我们接下来要解决的是什么呢？答案是精灵的层级，因为层级能够帮助我们营造一种视觉上的层次感和立体感，比如在跑酷游戏中我们常常使用视差滚动这种技术来表现3D效果，以及传统的斜45度瓦片地图来实现2.5D效果都是使用2D来模拟3D效果的经典案例。所以在这里除了确定每个精灵的放置位置以外，我们还有一个问题，如何对这些精灵进行排序，所幸的是在uGUI中我们可以通过SetSiblingIndex方法来设置一个精灵的深度，当每次通过按钮切换精灵的时候，我们都需要对所有精灵重新计算坐标和深度，而为了更好的视觉表现力，我们可以在切换的时候做一个简单的位移动画，至此我们就可以开始动手实现功能啦。
首先我们来搭建一个基本的场景，我们这里将一切浮华褪尽，我们可以看到在场景中有两个按钮，它们可以让我们当前选中的卡片，而界面底部的标签会显示我们当前选择的角色名称。虽然在这里采用触屏滑动的效果更好，可我们这里主要的目的是为了说明如何实现我们的思路，当引入这部分功能的设计以后，会增加大家在整体理解上的难度，所以我们这里以快速实现功能为主。注意到场景中的卡片此时都是相当“任性”地放置在界面上，这是因为我们稍后会采用算法计算每个卡片的实际位置，所以在这里完全可以忽略其“美观性”。
2.png (153.16 KB, 下载次数: 6)
10:21 上传
这里，我们设定场景的大小为800x460，那么在这种情况下，我们可以按照下面图中所示的曲线轨迹来构造一条曲线，考虑到椭圆方程比贝塞尔曲线更加简单易用，所以我们这里选择椭圆方程来作为场景中这些卡片排列的曲线方程。
3.png (250.83 KB, 下载次数: 0)
10:22 上传
此时以屏幕中心为原点构建平面直角坐标系，则这个椭圆是一个以长轴2A=400、短轴2B=640、中心在(0,320)上的椭圆。根据这个原理，我们可以将其代码实现分为三个步骤来实现。首先，我们将场景中的所有卡片存储在GameObject数组中，这里我们这里规定卡片的数目必须为奇数，然后我们从左到右依次计算每个卡片的位置和深度，这样就可以让卡片按照我们期望的方式进行排列啦。下面一起来看代码如何实现：
[C#] 纯文本查看 复制代码//初始化精灵数组
int childCount = transform.childC
//计算两侧精灵数目
halfSize = (childCount-1)/2;
//初始化精灵
sprites = new GameObject[childCount];
for(int i=0;i&childCi++)
sprites[i] = transform.GetChild(i).gameO
SetPosition(i);
SetDeepin(i);
这里sprites显然是一个GameObject[],因为卡片的数目为奇数个，所以halfSize是指中间位置卡片的索引，这里需要两个辅助方法，SetPosition和SetDeepin，从名字我们就知道这两个方法分别是设置卡片位置和设置卡片深度。当我们提到代码注释的时候，好多人以代码自注释为理解逃避注释，孰不知这建立在命名规范的基础上，如果你连这点基本的要求都做不到，我建议你还是多写点注释、少写点代码。好了，这两个方法的实现细节如下：
[C#] 纯文本查看 复制代码/// &summary&
/// 设置精灵位置
/// &/summary&
private void SetPosition(int index)
//计算第index个精灵的角度
float angle = 0.0f;
if (index & halfSize) {
angle = startAngle - (halfSize - index) * DeltaA
} else if (index & halfSize) {
angle = startAngle + (index - halfSize) * DeltaA
angle = startA
//计算第index个精灵的坐标
float x = A* Mathf.Cos((angle/180) * Mathf.PI) + Center.x;
float y = B* Mathf.Sin((angle/180) * Mathf.PI) + Center.y;
Vector3 v3 = Camera.main.WorldToScreenPoint(new Vector3(x,y,0));
v3 = Camera.main.ScreenToWorldPoint(v3);
Vector2 v2 = new Vector2(v3.x,v3.y);
sprites[index].GetComponent&RectTransform&().anchoredPosition = v2;
可以注意到，在这里我们根据精灵索引index和两侧精灵数目halfSize的关系，按照DeltaAngle这个增量来计算每个精灵实际的角度，在此基础上结合椭圆的参数方程，我们可以非常容易地计算出每个精灵实际的位置，这样就可以保证精灵中心都在椭圆曲线上。好了，接下来我们会遇到一个新的问题，这些精灵的层级应该是从中间位置向两边依次递减的，所以为了解决这个问题，我们还需要对每个精灵的层级进行计算，这部分代码的实现细节如下：
[C#] 纯文本查看 复制代码/// &summary&
/// 设置精灵深度
/// &/summary&
private void SetDeepin(int index)
//计算精灵深度
int deepin = 0;
if(index&halfSize){
}else if(index&halfSize){
deepin = sprites.Length-(1+index);
deepin = halfS
sprites[index].GetComponent&RectTransform&().SetSiblingIndex(deepin);
事实上，我在这里并不清楚SetSiblingIndex这个方法的真正作用:)，可是它的确能够实现我们想要的功能。有时候在维护一个古老的项目的时候，可能你会在代码中看到各种有趣的注释，而这些注释中有相当一些都充满了一种“形而上学”的味道在里面，我们不知道这个世界为什么会是这样，可是看起来它们都运行地非常良好。或许这就是这个世界的奇妙之处，无论我们是否想要尝试打破这些规则，这个世界上总是有些我们难以理解的东西存在，可是存在即合理，不是吗？理性思维的缺陷在于想要为一切问题找到一个答案，所以这次苏格拉没有底，我们就感性一次又何妨呢，这个问题就让它没有答案吧！
现在，显然我们需要解决一个新的问题，就像上帝在我们关上一扇门的同时，会为我们开启一扇窗口。理论上任何问题都可以通过引入一个中间层来解决，而引入中间层的同时毫无疑问地引入了一个新的问题。在这里我们已经完成了让所有精灵按照椭圆曲线进行排布以及精灵的层级关系这两个问题，可是我们这是一个静态的过程啊，我们需要的是让它能够滚动起来，所以怎么解决这个问题呢？我们可以注意到的一点是，精灵的这种“滚动”效果，实际上是将数组中的第一个元素sprites[0]或者最后一个元素sprites[sprites.Length-1]，依次和数组中的第i个元素进行交换。比如精灵整体向右侧“滚动”，我们只需要从第一个元素开始依次和最后一个元素进行交换就可以啦，所以这里的实现实际上是：
[C#] 纯文本查看 复制代码/// &summary&
/// 向后翻页
/// &/summary&
public void OnNext()
int length = sprites.L
for(int i=0;i&i++)
GameObject temp = sprites[i];
sprites[i] = sprites[length-1];
sprites[length-1] =
for(int i=0;i&i++)
SetPosition(i);
SetDeepin(i);
我们在对数组内的元素重新组织后，需要重新计算每个精灵的位置和深度。我这里在思考的一个问题是：精灵的位置和深度实际上是确定的，所以我们可以考虑将它们存储起来“复用”，这样可以减少每次的重复计算。其实，代码的优化和重构是一个需要时间来酝酿的过程，没有人能够在写代码的时候，就可以意识到代码中的瑕疵，而这种发现问题的眼光通常需要长时间的培养，这是我们之所以提倡不要过早优化的原因，除非你能够快速地找到代码中的优化点。好了，现在采用类似的思路，我们可以实现向前翻页的逻辑啦，这里的代码非常简单不再赘述。
本文介绍了一种基于曲线方程来构建伪3D效果的思路，主要借助椭圆的参数方程来计算精灵位置，使其实现按照椭圆曲线进行排布的效果，在此基础上配合层级调整、插值、缩放等技巧，在一定程度上可以实现2D平面内的伪3D旋转效果。因为博主身患拖延症晚期，所以这篇文章在拖延了很久以后，终于成功的成为了一个没有填完的坑，不过我相信掌握原理比获取代码更为重要，所以这篇文章更多的是希望能给大家提供相关思路。
每日推荐：
61446/1500排名<font color="#FF昨日变化8主题帖子积分
蛮牛粉丝, 积分 1446, 距离下一级还需 54 积分
蛮牛粉丝, 积分 1446, 距离下一级还需 54 积分
蛮牛币8245
在线时间566 小时
楼主能把工程也一起发下吗&&无限感激
每日推荐：
61138/1500排名<font color="#FF昨日变化1主题帖子积分
蛮牛粉丝, 积分 1138, 距离下一级还需 362 积分
蛮牛粉丝, 积分 1138, 距离下一级还需 362 积分
蛮牛币1849
在线时间225 小时
每日推荐：
71548/5000排名<font color="#FF昨日变化1主题帖子积分
日久生情, 积分 1548, 距离下一级还需 3452 积分
日久生情, 积分 1548, 距离下一级还需 3452 积分
蛮牛币3076
在线时间440 小时
文笔真好，娓娓道来，功力深厚！
每日推荐：
12/50主题帖子积分
注册看看, 积分 2, 距离下一级还需 48 积分
注册看看, 积分 2, 距离下一级还需 48 积分
在线时间1 小时
sprites = new GameObject[childCount];提示无法隐式转换。。。
每日推荐：
5834/1000排名<font color="#FF昨日变化3主题帖子积分
熟悉之中, 积分 834, 距离下一级还需 166 积分
熟悉之中, 积分 834, 距离下一级还需 166 积分
蛮牛币1302
在线时间258 小时
本帖最后由 wakingman 于
18:14 编辑
每日推荐：
5834/1000排名<font color="#FF昨日变化3主题帖子积分
熟悉之中, 积分 834, 距离下一级还需 166 积分
熟悉之中, 积分 834, 距离下一级还需 166 积分
蛮牛币1302
在线时间258 小时
赞！这里也有一个类似的，旋转效果
每日推荐：
263/150排名<font color="#FF昨日变化18主题帖子积分
初来乍到, 积分 63, 距离下一级还需 87 积分
初来乍到, 积分 63, 距离下一级还需 87 积分
在线时间20 小时
楼主知道那种具有惯性的滑动是怎么做出来的吗?
每日推荐：
5628/1000排名<font color="#FF昨日变化25主题帖子积分
熟悉之中, 积分 628, 距离下一级还需 372 积分
熟悉之中, 积分 628, 距离下一级还需 372 积分
蛮牛币1298
在线时间186 小时
必须赞个，给力
每日推荐：
5733/1000排名<font color="#FF昨日变化3主题帖子积分
熟悉之中, 积分 733, 距离下一级还需 267 积分
熟悉之中, 积分 733, 距离下一级还需 267 积分
在线时间204 小时
每日推荐：
3161/300排名<font color="#FF昨日变化130主题帖子积分
偶尔光临, 积分 161, 距离下一级还需 139 积分
偶尔光临, 积分 161, 距离下一级还需 139 积分
在线时间59 小时
哪里结合椭圆方程了
每日推荐：2.7 中心点和旋转的结合使用_百度文库温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
我想显示为如下效果的pdf文件（2D）：
这里可以使用两种方法实现。
一种方法是把平面图挤压为三维图，进行3D仿射变换，然后使用2DForcer转换器转换为2D图形就可以达到要求的效果。操作过程如下：
在源数据后面添加转换器Extruder指定一定高度，设置如下：
这样就可以把2D图形转换为3D图形，但是我们是在Z轴方向上增加的厚度，在2D环境中看不出3D效果，这时候可以用3DAffiner转换器对立体几何进行下旋转，该转换器的设置如下：
&&由我们知道这样的设置是对立体几何进行了沿x轴方向顺时针旋转了30°，旋转后的效果如下：
&在使用转换器2DForcer把立体几何转换为2D几何。此时的结果达到了3D效果。
这里需要注意一点，2DForcer转换器并不单单是把坐标的z值去掉，而是把立体几何在x、y轴平面上进行投影后的坐标。
另一种转换方法是先把多边形转换为线，然后对每条线进行挤压，如果把立体几何比喻为建筑物的话，这个过程是把建筑物的墙先建立起来，然后同样适用3D仿射转换器旋转后再转换为2D，另外还要适用位移转换器生成建筑物的房顶。把墙跟房顶聚合后即得到3D效果的立体几何。具体操作过程如下：
谁用转换器Chopper把area转换为line，设置如下：
然后同第一种方法，适用挤压、仿射、转换为2D转换器，其中每个转换器的参数设置与第一种方法相同。
此时的效果为：
&&然后对于“房顶”，我们要把要数据平移挤压厚度的二分之一，因为根据3DAffiner转换器，我们在y轴上平移了二分之一的挤压厚度，使用Offsetter转换器平移，之后“墙”与“房顶”叠加的效果如下：
使用转换器PDFStyler对PDF样式如下设置后：
写入PDF文件，便可以得到3D效果，如下：
阅读(1994)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'平面图转换为2.5D（一）',
blogAbstract:'
作者：毛毛虫
首先看一下如何平面图形转换为2.5D，也就是想展示下如何把一个2D的几何中2D的环境中显示为3D的效果，如，原图为：
我想显示为如下效果的pdf文件（2D）：
这里可以使用两种方法实现。
一种方法是把平面图挤压为三维图，进行3D仿射变换，然后使用2DForcer转换器转换为2D图形就可以达到要求的效果。操作过程如下：
在源数据后面添加转换器Extruder指定一定高度，设置如下：
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:7,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}