axure商城

Axure动画教程之“水波涟漪”

学会一个小案例,是为了丰富我们的交互原型设计,您可以在此基础上变换出层出不穷的效果!

最近在做一个视频通话的项目,刚好需要连线效果,就设计了个“水波涟漪”的效果,先看一下演示。

Axure动画教程之“水波涟漪”

演示地址:水波涟漪演示

 

效果大家看到了,很简单,就是一个涟漪的加载效果;颜色将就看吧,不好看你自己调下。

 

开始画原型

一、画涟漪的波纹圈

1、首先画四个原型,背景透明,边框调到最粗,颜色白色,名称随意起;由大到小尺寸分别是100*100、80*80、60*60、40*40

Axure动画教程之“水波涟漪”

此处我起名为c1、c2、c3、c4

 

2、然后将4个圆形的透明度由大到小依次调整为40%、60%、80%、100%

Axure动画教程之“水波涟漪”

 

3、将4个圆形水平垂直居中

Axure动画教程之“水波涟漪”

 

 

二、创建执行动画的动态面板

1、从默认组件库里,拖一个动态面板进来,尺寸调小一点,便于操作,给动态面板也起个名称随意

Axure动画教程之“水波涟漪”

 

2、我们有4个圈要做动画,我计算了一下波形的由隐藏到显示再到隐藏的循环,来回正好需要8次,因此复制创建总共8个动态面板的状态

Axure动画教程之“水波涟漪”

 

3、接下来添加交互动作,每次切换状态的时候依次从小圈到大圈显示再隐藏,为了让涟漪看起来由快到慢,这里的显示动画也将时间逐步增长处理

动作列表

Axure动画教程之“水波涟漪”

 

操作步骤

Axure动画教程之“水波涟漪”

 

三、完成封装,添加全局执行命令

1、将刚刚创建的所有原件,全选编组,并且起个名称便于操作

Axure动画教程之“水波涟漪”

 

2、将其中4个圆形,设置为隐藏

Axure动画教程之“水波涟漪”

 

3、最后给刚刚编的组,添加一个加载命令

Axure动画教程之“水波涟漪”

这里的循环间隔时间越长,动画速度越慢

 

ok了,F5看下效果吧!

原件提供给大家:https://pan.baidu.com/s/1_PkdSfz9SDi5MoJzzWrG5g    密码:3njc

最后广告一下,我的 “移动端快速原型组件库” 包含移动端产品常用的各类布局交互组件,欢迎大家前去商城购买支持!

链接地址:https://www.axureshop.com/a/590.html

给TA打赏
共{{data.count}}人
人已打赏
案例教程

AxureRP中通过JS代码改变文本框类型

2018-7-19 10:44:04

案例教程

Axure教程:和我一起设计简书App

2018-8-1 14:48:51

axure商城
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索