如何做显示进度的横向滑块

 时间:2024-11-17 22:21:30

1、构成元件:一个背景条(beijing),一个进度条(jindu),一个圆(yuan)(动态面板)PS:圆填充深蓝色

如何做显示进度的横向滑块如何做显示进度的横向滑块如何做显示进度的横向滑块

2、进度条置于最底层,圆置于最上层,背景条在中间,像下图一样摆好。

如何做显示进度的横向滑块

3、为圆(动态面板)添加交互,移动当前元件,水平拖动。设置拖动边界,左侧大于等于0,右侧小于等于背景的长度。这一步是让这个圆圈在背景条上可以拖动起来。

如何做显示进度的横向滑块

4、第一交互中的插入函数编辑值。

如何做显示进度的横向滑块

5、设置进度条的尺寸,宽度为:[[yuan.x+yuan.width]],注意要添加局部变量“圆”指的是动态面板圆圈。锚点在左侧。这一步是让进度条跟着动起来。

如何做显示进度的横向滑块

6、第二交互中的插入函数编辑值。

如何做显示进度的横向滑块

7、设置圆形上的元件文字=[[Math.floor((jindu.width-30)*100/570)]],注意添加局部变量。这个是设置圆形上的文字。公式计算的是当前位置的百分比。由于本身有30宽,所以计算百分比的时候分子分母都需要减去30。不然就不是从零开始的了。Math.floor()是向下取整,也就是把小数点后面的数字抹掉,不然算出来会有长尾巴。

如何做显示进度的横向滑块

8、第三交互中的插入函数编辑值。

如何做显示进度的横向滑块

9、效果图。

如何做显示进度的横向滑块
  • PS教程,半调图案怎么用
  • 用PS如何制作具有书法效果的文字
  • ps如何制作方格化有层次的背景
  • 怎样在ps中给图片添加中间值杂色效果
  • Wacom数位板怎么添加自定义软件?
  • 热门搜索
    月季花是什么颜色的 community是什么意思 土地流转是什么意思 孕妇喝什么汤好 工艺美术运动 oil是什么意思 ba是什么元素 查水表是什么意思 8月23日是什么日子 bt种子是什么