中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

之前在做微信讀書的原型時(shí)被書城搖一搖的加載交互效果卡了兩天的時(shí)間，最后終于想出如何制作，本文將分享如何制作這樣的一個(gè)翻頁效果。

一、最終效果展示

體驗(yàn)地址：點(diǎn)擊此處

交互說明：點(diǎn)擊“BUTTON”開始交互效果

下方的圖標(biāo)開始用翻頁的形式切換至下一個(gè)圖標(biāo)——循環(huán)效果。

二、制作方式

1. 繪制所需的原件

本文需要繪制一個(gè)用來觸發(fā)效果的按鈕，一個(gè)循環(huán)面板，和兩個(gè)用來作為基本素材的動(dòng)態(tài)面板。

觸發(fā)按鈕就是普通的按鈕，實(shí)際的話可以換成一個(gè)搖一搖的圖標(biāo)，但本文只是作為一個(gè)簡單的示范，所以就使用了Axure自帶的按鈕元件如下：

循環(huán)面板也是很簡單，直接拖入一個(gè)動(dòng)態(tài)面板，然后添加兩個(gè)狀態(tài)用來當(dāng)作循環(huán)使用，然后起名字叫循環(huán)面板。因?yàn)閯?dòng)態(tài)面板是不可見的，所以只要放在非觸發(fā)區(qū)域（在案例中就是除了觸發(fā)按鈕以外的區(qū)域）即可。

如下圖所示（1即循環(huán)面板）：

作為素材的動(dòng)態(tài)面板稍微麻煩一點(diǎn)，首先是第一個(gè)動(dòng)態(tài)面板，動(dòng)態(tài)面板大小調(diào)整為和素材大小一樣，然后添加四個(gè)狀態(tài)（具體看效果，本文中的效果是四個(gè)圖標(biāo)翻頁，所以有四個(gè)狀態(tài)）。每個(gè)狀態(tài)為一個(gè)圖標(biāo)，但這個(gè)圖標(biāo)素材要分為左右兩半，不然實(shí)現(xiàn)不了翻書效果。

在本文案例中，我將四個(gè)狀態(tài)中的圖標(biāo)分別命名為綠山、紅心、發(fā)現(xiàn)、星星。State1是綠山，State2是紅心，State3是發(fā)現(xiàn)，State4是星星。

同時(shí)，State2、3、4中圖標(biāo)素材的右半邊素材透明度需要改成0，因?yàn)槿绻贿@樣設(shè)置同樣也無法實(shí)現(xiàn)翻書效果，State 1是呈現(xiàn)在最表面的效果所以一開始右半邊透明度不能為0，但在設(shè)置循環(huán)面板時(shí)同樣會(huì)將其設(shè)置為0。

如下圖所示：

第二個(gè)動(dòng)態(tài)面板是重點(diǎn)，大小和第一個(gè)動(dòng)態(tài)面板一樣，因?yàn)樗夭拇笮∈且粯拥?。?dòng)態(tài)面板也設(shè)置為四個(gè)狀態(tài)，但是每個(gè)狀態(tài)素材跟第一個(gè)動(dòng)態(tài)面板不一樣。動(dòng)態(tài)面板2中State 1中的素材為動(dòng)態(tài)面板1中State1中左半邊素材+State2中右半邊素材，即左綠山+右紅心。

依此類推，State2中的素材為左紅心+右發(fā)現(xiàn)，State3中的素材為左發(fā)現(xiàn)+右星星，State4中的素材為左星星+右綠山。如此設(shè)置的原因是因?yàn)樯弦粚訄D標(biāo)在翻頁的過程中，會(huì)露出下一層的圖標(biāo)。

如下圖所示：

然后將動(dòng)態(tài)面板1置于動(dòng)態(tài)面板2之上，兩個(gè)面板應(yīng)該剛剛好重合。

最終效果如下圖所示：

2. 觸發(fā)按鈕的設(shè)置

觸發(fā)按鈕的設(shè)置很簡單，鼠標(biāo)單擊時(shí)設(shè)置循環(huán)面板為向后循環(huán)，循環(huán)間隔為1000毫秒（這個(gè)間隔跟循環(huán)面板的設(shè)置有關(guān)，但1000毫秒翻頁速度就剛剛好，不會(huì)太快也不會(huì)太慢）。

如下圖所示：

3. 循環(huán)面板的設(shè)置

這里是最難的地方。

循環(huán)面板設(shè)置用例為狀態(tài)改變時(shí)。

添加條件，當(dāng)動(dòng)態(tài)面板1處于State 1 即處于綠山圖標(biāo)時(shí)，設(shè)置綠山圖標(biāo)右半邊不透明度為100，左半邊圖標(biāo)不透明度為0，動(dòng)態(tài)面板2狀態(tài)為State 1（雖然此時(shí)動(dòng)態(tài)面板2初始狀態(tài)已經(jīng)處于State 1 了，但后面循環(huán)時(shí)動(dòng)態(tài)面板就不會(huì)再處于State 1了），動(dòng)態(tài)面板1則將State 1向左翻轉(zhuǎn)切換為State 2，時(shí)間為1000毫秒。

然后等待1000毫秒（等待翻頁效果完成），再將State 1中的綠山圖標(biāo)右半邊不透明度設(shè)為0，左半邊不透明度設(shè)為100（此時(shí)動(dòng)態(tài)面板1處于State 2 即紅山圖標(biāo)狀態(tài)，因此State 1 中的變化不會(huì)表現(xiàn)出來）。

同樣的，當(dāng)動(dòng)態(tài)面板1處于State 2 時(shí)，對State 2 的圖片即紅山圖片進(jìn)行動(dòng)作設(shè)置，如下圖所示：

依此類推繼續(xù)設(shè)置動(dòng)態(tài)面板1的State 3和State 4，設(shè)置完成即完成了這個(gè)效果的所有設(shè)置。

三、總結(jié)

該效果其實(shí)并不難，但邏輯上很抽象，需要不斷地去調(diào)試更改才能得到最后的效果。同時(shí)建議對素材取合適的命名，比如：對每個(gè)圖標(biāo)的左右兩半邊都命名，避免設(shè)置時(shí)弄錯(cuò)圖片。

在這個(gè)效果上可以再結(jié)合實(shí)際進(jìn)行潤色，比如：翻頁結(jié)束時(shí)出現(xiàn)彈出窗口，如像微信讀書中的書籍推薦等，具體效果可以看這個(gè)地址中的“發(fā)現(xiàn)”-“書城”-“搖一搖”，有需要實(shí)現(xiàn)這個(gè)效果的小伙伴可以評論里留言。

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

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