Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现

2018-07-1909:54:06原型设计Comments2,124 views字数 1532阅读模式

一、最终效果展示

体验地址:点击此处文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

交互说明:点击“BUTTON”开始交互效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

下方的图标开始用翻页的形式切换至下一个图标——循环效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

二、制作方式

1. 绘制所需的原件

本文需要绘制一个用来触发效果的按钮,一个循环面板,和两个用来作为基本素材的动态面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

触发按钮就是普通的按钮,实际的话可以换成一个摇一摇的图标,但本文只是作为一个简单的示范,所以就使用了Axure自带的按钮元件如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

循环面板也是很简单,直接拖入一个动态面板,然后添加两个状态用来当作循环使用,然后起名字叫循环面板。因为动态面板是不可见的,所以只要放在非触发区域(在案例中就是除了触发按钮以外的区域)即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

如下图所示(1即循环面板):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

作为素材的动态面板稍微麻烦一点,首先是第一个动态面板,动态面板大小调整为和素材大小一样,然后添加四个状态(具体看效果,本文中的效果是四个图标翻页,所以有四个状态)。每个状态为一个图标,但这个图标素材要分为左右两半,不然实现不了翻书效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

在本文案例中,我将四个状态中的图标分别命名为绿山、红心、发现、星星。State1是绿山,State2是红心,State3是发现,State4是星星。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

同时,State2、3、4中图标素材的右半边素材透明度需要改成0,因为如果不这样设置同样也无法实现翻书效果,State 1是呈现在最表面的效果所以一开始右半边透明度不能为0,但在设置循环面板时同样会将其设置为0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

第二个动态面板是重点,大小和第一个动态面板一样,因为素材大小是一样的。动态面板也设置为四个状态,但是每个状态素材跟第一个动态面板不一样。动态面板2中State 1中的素材为动态面板1中State1中左半边素材+State2中右半边素材,即左绿山+右红心。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

依此类推,State2中的素材为左红心+右发现,State3中的素材为左发现+右星星,State4中的素材为左星星+右绿山。如此设置的原因是因为上一层图标在翻页的过程中,会露出下一层的图标。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

然后将动态面板1置于动态面板2之上,两个面板应该刚刚好重合。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

最终效果如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

2. 触发按钮的设置

触发按钮的设置很简单,鼠标单击时设置循环面板为向后循环,循环间隔为1000毫秒(这个间隔跟循环面板的设置有关,但1000毫秒翻页速度就刚刚好,不会太快也不会太慢)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

3. 循环面板的设置

这里是最难的地方。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

循环面板设置用例为状态改变时文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

添加条件,当动态面板1处于State 1 即处于绿山图标时,设置绿山图标右半边不透明度为100,左半边图标不透明度为0,动态面板2状态为State 1(虽然此时动态面板2初始状态已经处于State 1 了,但后面循环时动态面板就不会再处于State 1了),动态面板1则将State 1向左翻转切换为State 2,时间为1000毫秒。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

然后等待1000毫秒(等待翻页效果完成),再将State 1中的绿山图标右半边不透明度设为0左半边不透明度设为100(此时动态面板1处于State 2 即红山图标状态,因此State 1 中的变化不会表现出来)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

同样的,当动态面板1处于State 2 时,对State 2 的图片即红山图片进行动作设置,如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

Axure教程:微信读书书城摇一摇加载时,图标翻页效果实现文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

依此类推继续设置动态面板1的State 3和State 4,设置完成即完成了这个效果的所有设置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

三、总结

该效果其实并不难,但逻辑上很抽象,需要不断地去调试更改才能得到最后的效果。同时建议对素材取合适的命名,比如:对每个图标的左右两半边都命名,避免设置时弄错图片。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

在这个效果上可以再结合实际进行润色,比如:翻页结束时出现弹出窗口,如像微信读书中的书籍推荐等,具体效果可以看这个地址中的“发现”-“书城”-“摇一摇”,有需要实现这个效果的小伙伴可以评论里留言。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/4206.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/4206.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定