1.1頁面布局
1.1.1頁面設(shè)定
新建一個(gè)頁面文件，命名為【橫軸動(dòng)態(tài)滾動(dòng)通知公告】。
在【橫軸動(dòng)態(tài)滾動(dòng)通知公告】頁面內(nèi)新建一個(gè)命名為【橫軸動(dòng)態(tài)滾動(dòng)通知公告】的【組合文件】，并在【組合文件】內(nèi)新建命名為【公告輪播】的動(dòng)態(tài)面板和命名為【布局內(nèi)容】的【組合文件】。
1.1.1.1【布局內(nèi)容】
從元件庫內(nèi)分別拉入四個(gè)【矩形】元件分別做【標(biāo)題】、【一級(jí)背景圖層】、【二級(jí)背景圖層】、【三級(jí)背景圖層】。
【一級(jí)背景圖層】的【填充】色為#ffffff，【二級(jí)背景圖層】的【填充】色為#ffffff，有上下兩個(gè)邊框，邊框樣式為中粗，顏色為#06c1fa，【三級(jí)背景圖層】的【填充】色為#ffffff，有邊框，邊框樣式為細(xì)，顏色為#f2f2f2。
【標(biāo)題】元件做成按鈕的樣式，有陰影、有邊框，左上和右上為圓角，切處于選中狀態(tài)。
將【圖標(biāo)】拖入【標(biāo)題】之后，期間的距離為10px。
1.1.1.2【公告輪播】
將【公告輪播】內(nèi)的【State1】改為【公告】，在公告內(nèi)新建一個(gè)命名為【輪播區(qū)域】的動(dòng)態(tài)面板，并將【輪播區(qū)域】的動(dòng)態(tài)面板分為四頁。
從元件庫內(nèi)分別在冬天面板【輪播區(qū)域】內(nèi)拖入一個(gè)【文本標(biāo)簽】，透明度為100%。
1.2動(dòng)態(tài)交互
1.2.1效果設(shè)計(jì)
1.2.1.1圖標(biāo)交互樣式設(shè)置
選中【圖標(biāo)】，進(jìn)行【交互樣式設(shè)置】，將鼠標(biāo)懸停、鼠標(biāo)按下、選中的交互樣式的另一種狀態(tài)的【圖片】導(dǎo)入。
1.2.1.2文本標(biāo)簽的交互樣式設(shè)置
選中【文本標(biāo)簽】元件，進(jìn)行【交互樣式設(shè)置】，將鼠標(biāo)懸停、鼠標(biāo)按下、選中的交互樣式的【字體顏色】進(jìn)行設(shè)置。
1.2.1.3矩形的交互樣式設(shè)置
選中【標(biāo)題】元件，進(jìn)行【交互樣式設(shè)置】，將鼠標(biāo)懸停、鼠標(biāo)按下、選中的交互樣式的【字體顏色】和【字段顏色】進(jìn)行設(shè)置，并設(shè)定【鼠標(biāo)單擊時(shí)】的用例交互動(dòng)作，配置【選中】動(dòng)作為true。
1.2.2.1實(shí)現(xiàn)橫軸動(dòng)態(tài)滾動(dòng)通知公告的動(dòng)態(tài)交互
選中【公告輪播】動(dòng)態(tài)面板中【公告】內(nèi)的【輪播區(qū)域】，在【屬性】中設(shè)定【向左拖動(dòng)結(jié)束時(shí)】、【向右拖動(dòng)結(jié)束時(shí)】和【載入時(shí)】的交互用例，并配置相關(guān)的動(dòng)作。
步驟一：設(shè)置【向左拖動(dòng)結(jié)束時(shí)】用例的配置動(dòng)作
在case1【組織動(dòng)作】中添加【移動(dòng)】動(dòng)作，在【配置動(dòng)作】內(nèi)勾選Set當(dāng)前元件，設(shè)置當(dāng)前【動(dòng)態(tài)面板】的選擇狀態(tài)為【Next】，【進(jìn)入動(dòng)畫】和【退出動(dòng)畫】全部設(shè)定成【向左滑動(dòng)】，時(shí)間t=20000毫秒，勾選【推動(dòng)/拉動(dòng)元件】，勾選【下方】【方向】，【動(dòng)畫】設(shè)定成【緩進(jìn)緩出】的狀態(tài)，時(shí)間t=500毫秒。
步驟二：設(shè)置【向右拖動(dòng)結(jié)束時(shí)】用例的配置動(dòng)作
在case1【組織動(dòng)作】中添加【移動(dòng)】動(dòng)作，在【配置動(dòng)作】內(nèi)勾選Set當(dāng)前元件，設(shè)置當(dāng)前【動(dòng)態(tài)面板】的選擇狀態(tài)為【Previous】，勾選【向前循環(huán)】，【進(jìn)入動(dòng)畫】和【退出動(dòng)畫】全部設(shè)定成【向左滑動(dòng)】，時(shí)間t=20000毫秒，勾選【推動(dòng)/拉動(dòng)元件】，勾選【下方】【方向】，【動(dòng)畫】設(shè)定成【緩進(jìn)緩出】的狀態(tài)，時(shí)間t=500毫秒。
步驟三：設(shè)置【載入時(shí)】用例的配置動(dòng)作
在case1【組織動(dòng)作】中添加【其他】中的【等待】動(dòng)作，設(shè)定【等待】的時(shí)間（Wait time）為1000毫秒。
添加【移動(dòng)】動(dòng)作，在【配置動(dòng)作】內(nèi)勾選【輪播區(qū)域】動(dòng)態(tài)面板，設(shè)置當(dāng)前【動(dòng)態(tài)面板】的選擇狀態(tài)為【Next】，依次勾選【向后循環(huán)】和【循環(huán)間隔】，并設(shè)定【循環(huán)間隔】的時(shí)間為5000毫秒，設(shè)定【進(jìn)入動(dòng)畫】和【退出動(dòng)畫】全部設(shè)定成【向左滑動(dòng)】，時(shí)間t=20000毫秒，勾選【推動(dòng)/拉動(dòng)元件】，勾選【下方】【方向】，【動(dòng)畫】設(shè)定成【緩進(jìn)緩出】的狀態(tài)，時(shí)間t=500毫秒。
1.3預(yù)覽效果
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。