• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >axure > Axure教程 - 为原型设计添加点动画效果

Axure教程 - 为原型设计添加点动画效果

作者: @Axure原型设计工场 字体:[增加 减小] 来源:互联网 时间:2017-06-14

本文主要包含axure原型图教程,axure app原型教程,axure原型设计教程,axure制作app原型教程,原型工具axure教程等相关知识, @Axure原型设计工场 希望在学习及工作中可以帮助到您

应用交互效果中,动画效果是应用的锦上添花效果,比起死板的页面切换,动画过渡效果还是会让人感觉自然,不那么生硬,也是一款优秀应用的加分项。我们以几个例子来说明一下如何应用axure里的动画效果。

幻灯片效果

我们要做的是一个自动轮播的幻灯片效果,也就是会自动从第一张片子开始,停留几秒后自动切换到下一个片子,显示到最后一个时再返回到第一个片子。几个着关键点说明如下:

1. 自动轮播

需要使用到动态面板的两个重要事件,“载入时”和“动态面板状态改变时”,状态切换时的动画效果设置如下:

自动轮播事件

并且注意勾选上“从最后一个到第一个自动跳转”

2. 左右滑动

我们还可以给动态面板添加左右滑动事件,这两个事件是动态面板特有的,这样可以模拟手指向左或向右滑动。

3. 指示器的动态效果

在切换片子的时候,我们希望下方的指示器也能自动指示当前选中的片子,并且有动态的移动效果。这里为了处理方法通用,使用了一点小小的技巧,用一个变量来控制当前的索引,然后索引整除3,根据得出的余数移动指示器的位置。

移动当前选中指示器

自定义下拉弹出菜单

axure自带的菜单样式太丑了,我们完全可以自己实现一个下拉弹出菜单,可以设置自己想要的样式。下面的例子是单击按钮时,如果菜单没显示,则向下弹出菜单,如果显示了,则向上收起菜单。

1)弹出菜单

我们使用了同一个按钮来控制弹出和隐藏,因此需要在事件上添加条件判断,判断的依据就是下拉菜单动态面板是否处于显示状态。

弹出菜单事件

2)隐藏菜单

如果我们不添加动画效果的话,菜单的显示和隐藏就太突然了,有了动画效果,体验效果会好很多。

3)TAB属性页面

TAB的实现一般都是通过动态面板的方式,这里不说动态面板的用法,只说一下动态面板按钮上方的红色线是如何移动的。

TAB当前选中项目
给TAB的三个按钮添加事件,单击后,切换到指定状态,然后移动这个红色的线到当前点击的按钮位置。

TAB事件处理

4)下拉刷新

下拉刷新效果常见于信息流的更新,例如手机QQ消息下拉刷新、微博客户端消息下拉刷新,它主要对应下面几个过程:

1)开始下拉

在下拉到一定距离时,指示箭头方向变化,文字更新为“释放更新”

2)下拉到临界点

下拉到临界点时,会在“下拉刷新”和“释放更新”之间切换

3)释放

超过下拉临界点后,再往下拉时显示状态不会变化,这时释放后并不会立即还原,而是显示一下当前“正在更新”状态,更新完成后,列表位置还原到初始位置。

4)刷新

在释放后,系统请求数据完成后,就会刷新界面上的显示数据了。

用到的事件主要是“拖动动态面板时”和“结束拖动动态面板时”:

下拉刷新动态面板事件

几个示例说完了,稍微小结一下:

动画效果虽然可有可无,但是一个小小的动画会给你的交互增色不少,不需要太炫,过渡自然就行了。也不要搞得到处都是动画效果,只在必要的地方添加即可。

点击这里查看在线演示

您可能想查找下面的文章:

  • Axure教程:微信聊天列表原型制作(二)
  • Axure教程:微信聊天列表原型制作(一)
  • Axure教程|原型设计之抽屉列表
  • Axure教程:原型设计之多用户注册登录
  • Axure教程:如何制作一个不区分大小写的验证码原型?
  • Axure教程:原型设计之转盘抽奖
  • Axure教程:原型设计之水泡导航栏
  • Axure教程:原型设计之播放控制条
  • Axure教程:微信面对面建群原型设计
  • Axure教程:原型设计之弹幕

相关文章

  • 2017-06-14Axure教程:导航栏和广告悬停效果制作
  • 2017-06-14Axure RP设计顶部导航冻结,注册模块互切换,滚动条设计的方法
  • 2017-06-14axure实现坦克游戏原型
  • 2017-06-14Axure7.0实现动态“极验”效果(滑动验证)
  • 2017-06-14Axure原型技巧 | 这回我们模拟下键盘输入
  • 2017-06-14Axure教程 | 原型中的商品图放大镜效果
  • 2017-06-14Axure7.0教程(九)7.0重现进度条(动态面板新特性_定义面板大小)
  • 2017-06-14Axure教程 | 图片放大器
  • 2017-06-13Axure教程:微信聊天列表原型制作(一)
  • 2017-06-14用Axure 实现“打飞机”,骚年,来一发(下)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 简单6步用Axure绘制相机图标(附源文件)
    • Axure教程:微信聊天列表原型制作(一)
    • Axure教程:用中继器和日期函数实现万年历
    • Axure7.0教程(七)math函数的使用(2)Math函数简介
    • Axure教程:原型设计之播放控制条
    • banner轮播axure最简易实现及手动切换
    • Axure7.0教程(六)math函数的使用(1)动态面板环状移动
    • Axure7.0教程(一)中继器的使用(1)
    • Axure实现多级联动下拉框
    • Axure教程:动态面板实现广告循环播放

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有