Axure绘制跑马灯
相信大家在日常的產(chǎn)品設(shè)計(jì)中或多或少的會(huì)涉及到繪制跑馬燈的效果,諸如彈幕效果或者滾動(dòng)公告
那么這樣的效果如何實(shí)現(xiàn)呢,直接上干貨
?
一、功能分析
需要實(shí)現(xiàn)的功能如下:
①在固定區(qū)域內(nèi)展示文字
②從左向右循環(huán)滾動(dòng)展示
實(shí)現(xiàn)的原理如下
?
假設(shè)滾動(dòng)文字的初始位置是x=200,此時(shí)應(yīng)該進(jìn)行的是將滾動(dòng)文字從當(dāng)前坐標(biāo)橫向向左線性移動(dòng),直至正好移動(dòng)出屏幕,也就是負(fù)的文字的長(zhǎng)度,也就是x=-100;當(dāng)移動(dòng)到-100時(shí),再重置文字移動(dòng)到初始位置x=200,此時(shí)不要加線性動(dòng)畫,然后繼續(xù)重復(fù)上述邏輯。
那么以上邏輯需要解決一個(gè)問題就是怎樣一直監(jiān)聽判斷滾動(dòng)文字的位置呢?所以可以使用動(dòng)態(tài)面板每隔一秒切換一次狀態(tài),然后再利用動(dòng)態(tài)面板的狀態(tài)改變時(shí)作為監(jiān)聽位置變化的判斷依據(jù),那么據(jù)此就可以開始咱們的原型繪制了
二、原型制作
1.為了好看在這里拖入一個(gè)手機(jī)殼(最好設(shè)置成在最頂層,目的是為了當(dāng)文字滾出屏幕時(shí)遮擋住文字),坐標(biāo)為x=0,y=0;然后拖入一個(gè)矩形,拖個(gè)合適位置和大小,可以設(shè)置顏色,矩形代表文字的滾動(dòng)區(qū)域和背景,并將其轉(zhuǎn)化成動(dòng)態(tài)面板,設(shè)置兩個(gè)state,轉(zhuǎn)化成動(dòng)態(tài)面板的目的是把他當(dāng)是循環(huán)觸發(fā)器,讓文字能一直循環(huán)滾動(dòng)
2.拖入一個(gè)文本標(biāo)簽,輸入一些文字,由于咱們做的效果是文字從右向左滾動(dòng),所以將其放在手機(jī)殼的最右邊。最重要的是記錄一下當(dāng)前文字的坐標(biāo)x=240,y=160;文字長(zhǎng)度為160。
3.點(diǎn)擊空白處,給頁面加上每隔1秒切換一次動(dòng)態(tài)面板的交互效果
4.點(diǎn)擊動(dòng)態(tài)面板,設(shè)置動(dòng)態(tài)面板變化時(shí),先寫第一個(gè)判斷,當(dāng)文字處于初始位置時(shí)進(jìn)行向左滾動(dòng)至移出屏幕
①選擇判斷值,點(diǎn)擊fx,創(chuàng)建局部變量為滾動(dòng)文字的橫坐標(biāo)x,判斷當(dāng)橫坐標(biāo)x=240時(shí)
?
將滾動(dòng)文字線性平移到正好移出屏幕,也就是上邊記錄的負(fù)的文字寬度
②復(fù)制一個(gè)判斷,判斷當(dāng)正好移出屏幕時(shí),重置當(dāng)前的位置到初始位置
三、效果展示
運(yùn)行查看效果即可
有需要的可以下載成品:
axure繪制的跑馬燈效果-其它文檔類資源-CSDN下載
?
?
?
總結(jié)
以上是生活随笔為你收集整理的Axure绘制跑马灯的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: mysql 1033 Incorrect
- 下一篇: FLUENT中关于边界和域的操作