少年三国志首页效果实现

前两天我们的策划想要实现一个像《少年三国志》游戏的大厅里的3D旋转效果,大概是这个样子的:在主界面有九个角色组成了一个椭圆形区域,滑动屏幕的时候,可以按滑动方向的不同可以左右旋转并且前面的会覆盖后面的角色卡片。我试着使用NGUI3.8实现了这个功能。《少年三国志》主界面的效果图如下:

主要思路:使用每个点与x轴的角度计算点在屏幕上的位置。从屏幕上输入位移控制旋转的角度,每帧计算点的位置。遮挡的问题可以使用widged的depth控制。
我设计了这两个类:
EllipsePlugin: 计算出一个椭圆区域,用于摆放需要旋转的物件。这些物件(gameObject)的位置自动生成(其实也可以自己设定,为着程序的方便,改成自动摆放了)
Point: 椭圆上的每个点(gameObject)每帧更新自己的位置。

第一步,我们先实现椭圆区域的旋转。
首先,分析椭圆方程,把(x,y)使用椭圆的长短轴(a长轴,b短轴),中心点坐标(x0,y0)及角度sita表示=>(x, y)=(x0 + a * cos(sita), y0 + b * sin(sita))
然后,我们可以按照需求构建几个类,
第一个控制椭圆区域及输入处理Ellipse
类成员:椭圆中心点,长轴,短轴
类函数:OnDrag(float delta) 把屏幕位移转换成椭圆上的点(gameObject)的角度变化
第二个椭圆上的点:Point
类成员:角度(Angle)
类函数:每帧处理位置变化
按上述方法可以实现拖动旋转

我的初级效果图

接下来是加强实现
实现缩放及遮挡
1. 缩放
   缩放与椭圆上点的y坐标有关,也可以使用长短轴及旋转角度计算,y坐标越大,显示越小,让人感觉距离物体越远
2. 遮挡
   可以使用渲染的深度widget的depth实现,depth值越大,渲染越靠前,也是可以使用椭圆的长短轴及旋转角度表示的
代码实现比较简单,就不上代码了(我的代码写的比较乱)
最后我们要加上动画显示,如果旋转到某一点,松开手指后,要把距离最前面位置的点使用动画的方式停靠过去。
这一块首先要计算停靠点,只要计算椭圆上每个点与停靠点的夹角,得到最小的角度的那个点即可,然后设置动画移动。由于我们使用角度进行所有的逻辑的控制,这里按角度进行更新最方便,设置每帧移动一个很小的角度即可。
我上面说的有点粗略,如果有实现不了的,可以在下面的评论中一起讨论。

效果图如下:

这里的缩放比例都是可以调节的

在我实现完成之后,我发现《少年三国志里》实现没有我想的那么细,它在施动的开始就决定了最终的旋转方向,比如我刚开始向左施动,在鼠标弹起时,不管我是向哪个方向,都会向左滑动到指定的位置。

时间: 2024-10-12 21:43:21

少年三国志首页效果实现的相关文章

iOS支付宝 9.x 版本首页效果

http://www.jianshu.com/p/7516eb852cca 支付宝 9.x 版本首页效果 对于新版支付宝首页的产品功能这里就不说什么了,一大堆人吐槽,我们只想要一个好好的支付工具,阿里硬是要融入社交... 今天这里不是来评论支付宝功能的,而是作为一个iOS开发人员在使用的过程中发现,首页这滑动好"怪异"啊~~ 首先,右侧的滚动条的位置好怪!为什么在中间?只能说明一个问题,这个tableview是从这里开始的. 其次,既然tableview在中间开始,那上面那一片view

原生js-拉勾网首页效果

拉勾网首页公司广告位的悬浮划过效果着实很吸引我.如下(不会做动图!--,感兴趣的可以去拉勾看看): 此处最吸引我的地方在于将鼠标划过上面一排公司列表时,感觉像是绿色的区块跟着你的鼠标移动一样,颇有动感.闲言少续,下面是代码. css /*此处简单粗暴的使用了*,此处不是重点^-^*/ *{padding:0;margin:0;} ul{ text-align: center; margin: 100px auto 0; width: 535px; font-size: 0; } li{ posi

Android-自定义多TAB悬浮控件实现蘑菇街首页效果

因为项目的一些需求需要用到此种展现方式.  找了市面上大部分有类似功能的应用.  基本思路嵌套ScrollView 转换事件分发给listview 实现. 但是此种方案有个缺点. 在ScrollView切换给Listview 事件的时候. 会卡顿.   体验效果并不好.    应用此方案的应用: 蘑菇街.   口袋夺宝 .    蘑菇街在快速滑动时才会卡顿.  优化处理过. 在找DEMO过程中. 发现此控件的方案更少. 仅有的几个问题颇多. 例如listview 长度不一时,切换VIewpage

学习Jammendo代码的心路历程(一)简单的淡出效果实现

最近在看 Jammendo代码,打算将学习过程简单的记录下来,下面开始第一篇: 打开Jammendo运行之后,出弹出一个对话框,跳过对话框之后,会有一个淡出界面跳转到首页效果的实现.那么这个效果是怎么实现的呢,其实就是Animation中动画淡出的效果——原理大概是layout不透明变成全透明这样一个原理. 我这里用到的自定义endAnimation,是执行的动画效果,这里找到我事先写好的fade_out.xml,也就是一个简单的淡出效果实现: <?xml version="1.0&quo

HTML&amp;CSS——使用DIV和CSS完成网站首页重构

1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内联元素(显示一行).它单独使用没有任何意义,必须结合CSS 来使用.它主要用于对括起来的内容进行样式的修饰. 2.CSS 的作用 HTML:它是整个网站的骨架. CSS:它是对整个网站骨架的内容进行美化(修饰). 3.CSS 如何使用 语法和规范 选择器{   属性名 1:属性值 1;     属性

第九十一节,html5+css3pc端固定布局,完成首页

html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瓢城旅行社</title> <link

半糖iOS版首页实现与基本原理揭秘

很久以前,一个学弟的曾问过我如何实现半糖iOS版本首页效果,我当时一看觉得这个效果挺酷炫,然后去github上搜了一下,很多自称是仿半糖首页的,我下载之后发现其实很多代码都没有实现主要的代码.有些代码也做了一些简单的尝试,但是最后都放弃了,所以说这个效果还是没有很好的实现.我于是打算研究一下这个有趣的效果,经过工作之余一段时间的研究.有时候路上也会想一想,做了很多的尝试,一点一点的把遇到的问题解决了.于是写下这篇文章,把自己的一些尝试和想法与大家分享. 有的开发者可能会觉得这么简单的东西别拿来忽

2-2 百度首页

百度首页 上图:当前webstorm的文件目录 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下,你就知道</title> <link href="css/index.css" rel="stylesheet"> </head> &l

京东首页项目(1)---总述

京东首页项目总述 这里做一个京东首页的项目.主要目的是总结和提高 HTML+ CSS 技术.该项目暂不涉及JS相关技术. 一.首页效果 先看首页完成最终完成的效果 说明 项目做完后,也会附上项目github地址(包含整个项目的素材和代码). 二.项目介绍 1.设计目标 - 熟悉CSS+DIV布局,页面的搭建工作 - 了解常用电商类网站的布局模式 2.浏览器兼容问题 因为浏览器的不同,所以需要我们在前端开发的时候去兼容不同的浏览器,而这部分css样式肯定不需要我们自己去写,这里使用一个叫CSS R