Axure教程:如何制作微信拍攝小視頻按鈕動效

13 評論 7033 瀏覽 30 收藏 5 分鐘

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

看看效果:

【Axure教程】制作微信拍攝小視頻按鈕動效

制作過程

1. 分析

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

按鈕交互:當(dāng)長按小圓圈時,小圓圈變小,大圓圈變大;

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

【Axure教程】制作微信拍攝小視頻按鈕動效

【Axure教程】制作微信拍攝小視頻按鈕動效

2. 制作按鈕交互

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

【Axure教程】制作微信拍攝小視頻按鈕動效

②新建交互長按小圓時:

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

【Axure教程】制作微信拍攝小視頻按鈕動效

③效果展示

【Axure教程】制作微信拍攝小視頻按鈕動效

3. 制作圓形進度條交互

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

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

【Axure教程】制作微信拍攝小視頻按鈕動效

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

【Axure教程】制作微信拍攝小視頻按鈕動效

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

【Axure教程】制作微信拍攝小視頻按鈕動效

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

【Axure教程】制作微信拍攝小視頻按鈕動效

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

【Axure教程】制作微信拍攝小視頻按鈕動效

效果圖:

【Axure教程】制作微信拍攝小視頻按鈕動效

③設(shè)置右綠動效

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

【Axure教程】制作微信拍攝小視頻按鈕動效

效果圖:

【Axure教程】制作微信拍攝小視頻按鈕動效

4. 最終優(yōu)化

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

【Axure教程】制作微信拍攝小視頻按鈕動效

5. 最終效果圖

【Axure教程】制作微信拍攝小視頻按鈕動效

好了,今天的教學(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 看完一篇原型設(shè)計文章啦,感覺還是不太會?

    ? 想從0基礎(chǔ)開始學(xué)習(xí)Axure么?推薦你找Axure實戰(zhàn)班的助教小可愛@CC-起點學(xué)院(微信:qidiancc520),回復(fù)關(guān)鍵詞:大禮包

    領(lǐng)取原型設(shè)計大禮包,多學(xué)多練,你也能成為原型設(shè)計高手哦!

    來自廣東 回復(fù)
  2. 為啥進度條組成園后放上去,小園點不了了呢

    回復(fù)
    1. 要把小圓圖層置頂呀

      來自福建 回復(fù)
  3. 進度條怎么弄呀

    回復(fù)
  4. 受教了!正好需要!

    回復(fù)
    1. 嘻嘻 謝謝支持

      來自福建 回復(fù)
  5. 動畫線性選什么?

    來自廣東 回復(fù)
    1. 制作圓形進度條交互前兩天不是很清楚操作

      來自廣東 回復(fù)
    2. 就直接選線性

      來自福建 回復(fù)
    3. 制作圓形進度條交互,在第一步這里卡住了— —!

      來自廣東 回復(fù)
    4. 哈哈,就直接設(shè)置長按圓形時,設(shè)置尺寸,動畫選擇線性,居中,就可以了啊

      來自福建 回復(fù)
  6. 左綠旋轉(zhuǎn)是往左側(cè),而非右側(cè)

    來自北京 回復(fù)
    1. 錨點的話是右側(cè)呀

      來自福建 回復(fù)