当前位置:   article > 正文

[Unity]环形进度条(Progress)/拖拽条(Slider)制作_unity 环形进度条

unity 环形进度条

先上效果图:


上图演示效果可用于圆形进度条的加载,或者用于拖拽验证码的实现,原理相同(以下所有算法获得的坐标均是在fillorign为top时的公式)。

拖拽物体的位置:通过点击拖拽获取当前Rect下本地坐标,然后将这个坐标进行标准化(normalized),之后将这个向量和圆心半径相乘,就是拖拽物的坐标。

代码如下:

  1. //拖拽物坐标
  2. Vector2 local_pos = Vector2.zero;
  3. //m_fill_rec 拖拽物父物体
  4. RectTransformUtility.ScreenPointToLocalPointInRectangle(m_fill_rec,
  5. eventData.position,
  6. Camera.main,
  7. out local_pos);
  8. local_pos = local_pos.normalized * m_radius;
  9. //拖拽物位置赋值
  10. m_drag_rec.anchoredPosition = local_pos;

fillAmount:通过点击拖拽获取当前坐标,然后通过三角函数获取当前角度,角度再转弧度,之后用弧度占比(360°)就可以获得fillAmount的值感谢网友指正,数学已经还给老师了,总之就是这么转来转去。。

代码如下:

  1. fill_amount = (Mathf.Atan2(-local_pos.x, -local_pos.y) * 180.0f / Mathf.PI + 180.0f) / 360.0f;
  2. m_fill_bar.fillAmount = fill_amount;

需要注意的是,需要判断下当前拖拽是顺时针还是逆时针,通过这个来判断什么时候可以逆时针拖拽,什么时候不可以(比如当fillAmount为0时)。

判断顺逆时针代码如下:

  1. private void JudgeDragDir()
  2. {
  3. if (m_cur_drag_pos.x > 0)
  4. {
  5. //第一象限 第四象限
  6. if (m_cur_drag_pos.y > 0)
  7. {
  8. if (m_cur_drag_pos.y > m_last_drag_pos.y)
  9. {
  10. m_cur_drag_dir = EDRAGDIR.anticlockwise;
  11. }
  12. else
  13. {
  14. m_cur_drag_dir = EDRAGDIR.clockwise;
  15. }
  16. }
  17. }
  18. else
  19. {
  20. //第二象限 第三象限
  21. if (m_cur_drag_pos.y > 0)
  22. {
  23. if (m_cur_drag_pos.y > m_last_drag_pos.y)
  24. {
  25. m_cur_drag_dir = EDRAGDIR.clockwise;
  26. }
  27. else
  28. {
  29. m_cur_drag_dir = EDRAGDIR.anticlockwise;
  30. }
  31. }
  32. }
  33. }

完整demo链接:

Unity+UGUI圆形进度条-Unity3D文档类资源-CSDN下载

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/91987
推荐阅读
相关标签
  

闽ICP备14008679号