起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程 動(dòng)態(tài)面板滑動(dòng)效果（10）
示例原型：http://pan.baidu.com/s/1mgjYahi
實(shí)現(xiàn)目標(biāo)：
1、? 點(diǎn)擊登錄滑出登錄面板
2、? 點(diǎn)擊確定滑出動(dòng)態(tài)面板
最終效果如下：
這種效果可以通過(guò)兩種方法實(shí)現(xiàn)： 首先準(zhǔn)備需要的元件：1個(gè)矩形，1個(gè)文本，1個(gè)動(dòng)態(tài)面板（里面包含2個(gè)矩形，一個(gè)作為面板，一個(gè)作為登錄按鈕） 把動(dòng)態(tài)面板添加一個(gè)狀態(tài)，準(zhǔn)備工作就結(jié)束了。 注意：每個(gè)主要元件記得加上標(biāo)簽啊！ 第一種：動(dòng)態(tài)面板滑入滑出方式 1、? 設(shè)置文本面板“登錄”的onclick事件，為點(diǎn)擊時(shí)動(dòng)態(tài)面板滑動(dòng)到絕對(duì)位置（x,y）（如圖1），x和y代表滑動(dòng)到指定位置時(shí)的x軸與y軸的坐標(biāo)值（如圖2、圖3），坐標(biāo)值可以通過(guò)拖動(dòng)動(dòng)態(tài)面板到指定位置取得。最后，設(shè)置動(dòng)畫(huà)效果為緩慢進(jìn)入。 圖1 圖2 圖3 2、? 設(shè)置動(dòng)態(tài)面板狀態(tài)1里面的矩形登錄按鈕的onclick事件，為點(diǎn)擊時(shí)動(dòng)態(tài)面板滑動(dòng)到絕對(duì)位置（x,y）（如圖4），這時(shí)的x和y代表滑動(dòng)到初始位置時(shí)的x軸與y軸的坐標(biāo)值，設(shè)置動(dòng)畫(huà)效果為緩慢退出。 圖4 3、? 點(diǎn)擊右鍵設(shè)置順序?yàn)橹糜诘讓?，并將?dòng)態(tài)面板拖到初始位置。 4、? 第一種方式完成，可以生成原型看效果了。 第二種：動(dòng)態(tài)面板狀態(tài)切換方式 在開(kāi)始的時(shí)候我們給動(dòng)態(tài)面板增加了一個(gè)狀態(tài)，在第二種方式里它才會(huì)起到作用，怎么做呢？我們繼續(xù)： 1、? 把動(dòng)態(tài)面板拖到最終顯示的位置，將動(dòng)態(tài)面板狀態(tài)2上移到第一位（如圖5右側(cè)指示）； 2、? 設(shè)置文本面板“登錄”的onclick事件，為點(diǎn)擊時(shí)設(shè)置動(dòng)態(tài)面板的狀態(tài)為狀態(tài)1，并設(shè)置進(jìn)行動(dòng)畫(huà)為向下滑動(dòng)（如圖5）； 圖5 3、? 設(shè)置動(dòng)態(tài)面板狀態(tài)1里面的矩形登錄按鈕的onclick事件，為點(diǎn)擊時(shí)設(shè)置動(dòng)態(tài)面板的狀態(tài)為狀態(tài)2，并設(shè)置退出動(dòng)畫(huà)為向上滑動(dòng)。 4、? 第二種方式完成，生成原型就能看到想要的效果了。 本文作者：@小樓；轉(zhuǎn)載自：Axure原創(chuàng)教程網(wǎng) Axure教程 axure新手入門(mén)基礎(chǔ)（1） Axure教程 axure新手入門(mén)基礎(chǔ)（2） Axure教程 axure新手入門(mén)基礎(chǔ)（3） Axure教程 axure新手入門(mén)基礎(chǔ)（4） Axure教程 axure新手入門(mén)基礎(chǔ)（5） Axure教程 關(guān)于Axure rp觸發(fā)事件中IF和ELSE IF的使用說(shuō)明（6） Axure教程 動(dòng)態(tài)面板滑動(dòng)效果（10） 更多Axure學(xué)習(xí)技巧：Axure專欄
新手入門(mén)基礎(chǔ)教程目錄
寫(xiě)的雖然不是特別具體，但是認(rèn)真看一下，跟著思路肯定可以做出來(lái)啊。樓上在那嗶嗶的同學(xué)學(xué)習(xí)能力需要提高啊，這點(diǎn)自學(xué)能力還是要有的
? 圖真的看不見(jiàn)
看不懂，我知道看不懂是我的不對(duì)，你好心還弄個(gè)教程，但是可以不要這么簡(jiǎn)筆好嘛，大神
誒，真的好難看懂
挺不錯(cuò)的，看了幾分鐘，感覺(jué)沒(méi)那么難。
鏈接失效。。
初學(xué)者，看完朦朦朧朧，希望可以有視頻教程，看起來(lái)更加直觀、、
還是上視頻吧，這樣的效果體驗(yàn)很差。
這教程有點(diǎn)坑爹啊、。。。
還行，就是動(dòng)態(tài)的哪個(gè)效果沒(méi)鬧明白
這樣說(shuō)，不如不說(shuō)
除了圖片有點(diǎn)小，別的都挺好，不過(guò)還是學(xué)會(huì)了[嘻嘻]
寫(xiě)的不清不楚的，對(duì)初學(xué)者沒(méi)任何幫助
圖真的太小了
作者說(shuō)了半天也沒(méi)說(shuō)明白，其實(shí)第一種做法是用動(dòng)態(tài)面板從視野看不見(jiàn)的地方滑進(jìn)我們的視野，第二種則是利用了動(dòng)態(tài)面板自身顯示時(shí)所帶的滑出動(dòng)作。真是的，小樓這家伙不說(shuō)明白，圖也這么小，為了他那個(gè)入門(mén)到精通的視頻其用心顯得也忒小了吧
總結(jié)的精辟，
挺好，學(xué)習(xí)了