网易云音乐「听歌识曲」动效教你3步用Axure实现

2020-11-28 23:51:09

网易云音乐「听歌识曲」动效，教你3步用Axure实现

“随风奔跑自由是方向……敢爱敢做勇敢闯一闯……”

听到这首歌，你立马打开网易云音乐，点进主界面左上角的「听歌识曲」。屏幕上一圈圈声波随歌声荡开……不出几秒，你就知道了歌曲名《奔跑》。

这么贴合用户场景的动效，是怎么做的呢？其实很简单，用Axure只要3步就能实现；这里，我们主要使用“设置元件尺寸”事件。

第1步：

请添加页面中的各个元素，包括：

·页面背景

·页面标题“听歌识曲”

·声波（用3个圆形组合实现）

·2个红色圆形（重叠在一起，并将下层圆形命名为“椭圆”）

页面结构如下：

第2步：

请将椭圆的初始状态设为隐藏。

第3步：

请选中椭圆部件，添加“显示时”交互效果。

然后，请逐步操作这7个小步骤：

（1）设置椭圆从小到大变化

（2）设置椭圆从不透明到透明

（3）将椭圆设为隐藏

（4）等待2000毫秒（因为大小变化和透明度的变化都需要时间1000毫秒才能完成）

（5）设置椭圆从大到小变化

（6）设置椭圆从透明到不透明

（7）设置椭圆为显示

以上，网易云音乐「听歌识曲」的动效就完成了。（完成这个case还有很多方法，小伙伴们可以多做几种尝试哦）

【老师简介】

任咏燕，开课吧莱茵设计学院专职导师。

前百度产品设计师，曾主导百度网络产品事业部产品总体设计。

资深交互设计导师，拥有超过10年互联网产品工作积淀；曾任高校讲师、梦工厂软件界面设计师、易智付科技（Web/App）产品设计师。

相关资讯