文章分享了抖音短視頻中交互動效的制作方法，一起來學習下。

第一章知識點

• 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系列教程（二）：抖音短視頻中超簡單的吸睛大法

知識點分布

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部