CircleList-使用UGUI實現的圓形列表


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM