起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識Axure教程 | 制作一個商品飛入購物車的動效
本期給大家?guī)淼氖屈c(diǎn)擊購買按鈕后，“商品飛入購物車的動效”。
一、照例先上gif
二、制作方式
我們準(zhǔn)備三個需要用到的元素，分別為右側(cè)的購物車（包括鼠標(biāo)移入的樣式），左側(cè)的點(diǎn)擊按鈕（包括不可點(diǎn)擊的樣式），以及代表商品移動時的小紅點(diǎn)。
首先我們將元素3設(shè)為隱藏并設(shè)置名稱，比如我這里設(shè)置為：“移動icon”。
其次我們?yōu)樵?的數(shù)字部分設(shè)置名稱，比如我這里設(shè)置為：“購物車數(shù)量模塊”。
然后我們?yōu)樵?“放入購物車”的按鈕設(shè)置交互，如圖所示。這樣我們就能實(shí)現(xiàn)點(diǎn)擊“按鈕”后，一個小紅點(diǎn)飛入到購物車的動畫效果了。
簡單解釋下，實(shí)現(xiàn)的原理：
- 我們設(shè)置點(diǎn)擊的判斷，當(dāng)“點(diǎn)擊按鈕”被點(diǎn)亮的時候，我們允許它被點(diǎn)擊。
- 當(dāng)按鈕點(diǎn)擊后，顯示“移動icon”，并移動它，向“購物車”的位置移動。當(dāng)中我調(diào)整了4次方向和時間，為了模擬“拋物線”的效果。（實(shí)際效果并不理想，不知道有沒有更好的實(shí)現(xiàn)辦法）。
- 當(dāng)動畫結(jié)束后，我們要隱藏“移動icon”，并把它恢復(fù)到原點(diǎn)。然后我們要讓“點(diǎn)擊按鈕”設(shè)置為不可點(diǎn)擊狀態(tài)，最后我們要為“購物車”中的購物數(shù)量加1。
這樣我們的“商品飛入購物車的動效”就結(jié)束了。
本文原型鏈接：https://vnmga7.axshare.com
歡迎朋友們拍磚，多多指出其中的不足。
擴(kuò)展閱讀
Axure教程 | 如何使用中繼器當(dāng)數(shù)據(jù)庫，制作web端幻燈片？
Axure教程 | web端的驗(yàn)證碼（普通驗(yàn)證碼和滑塊驗(yàn)證碼）如何制作？
其他原型鏈接
- 幻燈片原型鏈接：https://1bqith.axshare.com
- 注冊和登錄鏈接：https://tk5yg4.axshare.com
- 普通驗(yàn)證碼鏈接：https://k4x9cz.axshare.com
- 滑塊驗(yàn)證碼鏈接：https://61uzxz.axshare.com
本文由 @jiantian 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
評論
shopBox_x是哪個元素？還有放入購物車的列表是不是中繼器做的？
飛入的小紅點(diǎn)要用什么做呀，矩形還是文本框呀？
矩形、橢圓形 都可以的