CircleList

CircleList是一个通过UGUI实现的圆形列表,通过缩放、平移和层级的改变模拟一个3D的圆形列表。

效果

添加与旋转


间距调整

椭圆形的旋转

参数

CenterX: 椭圆圆心的x坐标偏移量
CenterY: 椭圆圆心的y坐标偏移量
RadiusX: 椭圆的长轴
RadiusY: 椭圆的短轴
MinScale: 缩放的最小值,缩放值在[0,π]间逐渐增大,在[π,2π]间逐渐减小
MaxScale: 缩放的最大值
Speed: 滑动距离对旋转速度的影响参数
AdjustArg: 调整间距的参数,值越小前方的item布局越松散
OriginalRotatin: 椭圆的初始旋转角度
IsAutoMove: 是否自动转动

原理

  以横向滑动的距离作为每个item旋转角度的增量来实现列表的转动,同时将角度控制在[0,2π],方便进行其他的计算。
  在将每次拖动的距离向item旋转角做变化时做了一些处理,先算出点击点向量AB的的垂直向量BF(x2,y2),也就是半径为AB的圆的切线。将BF标准化后得到向量B'F'(x2',y2'),让后计算GB、B'F'的点积,用结果乘上速度参数作角度的增量,实现滑动的效果。

  根据item的个数,计算出每个item间的间隔,以此为依据进行布局。(总旋转角+item在队列中的位置*item间的间隔)作为每个item的最终旋转角。

  以角度的值为缩放的依据,让item在[0,π]之间逐渐增大,在[π,2π]之间逐渐减小。模拟出近大远小的感觉,同时以item的缩放来重新设置item的层级,解决item的遮挡关系(层级的排序通过一个辅助列表实现)。
  但是让每个item之间相隔的角度相等的话,就会显得前方的item比较拥挤,所以通过每个item的缩放值进行角度的二次调整,让列表显得不是那么拥挤。


  在计算出每个item的位置后,将item的位置以圆心为原点,旋转θ度,实现椭圆的旋转。



代码链接:https://github.com/blueberryzzz/UIAndShader/tree/master/UIAndShader/Assets/CircleList

CircleList-使用UGUI实现的圆形列表的更多相关文章

  1. UWP 手绘视频创作工具技术分享系列 - 全新的 UWP 来画视频

    从2017年11月开始,我们开始规划和开发全新的来画Pro,在12月23日的短视频峰会上推出了预览版供参会者体验,得到了很高的评价和关注度.吸取反馈建议后,终于在2018年1月11日正式推出了全新版本 ...

  2. Android Glide+CircleImageView实现加载圆形图片列表

    需求:要在列表中实现圆形图片的显示,控件可能和加载库会存在冲突 先上代码,至于其中源码,以后有空再分析 MainActivity public class MainActivity extends A ...

  3. 基于Unity·UGUI实现的RecycleList循环列表UI容器

    在UI功能开发实践中,列表UI容器是我们经常使用一种UI容器组件.这种组件就根据输入的数据集合生成对应数据项目.从显示的方向来说,一般就分为水平排布和垂直排布的列表容器两种.列表容器为了在有限的界面空 ...

  4. [UGUI]圆形Image

    参考链接: http://www.cnblogs.com/leoin2012/p/6425089.html 前面说过Mask组件会影响性能:https://www.cnblogs.com/lyh916 ...

  5. unity探索者之UGUI圆形图片组件

    版权声明:本文为原创文章,转载请声明https://www.cnblogs.com/unityExplorer/p/13524824.html 使用UGUI进行游戏开发的过程中经常会遇到一个问题:玩家 ...

  6. Android UI开发第四十二篇——实现实现易信的圆形图像和对话列表的图像显示部分

    显示图像时,很多个性化显示,圆形或圆角.气泡等等,我们这一篇文章探讨一下圆形和气泡的显示,仿照易信中的实现,先看下效果图: 代码: public class RoundImageView extend ...

  7. [UGUI]滑动列表优化(循环利用)

    需要注意的有下面几点: 1. 区分好表现上的index和逻辑上的index.表现上的index是指这个go是go列表中的第几项,但实际上这个index的意义并不大,因为在滚动的过程中go列表是轮转的: ...

  8. 【转】超简单利用UGUI制作圆形小地图

    http://sanwen.net/a/ithhtbo.html 由于UI都是Achor自己用PS做的,比较粗糙,大家见谅,不过丝毫不影响功能的实现,下面我们看看今天的笔记: 首先我们看看需要哪些组件 ...

  9. unity 支持圆形、切倒角和虚化UGUI Shader

    // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt ...

随机推荐

  1. Exception while invoking TaskListener: Exception while invoking TaskListener: null

    https://community.alfresco.com/thread/225041-exception-while-invoking-tasklistener-null Ok, so the p ...

  2. 使用pygal_maps_world.i18n中数据画各大洲地图

    源码: # 使用pygal_maps_world.i18n中数据画各大洲地图 from pygal_maps_world.i18n import ASIA from pygal_maps_world ...

  3. 非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通过id进行维护与建文件

     非关心数据库无法进行连表查询 所以我们需要在进行一对多查询时候 无法满足 因此需要在"1"的一方添加"多"的一方的的id 以便用于进行连表查询 ; 核心思想通 ...

  4. BZOJ[Usaco2017 Jan]Promotion Counting——线段树合并

    题目描述 The cows have once again tried to form a startup company, failing to remember from past experie ...

  5. [IOI2018]狼人——kruskal重构树+可持久化线段树

    题目链接: IOI2018werewolf 题目大意:给出一张$n$个点$m$条边的无向图,点和边可重复经过,一个狼人初始为人形,有$q$次询问,每次询问要求人形态只能处于编号不小于$L$的点,狼形态 ...

  6. poj 2236 Wireless Network (并查集)

    链接:http://poj.org/problem?id=2236 题意: 有一个计算机网络,n台计算机全部坏了,给你两种操作: 1.O x 修复第x台计算机 2.S x,y 判断两台计算机是否联通 ...

  7. pdo连接的时候设置字符编码是这样的

    $pdo = new \PDO(..,..,..) $pdo->query('SET NAMES utf8mb4'); $pdo->exex('sql....');

  8. mysql 计算两个日期之间的工作日天数

    创建透视表t500 建表 CREATE TABLE `t500` ( `id` int(11) NOT NULL AUTO_INCREMENT, PRIMARY KEY (`id`) ) ENGINE ...

  9. 【BZOJ2000】[HNOI2000]取石头游戏(贪心,博弈论)

    [BZOJ2000][HNOI2000]取石头游戏(贪心,博弈论) 题面 BZOJ 洛谷 题解 这题好神仙啊,窝不会QaQ. 假装一下只有三个元素\(a_{i-1},a_i,a_{i+1}\),并且满 ...

  10. Shell基础知识(四)

    字符串详解 字符串可以由 单引号/双引号/无引号 包围.如下所示 >> str1=hello str2="hello" str3='hello' << 三种 ...