最终效果

　　作为产品经理&＃xff0c;对任何的细节都应该需要关注&＃xff0c;大到整体布局、功能设计&＃xff1b;小到一个按钮的点击特效。今天我就给大家分享一个经典的按钮点击特效。具体效果&＃xff0c;可以看上面的图片演示。

交互说明

　　当点击按钮时&＃xff0c;显示进度图标&＃xff0c;进度完成后&＃xff0c;提示成功文字。

---

　　我们来看一下这个交互是如何制作的。

第一步&＃xff1a;插入“默认按钮”背景

　　使用插入图形工具&＃xff0c;插入默认的蓝色图形&＃xff0c;并且进行设置属性。

• 位置设置为&＃xff1a;188x516.5
• 大小设置为&＃xff1a;270x45
• 颜色设置为&＃xff1a;#4C6EF5
• 圆角设置为&＃xff1a;5

第二步&＃xff1a;插入“复制吱口令”的文案

　　使用插入文字工具&＃xff0c;插入“复制吱口令”的文字&＃xff0c;并且进行设置属性。

• 位置设置为&＃xff1a;188x514
• 颜色设置为&＃xff1a;#FFFFFF
• 字号&＃xff1a;16

第三步&＃xff1a;插入“加载完成后按钮”背景

　　使用插入图形工具&＃xff0c;插入一个与默认按钮背景相同的图形&＃xff0c;并且进行设置属性。这里需要有一点关注&＃xff0c;默认是将宽度设置为0的&＃xff0c;因为默认情况下&＃xff0c;这个红色的背景是不显示的。只有在按钮动效加载完成后才显示。所以属性设置为下&＃xff1a;

• 位置设置为&＃xff1a;53x516.5
• 大小设置为&＃xff1a;0x45
• 颜色设置为&＃xff1a;#FAB005

第四步&＃xff1a;插入“加载完成”的图标

　　使用插入图片工具&＃xff0c;插入一个√的图片&＃xff0c;用于表示加载完成。默认情况下也是不显示的。所以属性设置为下&＃xff1a;

• 位置设置为&＃xff1a;187x516.5
• 大小设置为&＃xff1a;27x27

第五步&＃xff1a;插入“复制成功”的文案

　　使用插入文本工具&＃xff0c;插入一个“复制成功”的文案&＃xff0c;用于表示加载完成后的文案显示。默认情况下也是不显示的。所以属性设置为下&＃xff1a;

• 位置设置为&＃xff1a;188x514
• 大小设置为&＃xff1a;160x30
• 透明度设置为&＃xff1a;0

第六步&＃xff1a;设置交互

　　完成以上元素的设置&＃xff0c;我们开始设置交互的动作。所有交互的动作&＃xff0c;是通过点击按钮开始的&＃xff0c;所以我们需要选择“默认按钮”&＃xff0c;为它添加单击的触发动作。

　　设置单击的触发动作后&＃xff0c;我们将为每个元素添加反应动作。首先我们来设置“复制吱口令”的透明度&＃xff0c;修改透明度是为了实现&＃xff0c;点击按钮隐藏“复制吱口令”的效果。

　　下一步&＃xff0c;“复制吱口令”文案隐藏后&＃xff0c;需要逐步显示“完成加载”的图片&＃xff0c;对该图片设置从0到100的透明度转变。

　　完成进度图片的加载后&＃xff0c;按钮的背景色将会出现一个从左到右的加载动效。这里需要对“加载完成后按钮”这个元素&＃xff0c;添加一个“大小”的反应动作&＃xff0c;宽度从0变成270。

　　当按钮背景动效完成后&＃xff0c;需要将√的图片进行一个位置移动的动效&＃xff0c;所以我们给他添加一个“移动”的反应动作。将X轴位置移动至“131”。

　　最后&＃xff0c;所有动画完成后&＃xff0c;将会显示“复制成功”的文案&＃xff0c;我们同样将这个元件的透明度设置为100。

---

结论

　　这节课&＃xff0c;一不小心把整个制作过程都发出来了。。。。所以&＃xff0c;今天就没有作业了。

　　如果你可以独立的完成最终效果&＃xff0c;请私信、或者在评论区告诉我。我将会给你个惊喜哦&＃xff01;大大的惊喜哦&＃xff01;

　　IT技能 一学就会&＃xff01;我是IT小白&＃xff01; 我们下个教程再见&＃xff01;

---

　　【需要作业题的源文件&＃xff0c;请评论区告诉我&＃xff0c;我将会发给你】