起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程：長頁在與區(qū)域內(nèi)滾動之動效升級
很多APP列表頁都有一個效果，滑動底部后提示沒有信息后，松手，頁面自動滑動隱藏沒有信息的提示。那么這個效果在Axure里怎么實現(xiàn)呢？
很多APP列表頁都有一個效果，滑動底部后提示沒有信息后，松手，頁面自動滑動隱藏沒有信息的提示。如果在Axure實現(xiàn)這個動態(tài)效果內(nèi)，我們開始。
基于上一篇文章 “Axure教程：長頁或長圖滾動效果”前面一些相同的步驟我就詳細(xì)展開了。
有問題或失敗時去詳細(xì)查看，因此可能增加學(xué)習(xí)路徑，對這篇文章的體驗不好，但對你的學(xué)習(xí)會有很多幫助，通過失敗去找原因和解決，會讓你融會貫通。
Axure版本：8.0.0.3293。
成品展示：
操作流程一
（1）創(chuàng)建固定區(qū)域動態(tài)面板（固定展示區(qū)域高度435）? 易出錯誤：固定區(qū)域不要設(shè)置為自動調(diào)整。
（2）需要滾動的長頁（長圖高度1196）
這里我只截取一小部分，對比之前文章中的長圖底部增加一個提示。
（3）長頁轉(zhuǎn)換為動態(tài)面板
易出錯誤：長頁沒有轉(zhuǎn)換為動態(tài)面板。（因為8.0版本圖片、形狀、快照沒有拖動時的用例）
（4）長頁的動態(tài)面板，放入固定區(qū)域動態(tài)面板中的Stat1中
（5）設(shè)置長圖可移動區(qū)域
計算可移動區(qū)間：頂部=435-1197=-762；底部=1197。
為什么這么計算看上一篇文章，主要時長頁在固定展示區(qū)域內(nèi)被拖動時不至于劃出屏幕。
在固定區(qū)域（動態(tài)面板）的Stat1中，為長頁（動態(tài)面板）設(shè)置拖工時用例：
- 移動為垂直移動
- 添加便捷：頂部>=-762,底部<=1197
操作流程二（操作都在固定區(qū)域（動態(tài)面板）State1中）
以上就完成了，長頁在固定顯示區(qū)域內(nèi)的拖動問題，以下內(nèi)容內(nèi)本次文章的重點內(nèi)容。
（1）創(chuàng)建神奇的天際線
創(chuàng)建一個水平線，放到長頁（動態(tài)面板）上任意位置。
（2）計算下，滑到到底部后，如何要自動回彈的高度
我這里高度=80
（3）計算自動滑動后，長頁的絕對位置（這個算法有跟多種，我這里只是其中一種）
- x的絕對值不變，我這里=0
- y的絕對值=頂部+回彈高度=-762+80=-662
（4）設(shè)置天際線的天花板高度
水平線的X值，不要超過長頁（動態(tài)面板）的寬，要在TA的里面；
水平線的y值，就是天花板，-662。
（5）最后的動作，回彈動畫
為長頁（動態(tài)面板）設(shè)置拖動結(jié)束時的動作，發(fā)起一個絕對位置y=-662。(661或660 也可以，否則有時候會閃一下)
設(shè)置發(fā)起絕對位置的觸發(fā)條件：
當(dāng)長頁（動態(tài)面板），發(fā)展到（接觸）天花板（之前天際線的水平線）時，就要觸頂反彈了。
OK全部完成，F(xiàn)5試下效果。
完工閑聊
其實日常原型中，不用做這么復(fù)雜的動畫效果，給好說明注釋其實就可以了。
當(dāng)然如何你是為了做效果和Demo展示另當(dāng)別論，不過RP的展示效果真的很差。
本文由@?紫鼠 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
我的在上一篇教程練習(xí)的基礎(chǔ)上做這次的練習(xí)，因為版本不同做到“二、（5）”做不下去了。我那版本的axure-拖動結(jié)束時-移動里，沒有“絕對位置”這個選項，這效果怎么做？第二升級動效介紹到后面感覺有點亂，看的不是很明白，步驟能具體點嗎？
你使用的版本號是多少，很早版本有絕對位置的功能。 但是翻譯的命名不同。老版本的效果有些記不清了。
這個方式其實是，8.0之前滾動圖的制作方法。8.0之前沒有”一（5）”的邊界功能
可以加我微信：zhougl1203 進(jìn)一步溝通
這次的教程確實有意沒有沒有說的特別仔細(xì)；
用的給內(nèi)部培訓(xùn)的思路了，教程有些步驟不夠詳細(xì)就會出錯，出錯再找到解決方案，可以印象更深刻。
下次注意還是盡量詳細(xì)些，畢竟不想內(nèi)部，隨時可以實操解答。