Axure-涟漪动画效果

在原型设计中为了提高交互效果,并在很多实际应用中也需要用到一些原型动画效果使得整个产品看起来更加具有灵动性
今天在此制作了一个“水波涟漪”动画效果。具体步骤参照如下:

  1. 创建一个透明画布,在画布上分别创建四个圆,大小分别为100 * * 100,80 * 80,60 60,40 * 40。线宽最大,线段类型实线,边框颜色为渐变黄色。
  2. 分别设置这四个圆的不透明度从大到小分别为:40%,60%,80%,100%。
  3. 再来这个圆进行左右居中和上下居中.4。
    这里写图片描述
    从元件库中拖进一个动态面板,随便起一个名字,
    这里写图片描述
    5.我们需要对四个圈做动画,每个圈是两种状态:显示和隐藏,总是8次,所以我们需要来回复制8个动态面板的状态
    这里写图片描述
    .6 接下来就是交互动作,每次切换状态的时候依次从小圈到大圈显示在隐藏,为了让涟漪看起有层次感,即又快变慢,我们在设置时间间可以加上一些。即当动态面板的状态发生改变时:
    这里写图片描述
    这里写图片描述
    7.完成添加,最后将所有组件整合,最后起一个名字,
    这里写图片描述
    这里写图片描述
    8。最后将四个圆进行隐藏
    。9.最终在加一个交互用例
    这里写图片描述
    .10。OK,搞定,预览就可以看效果了。
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值