本文跟大家講解一下，如何制作微信拍攝小視頻按鈕動效，一起來看看~

看看效果：

制作過程

1. 分析

截兩張微信拍攝過程的界面，一共要制作兩個動效：

①按鈕交互：當(dāng)長按小圓圈時，小圓圈變小，大圓圈變大；

②圓形進度條交互：綠色的圓形進度條走一圈。

2. 制作按鈕交互

①畫兩個圓圈命名，大圓88*88，小圓66*66。

②新建交互長按小圓時：

1. 設(shè)置尺寸大圓=160*160，動畫線性300ms
2. 設(shè)置尺寸小圓=62*62，動畫線性300ms

③效果展示

3. 制作圓形進度條交互

這里我們用到一個小訣竅，畫四個半圓弧，利用圖層的順序做出圓形進度條效果：

①畫一個大圓和一個小圓，利用布爾運算修建出外輪廓

同理使用矩形居中減去，剩下一個半圓輪廓。

復(fù)制四個，兩個水平翻轉(zhuǎn)。

設(shè)置圖層順序，如圖所示，然后排成一個圓。

②在小圓鼠標(biāo)長按時，添加動作，等待，左綠旋轉(zhuǎn)180度

效果圖：

③設(shè)置右綠動效

這個時候，需要旋轉(zhuǎn)右綠了，為了不讓左灰擋住右綠，需要將右綠置頂。

效果圖：

4. 最終優(yōu)化

由于圓形進度條時長按時才會出現(xiàn)的，所以我們需要設(shè)置隱藏，然后長按等待300ms后出現(xiàn)。

5. 最終效果圖

好了，今天的教學(xué)就到這里，大家有什么想學(xué)的交互或疑問可以評論噢，我會根據(jù)評論做教學(xué)。

源文件下載地址鏈接：https://pan.baidu.com/s/1DuXh_j-xYXRmq4GRTy3K6g

提取碼：ceco

本文由 @索大佩羅娜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議