Axure教程 | 为原型设计添加点动画效果【毅耘科技】
应用交互效果中,动画效果是应用的锦上添花效果,比起死板的页面切换,动画过渡效果照旧会让人感觉天然,不那么生硬,也是一款优异应用的加分项。我们以几个例子来说明一下如何应用axure里的动画效果。
我们要做的是一个主动轮播的幻灯片效果,也就是会主动从第一张片子开始,停留几秒后主动切换到下一个片子,显示到最后一个时再返回到第一个片子。几个着关键点说明如下:
需要使用到动态面板的两个主要事件,“载入时”和“动态面板状况改变时”,状况切换时的动画效果设置如下:
并且注重勾选上“从最后一个到第一个主动跳转”
我们还可以给动态面板添加左右滑动事件,这两个事件是动态面板特有的,这样可以模拟手指向左或向右滑动。
在切换片子的时候,我们希望下方的指示器也能主动指示当前选中的片子,并且有动态的移动效果。这里为了处理方法通用,使用了一点小小的技巧,用一个变量来控制当前的索引,然后索引整除3,根据得出的余数移动指示器的位置。
axure自带的菜单样式太丑了,我们完全可以自己实现一个下拉弹出菜单,可以设置自己想要的样式。下面的例子是单击按钮时,假如菜单没显示,则向下弹出菜单,假如显示了,则向上收起菜单。
我们使用了统一个按钮来控制弹出和隐藏,因此需要在事件上添加条件判断,判断的依据就是下拉菜单动态面板是否处于显示状况。
假如我们不添加动画效果的话,菜单的显示和隐藏就太倏忽了,有了动画效果,体验效果会好许多。
TAB的实现一般都是通过动态面板的体例,这里不说动态面板的用法,只说一下动态面板按钮上方的红色线是如何移动的。
给TAB的三个按钮添加事件,单击后,切换到指定状况,然后移动这个红色的线到当前点击的按钮位置。
下拉刷新效果常见于信息流的更新,例如手机QQ新闻下拉刷新、微博客户端新闻下拉刷新,它主要对应下面几个过程:
1)开始下拉
在下拉到一定距离时,指示箭头方向转变,文字更新为“释放更新”
2)下拉莅临界点
下拉莅临界点时,会在“下拉刷新”和“释放更新”之间切换
3)释放
超过下拉临界点后,再往下拉时显示状况不会转变,这时释放后并不会立即还原,而是显示一下当前“正在更新”状况,更新完成后,列表位置还原到初始位置。
4)刷新
在释放后,系统请求数据完成后,就会刷新界面上的显示数据了。
用到的事件主要是“拖动动态面板时”和“结束拖动动态面板时”:
几个示例说完了,稍细小结一下:
动画效果虽然无关紧要,但是一个小小的动画会给你的交互增色不少,不需要太炫,过渡天然就行了。也不要搞得到处都是动画效果,只在需要的地方添加即可。
点击这里查看在线演示
本文网址:http://www.yiyuncloud.com/index/id/801.html
原创网址:合肥APP开发公司<毅耘科技> 版权所有,转载标明出去,并以链接形式链接网址:www.yiyuncloud.com
文章标签:合肥APP开发 合肥软件开发 合肥o2o社区 合肥商城开发 合肥B2B2C商城开发
毅耘科技(www.yiyuncloud.com)是一家拥有新型网站建设与程序开发经验的公司,致力于解决企业网络服务问题,紧跟着网络变化的步伐,为企业提供网络科技服务。平台服务:品牌网站建设 、网站开发、微信开发、APP开发、软件开发、网校系统开发、多用户商城开发、分销商城开发、微商城、一元云购系统开发、O2O系统开发、商标注册、网络营销等项目。是专业为企业提升价值的公司。