【axure教程】设置元件颜色及不透明度实例，高保真

先来看一下最终效果，这个效果由两部分组成：一是点击改变元件颜色，二是拖动改变元件不透明度；

一、改变颜色部分：

1、先创建一个动态面板，命名为“变色元件”；

2、然后在这个动态面板中添加几个状态，每个状态显示不同的颜色；

3、创建几个矩形，数量和颜色与上面动态面板的状态一一对应

4、给上面的几个矩形添加选中样式；

5、将上面的几个矩形添加选中样式到同一个选项组，并给每个矩形添加两个点击事件；

一是点击时选中当前元件，二是点击时切换“变色元件”的面板状态；

6、这样变色部分就做好了，先看一下效果

二、改变不透明度部分：

1、先画如图中的几个元件，进度条宽度为600px；

2、先将“滑块”和“不透明度数值”组合成一个动态面板，命名为“，移动滑块”，然后按下图位置进行排版；

3、给“移动滑块”添加拖动效果，移动方式设置为 跟随水平移动，左边界>=“进度条背景”的左边界，右边界<=“进度条背景”的右边界；

4、设置“进度条前景”的尺寸，高度固定，宽度随“移动滑块”位置的改变而改变，“进度条前景”的宽度=“移动滑块”左边距-“进度条前景”左边距；

5、设置“不透明度数值”的数字，由于不透明度的范围是0~100，进度条的最大宽度为600px，所以用“进度条前景”÷6 的结果刚好在0~100之间；

toFixed(0)函数的作用是保留整数；

6、设置不透明度，将“变色元件”的不透明度设置为“不透明度数值”的数字；

7、最后，将两部分组合在一起，最终效果就完成了，喜爱的话记得点赞哦！