文章分享了抖音短視頻中交互動效的制作方法,一起來學習下。
第一章知識點
- 1.1歌曲封面旋轉效果
- 1.2喜歡按鈕交互效果
- 1.3收藏按鈕交互效果
- 1.4關注按鈕交互效果
1.3收藏按鈕交互效果
1.3.1設計思考
圖形有兩個狀态,但是無法像心形形狀一樣通過填充顔色(選中效果)來實現兩種狀态的切換,所以我們需要借助動态面闆來完成。
我們為動态面闆建立兩個狀态,狀态一:未收藏,狀态二:已收藏。當動态面闆處于狀态一時,點擊後切換到狀态二,當動态面闆處于狀态二時,點擊後切換到狀态一。确定思路後我們開搞。
1.3.2素材準備
(1)拖入一個星形形狀(邊框)22*21,填充顔色為白色
(2)拖入一個星形形狀(實心)22*21,填充顔色為黃色
(如果你的元件庫沒有,可以關注我的公衆号(皮先生PM)回複“限時免費”,就能下載我收藏的近1000個圖标)
1.3.3交互設置
(1)單擊星形形狀(邊框),點擊右鍵選擇“轉換為動态面闆”
(2)雙擊星形形狀(邊框),然後添加一個面闆狀态,分别命名為未收藏和已收藏。
(3)雙擊“已收藏”,進入“已收藏”面闆狀态,将準備好的星形形狀(實心)剪切到此處,設置坐标在原點。
(4)為星形形狀(實心)添加用例:鼠标單擊時
(5)選擇動作:設置面闆狀态
(6)選擇狀态:未收藏
(7)回到“未收藏”面闆狀态
(8)同樣為星形形狀(線框)添加用例:鼠标單擊時,選擇面闆狀态為已收藏。這樣就能實現兩種狀态的相互切換了。
大功告成,預覽一下。
1.4關注按鈕交互效果
1.4.1設計思考
整個動效過程:點擊關注按鈕,按鈕轉動半圈後變成了對号,再轉動半圈,最後縮小消失。
利用到了元件的旋轉、顯示、隐藏和縮小(設置尺寸),下面就讓我們一步一步來完成。
1.4.2素材準備
(1)拖入一個圓形20*20填充為紅色,拖入一個加号填充為白色,與紅色圓形組合成“關注按鈕”。
(2)拖入一個圓形20*20填充為白色,拖入一個對号填充為紅色,與紅色圓形組合成“關注按鈕過渡”,在樣式中設置元件角度180。
1.4.3交互設置
階段一:按鈕轉動半圈
(1)為組合“關注按鈕”添加用例:鼠标單擊時
(2)添加動作:旋轉
(3)選擇旋轉的元件:勾選關注按鈕(組合)
(4)設置參數如下:
旋轉角度:180
錨點:中心
動畫:線性,時間:600
階段二:變成了對号,再轉動半圈
(5)繼續添加動作:等待 600(如果不設置等待,階段二将會和階段一同時進行)
(6)繼續添加動作:隐藏,勾選關注按鈕(組合)
(7)繼續添加動作:顯示,勾選關注按鈕過渡(組合),并勾選置于頂層。
(8)參考階段一,讓組合“關注按鈕過渡”轉動半圈。
階段三:縮小消失
(9)繼續添加動作:等待 600(600毫秒怎麼來的,這是階段二的進行時間,設置等待的意義就是表達階段三是在階段二完成後進行的,而不是同時進行)
(10)繼續添加動作:設置尺寸
參數如下:
寬、高都為0(即為消失),
錨點:中心;
動畫:線性;時間:500
至此三個階段設置結束,如下圖,最後隻剩一步
(11)讓關注按鈕過渡(組合)隐藏,然後和關注按鈕(組合)設置在同一坐标下。
大功告成,預覽一下。。
課程預告:
Axure系列教程(二):抖音短視頻中超簡單的吸睛大法
知識點分布
,