Axure RP 9 教程:開著小汽車回家

1 評論 2291 瀏覽 7 收藏 5 分鐘

本文教大家在Axure RP 9中制作小汽車動效,一起來看看~

人與人的差距就是在不經意間拉開的;人要學會享受孤獨,孤獨的時候才會想很多。

當你凝望深淵時,深淵也在凝望你,當你斬盡惡龍時,你也變成了惡龍,用小人對付你的招數去對付小人,終究,你也變成小人,出淤泥而不染,濯清漣而不妖,大概也是在講這個道理吧~

咳咳,扯了這么多沒用的~~~

知識不在于占有,不在于瀏覽器存了多少資源,不在于網盤攢了多少秘密,在于能否學會,能否靈活運用,并進一步升華。

知識往往在丟在旮旯角落之后沒多久就會忘掉,我們要時?;貞洠瑫r常反思,這樣才能不斷進步。

效果圖

Axure RP 9 教程—開著小汽車回家

使用工具

Axure RP 9

實現邏輯

Axure交互的小邏輯:

  • 相同目標,不同動作:同時進行相同目標,相同動作:分先后
  • 不同目標,不同動作:同時進行
  • 不同目標,相同動作:同時進行

(沒看懂不要緊,在接下來的操作中我再解釋這四句話的意思)

流程:頁面載入時→樹木縮小,小車左右移動,樹木隱藏→樹木隱藏時→樹木歸位,樹木顯示→樹木顯示時→樹木縮小,小車左右移動,樹木隱藏→開始無限循環(huán)。

操作步驟

添加素材:一輛小車,兩棵樹木,我們希望樹木縮小來形成小車的相對運動;讓小車左右移動豐富小車運動軌跡。

頁面載入時:

樹木1:1000ms內縮小到高為1,寬為1;

樹木2:1000ms內縮小到高為1,寬為1;

小車:用500ms 向左移動 20個單位;

小車:用500ms 向右移動 20個單位;

等待:1000ms

隱藏:樹木1;

隱藏:樹木2。

(注意:上邊的等待1000ms,如果不設置等待1000ms,會導致頁面加載時,樹木還沒有縮小便全部隱藏,但是小車的移動雖然向兩個方向移動,但是卻又先后順序,就是因為穩(wěn)重一開始講的那四句奇怪的話,同一目標小車,相同動作移動,會有先后順序)

選中 樹木1 設置交互:

隱藏時:

  • 樹木1:瞬間回復到原始大??;
  • 等待:50ms;
  • 隱藏:樹木1。

顯示時:

  • 樹木1:1000ms內縮小到高為1,寬為1;
  • 小車:用500ms 向左移動 20個單位;
  • 小車:用500ms 向右移動 20個單位;
  • 等待:1000ms;
  • 隱藏:樹木1。

(此時,已經實現小車和樹木1無限循環(huán)移動,接下來只要設置樹木2的無限循環(huán)移動即可)

選中 樹木2 設置交互:

隱藏時:

  • 樹木2:瞬間回復到原始大小;
  • 等待:50ms;
  • 隱藏:樹木2。

顯示時:

  • 樹木2:1000ms內縮小到高為1,寬為1;
  • 等待:1000ms;
  • 隱藏:樹木2。

ok~完成

原型交互圖

Axure RP 9 教程—開著小汽車回家

總結

共勉~

原型文件下載鏈接:https://pan.baidu.com/s/1hxw03x9B7KLk0EnETJtKkw

提取碼:puxn

 

作者:王得宇AIPM,公眾號:他們已經在路上了

本文由 @王得宇AIPM 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 親,樹的單獨交互隱藏時該顯示吧

    回復