Axure RP 9 教程:開著小汽車回家
本文教大家在Axure RP 9中制作小汽車動效,一起來看看~
人與人的差距就是在不經意間拉開的;人要學會享受孤獨,孤獨的時候才會想很多。
當你凝望深淵時,深淵也在凝望你,當你斬盡惡龍時,你也變成了惡龍,用小人對付你的招數去對付小人,終究,你也變成小人,出淤泥而不染,濯清漣而不妖,大概也是在講這個道理吧~
咳咳,扯了這么多沒用的~~~
知識不在于占有,不在于瀏覽器存了多少資源,不在于網盤攢了多少秘密,在于能否學會,能否靈活運用,并進一步升華。
知識往往在丟在旮旯角落之后沒多久就會忘掉,我們要時?;貞洠瑫r常反思,這樣才能不斷進步。
效果圖
使用工具
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~完成
原型交互圖
總結
共勉~
原型文件下載鏈接:https://pan.baidu.com/s/1hxw03x9B7KLk0EnETJtKkw
提取碼:puxn
作者:王得宇AIPM,公眾號:他們已經在路上了
本文由 @王得宇AIPM 原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協(xié)議
親,樹的單獨交互隱藏時該顯示吧