美文网首页
Axure版跳一跳

Axure版跳一跳

作者: 十月大神 | 来源:发表于2019-01-10 11:54 被阅读0次

    下班前看到一个群友发了一张“跳一跳”的动效图,觉得挺好玩的,就随手也做了“Axure版跳一跳”。以下是原理分析、实现步骤。

演示地址:Axure版跳一跳

实现效果

1、“Axure”板块向右平滑移动,与“版”“跳”“一”“跳”即将靠近时,“版”“跳”“一”“跳”分别向左跳一格;

2、“Axure”板块向左平滑移动,与“版”“跳”“一”“跳”即将靠近时,“版”“跳”“一”“跳”分别向右跳一格。

原理分析


1、本案例循环面板有2个状态,分别命名“state1、state2”,面板载入时,每隔5秒变化一次状态,

2、循环面板状态为state2时,

2.1 在4秒钟内向右线性移动“Axure”板块,移动距离为640px;

2.2 同时,在1秒钟内逆时针将“版”板块旋转180度(相对位置),因为要向左跳一个,所以还需以中心为锚点,向左偏移80px;

2.3 “版”板块向左跳转成功后,要等待1秒钟,再设置“跳”板块向左跳一格;

2.4 “跳”“一”“跳”三个板块的跳转设置同理,不再描述。

3、循环面板状态为state1时,

3.1 向左移动“Axure”板块,设置“版”“跳”“一”“跳”向右跳一格,方法同上。

元件准备

1、5个矩形框,分别填写“Axure”“版”“跳”“一”“跳”文字

2、1个循环面板,状态为“state1”“state2”

将所有元件整理并转换为动态面板后如下(转换为动态面板是方便计算移动距离,不转换为动态面板的时候注意移动距离设置即可):


实现步骤

1、设置循环面板载入时事件

2、设置循环面板状态改变时事件

面板初始状态为state1,面板载入时就切换为state2,设置面板状态改变时事件

状态为state2时,“Axure”板块向右滑动,“版”“跳”“一”“跳”分别向左跳一格,下图是“版”板块向左跳的设置

状态为state1时,“Axure”板块向左滑动,“版”“跳”“一”“跳”分别向右跳一格,下图是“跳”板块向右跳的设置

本案例已完成,点击QQ群“532261671”获取源文件;

更多案例请点击http://www.pmgod.cn 查看。

相关文章

  • Axure版跳一跳

    下班前看到一个群友发了一张“跳一跳”的动效图,觉得挺好玩的,就随手也做了“Axure版跳一跳”。以下是原理分析...

  • Frog Jump(小青蛙跳一跳)

    1.小青蛙跳一跳 iOS版 2.小青蛙跳一跳 Google play版 Contact Me(联系方式...

  • 真人版“跳一跳”

    最近有一个很火的游戏――“跳一跳”,成为了人们最玩的游戏之一。这不,我家也不甘示弱,开始了真人版跳一跳 ...

  • 欢声笑语

    前天,我和玲玲真人版“跳一跳,大体规则和微信游戏“跳一跳”差不多,只是我们家加了个规则,因为 “格子”——瓷砖太滑...

  • 小学期作业文案

    益智版跳一跳的策划案 - 原作分析 原作概要跳一跳这个游戏的玩法简单,以成功跳落在台子上进行积分排名,结合微信社交...

  • 微信跳一跳(iOS版)

    前言 微信小游戏“跳一跳”发布后,刷爆朋友圈。各位好友之间在分数排名上一较高低。利用Python脚本自动跳一跳刷分...

  • 微信跳一跳mac版

    感谢知乎@神奇的战士 https://zhuanlan.zhihu.com/p/32452473 我按照他的方法,...

  • 微信“跳一跳”,暴露了你的感情危机

    最近,流行着一股“跳一跳”风。 课间休息跳一跳,大脑好放松。 宿舍床上跳一跳,晚上睡的香。 办公室里跳一跳,小心点...

  • 跳一跳

    我这几天在玩小程序里的跳一跳游戏,几番努力都没有儿子跳的步数多。或许是自己太在意,用劲小了掉下去了,用劲大了跳过了...

  • 跳一跳

    有这样一件事,相信大家都知道微信上“跳一跳”这个小程序,有个人每次都能有很高的分数,而另一个人,分数怎么都提不上去...

网友评论

      本文标题:Axure版跳一跳

      本文链接:https://www.haomeiwen.com/subject/sbvorqtx.html