axure商城

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

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

使用工具

Axure RP 9

實現邏輯

Axure交互的小邏輯:

相同目標,不同動作:同時進行相同目標,相同動作:分先后不同目標,不同動作:同時進行不同目標,相同動作:同時進行(沒看懂不要緊,在接下來的操作中我再解釋這四句話的意思)

流程:

頁面載入時→樹木縮小,小車左右移動,樹木隱藏→樹木隱藏時→樹木歸位,樹木顯示→樹木顯示時→樹木縮小,小車左右移動,樹木隱藏→開始無限循環。

操作步驟

添加素材

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

頁面載入時

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

選中 樹木1 設置交互:

隱藏時:

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

顯示時:

樹木1 1000ms內縮小到高為1,寬為1;
小車 用500ms 向左移動 20個單位;
小車 用500ms 向右移動 20個單位;
等待 1000ms;
隱藏 樹木1。
(此時,已經實現小車和樹木1無限循環移動,接下來只要設置樹木2的無限循環移動即可)

選中 樹木2 設置交互:

隱藏時:

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

顯示時:

樹木2 1000ms內縮小到高為1,寬為1;
等待 1000ms;
隱藏 樹木2。
ok~完成

原型交互圖

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

總結

共勉~

公眾號:他們已經在路上了
Axure RP 9 教程—開著小汽車回家
原型文件下載鏈接:
https://pan.baidu.com/s/1hxw03x9B7KLk0EnETJtKkw
提取碼:
puxn

給TA買糖
共{{data.count}}人
人已贊賞
Axure教程

打造高品質Axure組件庫就是這么簡單

2019-5-10 11:43:38

Axure教程

【元件庫教程】如何充分利用元件庫快速搭建Web后臺(Tczy出品)

2019-9-3 12:42:58

axure商城
0 條回復 A文章作者 M管理員
    暫無討論,說說你的看法吧
?
個人中心
購物車
優惠劵
今日簽到
有新私信 私信列表
搜索
俄罗斯videoxxxoo