拖拽滑块,旋转指针 获赏10金币 基础教程

leeyun 普通用户 2019-12-2 2084

目标:

拖拽一个滑块,可以旋转指针360°。


知识点:

动态面板拖拽;

饼形图的旋转;

动态设置 元件的尺寸;

条件判断;


实现效果如下:



实现步骤:

1、分析:拖拽滑块,这里需要使用到动态面板的“拖动 时”这个交互用例(很多新手直接用的普通矩形等长按时来移动,那个是不能实现这种效果的),当拖拽的时候需要动态设置进度条的长度,动态设置饼形图的旋转角度,旋转角度是绝对位置。

2、布局:

圆形底色和饼形图画好,位置重合:

tips:很多同学找不到饼形图在哪里:



拖拽进度条、进度、拖动滑块(动态面板)的布局:

 全部页面概要如下:



记录当前滑块所在的x坐标,拖拽滑块的宽高(30,30),为了能使拖拽的时候鼠标刚好在滑块的正中心,需要处理滑块的一半宽(15):


记录滑块将移动到的最大位置的x坐标:


分析移动位置:

拖拽的时候需要移动滑块到当前鼠标所在的位置(特别注意要加上滑块宽的一半:15),滑块初始所在的位置是:123,加上滑块的一半15,所以移动的位置就是:鼠标所在位置-138。


条件判断:

需要判断鼠标移动的范围必须在滑块进度条的范围内,不能超出。所以坐标是在:138(123+15)——497(482+15)之间。


动态面板的拖动时用例如下:


最终就能实现开始示例图的效果,从这个小案例,我们可以学会使用动态面板的拖拽,条件判断和动态修改参数等,感谢大家。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 沈十三 10金币
最新回复 (13)
  • 迷路的风 普通用户 2月前
    0 引用 14
    感谢分享
  • lxy1120 普通用户 2020-9-28
    0 引用 13
    感谢感谢
  • 飞奔的母猪 普通用户 2020-9-17
    0 引用 12
    感谢分享
  • Lsl 普通用户 2020-8-15
    0 引用 11
    谢谢分享
  • LostPolaris 普通用户 2020-6-28
    0 引用 10
    谢谢分享
  • MMMMM 普通用户 2020-3-20
    0 引用 9
    谢谢分享
  • 单单 普通用户 2020-3-20
    0 引用 8
    谢谢
  • 程维维 普通用户 2020-3-11
    0 引用 7
    谢谢分享
  • 真以航(熊岳南京) 普通用户 2020-3-10
    0 引用 6
    感谢分享
  • 梁洋 普通用户 2020-2-13
    0 引用 5
    感谢分享
  • QI_π 普通用户 2019-12-11
    0 引用 4
    感谢分享
  • Wujungang 普通用户 2019-12-3
    0 引用 3
    谢谢分享
  • 沈十三 管理员 2019-12-3
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城