效果說明：（1）頁面載入后定時(shí)4s自動(dòng)循環(huán)輪播；（2）圖片向左滑動(dòng)，原點(diǎn)指示隨圖片滑動(dòng)變化；（3）鼠標(biāo)移入原點(diǎn)可切換到對應(yīng)的圖片。
制作前準(zhǔn)備：Axure8+3張圖片
動(dòng)效制作：
1.將page1命名為“圖片輪播”——拖入“圖片”控件，將其命名為“pic",并調(diào)整其樣式大小為“375*200”。
2.雙擊“pic"控件添加圖1，調(diào)整圖片大小為375*200，將其轉(zhuǎn)換為“動(dòng)態(tài)面板”，再分別添加兩個(gè)狀態(tài)，在狀態(tài)2，3添加圖2和圖3。
3.回到圖片輪播頁，拖入”橢圓“控件，調(diào)整大小及樣式，復(fù)制2個(gè)，平行排列對齊。將原點(diǎn)1灰色填充，原點(diǎn)2，3白色填充。將3個(gè)原點(diǎn)組合并將其轉(zhuǎn)換為"動(dòng)態(tài)面板”，添加狀態(tài)2（命名為2），狀態(tài)3（命名為3），分別在狀態(tài)2，3填充第2和第3個(gè)原點(diǎn)為灰色，其余為白色。
4.拖入3個(gè)“熱區(qū)”控件，分別覆蓋在原點(diǎn)1，2，3上（熱區(qū)大小與圓大小一致），分別命名為point1,point2,point3。
5.添加用例——自動(dòng)循環(huán)輪播：
（1）用例1，選中“圖片輪播”頁面，選擇交互“頁面載入時(shí)”，添加動(dòng)作“設(shè)置面板狀態(tài)”，在配置動(dòng)作做選擇“pic動(dòng)態(tài)面板”，選擇狀態(tài)為Next，向后循環(huán)，循環(huán)間隔4000毫秒（4s定時(shí)自動(dòng)循環(huán)輪播），添加進(jìn)入和退出動(dòng)畫為向左滑動(dòng)。同樣的，設(shè)置“point動(dòng)態(tài)面板”，選擇狀態(tài)為Next，向后循環(huán)，循環(huán)間隔4000毫秒（4s定時(shí)自動(dòng)循環(huán)輪播），添加進(jìn)入和退出動(dòng)畫為逐漸。
步驟5基本上就完成了圖片定時(shí)自動(dòng)循環(huán)輪播的效果了????。
6.添加用例——鼠標(biāo)移入原點(diǎn)切換至對應(yīng)的圖片
（1）選中熱區(qū)“point1",添加交互“鼠標(biāo)移入時(shí)”，添加動(dòng)作“設(shè)置面板狀態(tài)，配置動(dòng)作，設(shè)置“pic動(dòng)態(tài)面板”狀態(tài)為state1,進(jìn)入和退出動(dòng)畫為淡入淡出。同樣的，設(shè)置“point動(dòng)態(tài)面板”狀態(tài)為1，進(jìn)入和退出狀態(tài)為逐漸。
(2)選中熱區(qū)“point1",添加交互“鼠標(biāo)移出時(shí)”，添加動(dòng)作“設(shè)置面板狀態(tài)”，在配置動(dòng)作做選擇“pic動(dòng)態(tài)面板”，選擇狀態(tài)為Next，向后循環(huán)，循環(huán)間隔4000毫秒（4s定時(shí)自動(dòng)循環(huán)輪播），添加進(jìn)入和退出動(dòng)畫為向左滑動(dòng)。同樣的，設(shè)置“point動(dòng)態(tài)面板”，選擇狀態(tài)為Next，向后循環(huán)，循環(huán)間隔4000毫秒（4s定時(shí)自動(dòng)循環(huán)輪播），添加進(jìn)入和退出動(dòng)畫為逐漸。在這里一定特別注意要勾選“首個(gè)狀態(tài)延時(shí)4000毫秒后切換，如果沒有勾選，則會(huì)出現(xiàn)鼠標(biāo)一移出，效果混亂的現(xiàn)象。
The end. 常見的圖片輪播效果就完成了，超級簡單，只需要5分鐘的時(shí)間搞定！
附上原型鏈接，希望大家指正不正確的地方。跪謝。
鏈接: https://pan.baidu.com/s/1eS1Brpw 密碼: rqrj
