手机垂直划屏效果从零学起(一)

axure商城

这节课教大家最基础的划屏+回弹效果制作,之后如果有时间还会继续写划屏相关的其他内容。

『点击查看效果』

■ 静态元素结构

 

QQ截图20160104015543

将需要制作划屏的文章内容转化为动态面板。

再将文章内容再转化为动态面板,并将该面板调整为显示范围(手机屏幕大小)的尺寸。

QQ截图20160104015733

将调整好的动态面板放到手机屏幕区域内,如上图效果。

■ 交互分析

我们期望的效果是:

1、可以垂直拖动文章内容。

2、拖动最多可超出上下边界半屏,但会自动回弹到上下边界。

■ 垂直拖动&拖动限制

拖动显示范围面板时,使文章内容被拖动。

所以选中『显示范围』面板,选择『拖动时』事件,选择『移动』,移动的元件是文章内容。

移动中要选择『垂直拖动』,因为外面只希望文章内容垂直拖动,不希望左右也一起被拖动。

EFEA1FBE-7907-4762-AC94-957CD95D74B5

我们希望可以上下各可以最多拖出去半屏,所以需要增加边界限制。Axure8版本中可以直接设置边界,Axure7需要用条件来限制。

Axure8的方法

顶部<=[[This.height/2]]、底部>[[This.height/2]],如上图。

Axure7的方法

增加条件,符合条件的时候才可以拖动:

898BB0F7-1C96-4567-BC5C-737984659776

【注释】NeiRong=文章内容动态面板,This是当前元件。

在做的时候,不要忘记点击旁边的fx按钮,增加局部变量,如下图。这样变量才可以生效的哦。

21538CF3-9A5A-4D54-A53F-92D25651642D

[[NeiRong.y]]<=[[This.Height/2]]  //向下拖动达到半屏时,内容的Y坐标,如下图。A

[[NeiRong.y]]>=[[This.height/2-NeiRong.height]]  //向上拖动达到半屏时,内容Y的坐标,如下图。

A

这样划屏就做好了,并且上下都可以额外拖出去半个屏幕,允许拖出去的额外半屏是为了回弹准备的。

■ 回弹

A

回弹是根据文章内容的拖动结束时的Y坐标来判断是否超过了文章的最上面或最下面的边界。

如果文章内容的Y>0,就将文章内容移回0,0点。要选择动画才会有弹回去的过程哦,我比较喜欢缓慢退出这个动画。

如果文章内容的Y坐标<显示范围的高度-内容的高度,那么就将文章内容的Y坐标设置为显示范围的高度-内容的高度。

我觉得大家的疑点应该在于『显示范围的高度-内容的高度』这个东西,不知道为什么要这样写。

其实这是一个数学题……

A

『显示范围-内容高度』得到的是还需要移动多少像素才可以让剩下的最后一屏(1屏高度=显示范围的高度)内容正好放在显示范围中。

由于Axure的左上为0,0点,所以面板向上移动的时候,Y坐标(Y坐标是以元件左上点为准的)会变成负数。所以我们需要用『显示范围-内容高度』,而不是『内容高度-显示范围』。

 

如果哪里不明白,可以在下面留言或加到Axure中文网2群(简称中2群→273547192)来找我。提问之前一定要过脑子思考认真学习哦,我很有耐心去教,但是我不接受任何伸手党的无脑提问。

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

评论:

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

0%好评

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

最新评论

  1. avatar
    梦与途发布于: 

    设置两个热区一个上面一个下面,作为限制条件就好了啊,没必要那么麻烦吧

  2. DH
    DH发布于: 

    楼主求加群,273547192这个已满。在哪里设置局部变量?

  3. 福报
    福报发布于: 

    版主锯掉了好几个细节所以全部照搬是做不对

  4. 无双
    无双发布于: 

    楼主,为什么加群直接被拒绝啊?[泪][泪][泪]

  5. 栈桥丶
    栈桥丶发布于: 

    楼主楼主,我按照你的方法设置完成之后,其它的效果都已经实现了,但是就是从下往上划屏之后,不能回弹回去,是怎么回事,我已经重新写了两三遍了,还是不行,也检查了,没发现哪儿有问题,请楼主再指点一下啦!还有,请问楼主在中二群中是哪位呀?![呵呵]

  6. 包子包子包子
    包子包子包子发布于: 

    按照楼主说的,各种参数都设置好了。但为什么预览的时候鼠标拖动文章没反应啊??[衰]

    • Synmo梦儿
      Synmo梦儿发布于: 

      [奥特曼]先把条件删了,试试能不能拖动,如果能拖动说明是你条件设置的不对。

      • 闫泽
        闫泽发布于: 

        局部变量能设都设了,不能设的也设了0 0鼠标拖动文章还是没反应..

  7. Georgeguo
    Georgeguo发布于: 

    如果内容的长度远大于1/2 屏幕,比如说10个屏幕,下面的定位要如何处理?

    • Synmo梦儿
      Synmo梦儿发布于: 

      你看下我那个图片呀,显示范围-内容高度,我们做一个比较小的假设值,这样跟你说起来好理解。假如1屏是10像素,那么10屏就是100像素对不对?显示范围10-内容高度100 = -90,你将内容的y坐标设置为-90的时候,内容的下边界就会刚好在显示范围的下边界了。如果想拖动出去半屏的话,那就在-90的基础上再减去办屏高度,就是-90-5=-95。

  8. 高沛
    高沛发布于: 

    为什么axure 8.0中底部边界填写具体值不能拖动,但是顶部写具体的值是可以拖动。求解?

  9. 成哥囝
    成哥囝发布于: 

    其实不需要那么复杂。面板超过Y值就自动回到底或顶就ok了。手机拖动之精粹在于如何识别力度,且看这些所谓教程有没有人能摸索出。呵呵呵

    • Synmo梦儿
      Synmo梦儿发布于: 

      是呢,但是如果设定成死值的话稍微有些改变就要重新写,如果用函数的话就是一劳永逸的方法。

  10. Min
    Min发布于: 

    我设置了,但是解雇拖进手机壳``就变成一个大长条````手机壳被挡住了

    • Synmo梦儿
      Synmo梦儿发布于: 

      你把内容转化为动态面板,这个面板就是你整个内容区域。再把内容转化为动态面板,然后手动把这个动态面板的尺寸调整为手机屏幕大小,放到手机屏幕的位置,这样就可以啦。

      • Min
        Min发布于: 

        已经会弄了,现在就是自动弹回去不会设置,预览的时候拖动已经没有问题。就是不会自己弹回去```

    • Synmo梦儿
      Synmo梦儿发布于: 

      放在手机壳上面就可以呀,为什么会有『拖进去』这个动作?

  11. 淑梅
    淑梅发布于: 

      一男的微信上摇一摇,摇到一美女,聊天:“小妞,你真漂亮,请问你是做什么工作的?”
      女说:“我是干服务工作的。”
      那哥们欣喜地说:“啊,我多想成为你的顾客!请问你在哪里上班?”
      女说:“我是在火葬场给尸体化妆的,你啥时候来?”

  12. 让我许个愿
    让我许个愿发布于: 

    求下载文件,看教程还是不太明白

    • Synmo梦儿
      Synmo梦儿发布于: 

      加群273547192吧,我记得我传给过群里一个叫“加班”的人……

      • 让我许个愿
        让我许个愿发布于: 

        非常感谢[嘻嘻],我发现我对不同动态面板的理解还是存在一些问题。
        另外,这个效果如果在顶部和底部各加一个热区作为边界的标记,是否也可以代替添加函数的效果呢?

        • Synmo梦儿
          Synmo梦儿发布于: 

          当然可以啦,只不过如果你修改界面的话那每次都要手动再去移动下对应的内容,比较麻烦,写函数是一劳永逸的方法。

发表评论