Axure8实例:支付宝咻一咻

axure商城

3

其实,我觉得这真是个卵用没有的东西,但是既然有人问了,那我就做一个,正好说下Axure8的优点。

这个需要用Axure8做,为什么呢?因为Axure8可以多个动作同时进行。

在Axure7里,如果想在向上移动的同时隐藏,是做不到的,只能是先移动到位了再隐藏。

而Axure8就可以!请大家认真观察支付宝咻一咻,它的动画是一个圆圈一边放大一边变透明。

那么,如何实现呢?

QQ截图20160331002906

需要弄个动态面板,2个状态,状态1是点击前的按钮样式,状态2是点击后的按钮样式。

然后再弄2个圆圈,放在按钮下面。

因为圆圈的动画是循环的,所以我们需要想一个循环的手段,本次我们使用“显示时”来做循环,就是在圆圈完全透明后,隐藏圆圈,再显示出来。再次显示时,就会触发“显示时”这个交互,实现循环。

QQ截图20160331003114

1、2两个圆圈都是一样的,所以1做完了之后直接复制粘贴到2里就可以了,那么不同的是什么呢?是它们会一先一后的播放这个动画。

这时候,让我们回到按钮的State1上:

QQ截图20160331003716

点击按钮的State1后,首先要将按钮变为State2,既按下后的状态。

然后要显示圆圈1,等待1000毫秒后再显示圆圈2即可。

在这里做显示1、2的时,就会触发圆圈1、2的显示时交互,然后进入无尽の循环中。

最后的最后我想说,Axure缘分问答QQ群招收动脑子、有学习态度的成员,群号是542524521,欢迎加入~

本文由 Axure中文网 作者:Synmo梦儿 发表,其版权均为 Axure中文网 所有,文章内容系作者个人观点,不代表 Axure中文网 对观点赞同或支持。如需转载,请注明文章来源。
1

评论:

18 条评论,访客:18 条,站长:0 条

0%好评

  • 好评:(0%)
  • 中评:(0%)
  • 差评:(0%)

最新评论

  1. raizel
    raizel发布于: 

    不知道你们有没有遇到这种情况,一开始能看到两个圆圈是一先一后的变大,循环几次后,两个圆圈就变成一起变大了,看不出作者的那种效果…..

  2. 似水Ж清风
    似水Ж清风发布于: 

    Axure缘分问答QQ群招收动脑子、有学习态度的成员,群号是542524521,欢迎加入~

  3. ohehe
    ohehe发布于: 

    圆圈在原地放大一圈之后跑到左上角无限循环去了,不知道什么原因。

  4. 叶莉智
    叶莉智发布于: 

    this是哪个 没有描述清楚

  5. 水谈
    水谈发布于: 

    不错不错,就是放大后有锯齿,是不是先缩小再放大呢

  6. 喵
    发布于: 

    作者好像忘说了,一开始要把2个椭圆都隐藏才行,缺少这一步的话是不行的

发表评论