1.前期準備
先在畫布中拉入三個元件,分別是Box, Image, Ellipse,如下圖所示:
Snip20170704_1.png
2.對元件進行編輯
-
全選三個Ellipse, 然后設置Selection Group 為tag(這個隨便起名),這是為了當選中的時候,這組中只有一個高亮顯示
Snip20170704_4.png -
設置選中的時候的顏色
Snip20170704_6.png 分別設置Ellipse的名字為tag1, tag2, tag3
Snip20170704_5.png
- 在屬性面板區域選中Image元件, 右鍵會彈出個對話框,如下圖所示,然后選擇將其轉換成動態面板
Snip20170704_7.png
- 轉換成動態面板后, 會出現State1, 把鼠標移動到它上面,右側會出現 復制狀態, 因為我這里要做三張圖片輪播, 所以就復制兩次就可以了,如下圖所示:
Snip20170704_9.png
- 在對Ellipse進行操作, 先對tag1進行編輯, 添加case(用例)選中tag1然后在 More Events里下拉選擇OnSelected
Snip20170704_10.png
- 在彈出的框里選擇 Set Panel State,在勾選設置, Select state 選擇value, 動畫向左滑動, 時間按需設置, 重點說下 Name or State , 公式This.name可以獲取當前元件的名字, slice這個函數需要可以傳兩個值也可以傳一個值, 當傳兩個值的時候表示從哪到哪, 傳一個值的時候表示從哪到最后, 也是可以傳負數的, 表示從后面倒數多少, 到最后. 那么這里傳-1, 就是可以獲取到tag1里的1.
Snip20170704_12.png
- 設置等待時間
Snip20170704_15.png
- 設置滑動的時候下一張是誰, 如下圖
Snip20170704_13.png
- 復制這個case粘貼給tag2和tag3, 然后設置下指向
- 最后針對tag1, 添加另外一個case ,同樣的, More Events 下拉選擇OnLoad, selected, 選擇tag1自己, 這個操作就是一啟動的時候就選擇了tag1
- 全部配置好的case如下:
tag1.png
tag2.png
tag3.png
3.預覽效果
Untitled.gif
