想做一个浏览器上下载文档的动态效果?按照如下步骤就可以啦,你也可以在此基础上画的更花哦♥
第一步
准备组件:
(1)一个下载按钮,带下拉选项(一些平平无奇的矩形和图片)
(2)一个下载效果图标(一个可以嗖一下的图片)
(3)一个底部提示栏(注意前面辣两个圈圈,那是我们biubiu闪的关键)
第二步
设置交互:
【页面载入】(先隐藏除下载按钮外的全部组件,再挨个儿盘它们!)
把载入时不需要的组件通通隐藏掉!
【下载按钮&下拉选项】(页面上现在就一个下载按钮了,先盘它!)
(1)单击后显示选格式的下拉列表
(2)单击下拉列表选项后,显示下载效果图片并向下“嗖”(移动组件to到任何你想to的地方,移动完别忘记移动回去下次还要用!),显示底部提示栏
【下载效果图片】(它嗖完就挥一挥衣袖不见了了,此时就轮到底部的组件动起来了!)
(1)隐藏时,底部的环1转起来,转完了就藏起来!
【下载文件底部提示栏】(既然显示出来了就给我biubiu起来!)
(1)环1隐藏后,再让蓝色的环2进行闪烁(选中状态控制),闪烁三次后隐藏。
(2)别忘了关闭底部提示栏哦~
问:可以更优化吗?
答复:当然可以。这是一个非常朴素和基础的方法,用最简单的移动旋转和选中做出的动效。
比如三次1000ms360°旋转可以改成2000ms1080°旋转;比如闪烁的选中可以改用显示隐藏或是动态面板切换等等。
发挥你的想象力吧~