• <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
  • <pre id="gvoe3"></pre>
    <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

  • <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">
      axure商城

      Axure神奇操作實例-通過循環模擬彈幕

      在前兩講中我們講解了如何通過元件的觸發交互或者通過外部動態面板介入來實現循環的效果,那么本次教程趁熱打鐵,我們講講解如何通過循環來模擬頁面的彈幕功能,先看下最終實現的效果。

      交互解析

      按照一貫以來先思考后動手的習慣,我們來看下這個效果設計到哪幾方面的內容:

      1. 模擬自己填寫的內容發送功能(包括按鈕的禁用與啟用等)

      2. 模擬除本人以外的其他用戶發送內容的功能

      3. 模擬彈幕的自動滾動

      那么我們來分析下這三個功能如何實現:

      第一個功能:相對實現比較簡單,只需要判斷文本框中文本值長度是否為空,并且給與下方的橫線、右側的按鈕不同的狀態即可實現了;

      第二個功能:似乎有似曾相識的感覺,如果仔細看的話就能夠發現如果“自己”不發送內容的情況下,一直都是相同的幾個用戶在發送相同的話。沒錯,回到我們的主題了,就是循環,實際上只需要不停的循環就可以模擬出來其他用戶發送內容的效果了。

      第三個功能:仔細想一下,axure中能夠實現滾動的就倆元件動態面板內聯框架,這兩個元件的區別就在于一個在頁面中,一個在頁面外,其實都能夠實現,這里為了方便講解,我們就是用動態面板來實現!

      到這里,我們就能明確功能的實現邏輯了:通過循環效果 動態面板的限制高度模擬彈幕發送及滾動,開整!

      交互制作

      制作彈幕容器

      首先我們需要準備一個容器,這個容器用來存儲我們的原始的彈幕以及后續的彈幕內容,那么這里準備一個矩形,大小按照個人需求調整,我這邊設置的是345*100的尺寸,并且由于我們的彈幕最先出現在最底端,靠左側,那么我們需要設置矩形的對齊樣式為居左,靠下,之后在里面填入我們的原始數據就可以了。

      模擬彈幕循環

      那么在彈幕容器制作完成之后,接下來就需要設置彈幕的自動發送及滾動了,先完成第一步:彈幕的自動發送。

      這里我們用到Axure神奇操作系列 – 循環(第一講)?中講到的觸發功能,首先我們模擬一個用戶的發送循環操作。那么在這里我們首先對元件的載入時交互添加設置文本事件,需要注意由于我們的彈幕是豎向新增,所以切記一定要換行,否則新增的彈幕就會移動到右側去。

      設置文本變化事件之后,等待2000ms用于模擬用戶發彈幕的間隔(如果需要模擬很火爆的效果,可以試試縮小等待事件)

      之后,觸發!,那么我們就得到了這么一個元件~F5看下,就能夠模擬實現彈幕的自增了。

      最后,在中間多插入幾個用戶和用戶的彈幕,設置好等待事件,就可以模擬好多人在一起發彈幕的功能了~

      實現滾動效果

      這里就很簡單了,我們用到了動態面板,在剛剛的彈幕容器上點擊右鍵,轉為動態面板。這里需要注意轉為動態面板后默認動態面板會隨著內容尺寸自動調整大小,所以我們需要把這個選項關閉掉。完成!~

      此時F5一下,彈幕自增滾動效果就出來了~

      實現彈幕發送

      實現彈幕發送實際上只需要兩個元件即可實現,即:文本框、發送按鈕,但是為了好看,我們再加一個邊框,當然邊框根據好看程度可以全包圍或者半包圍,我在這里采用底部邊框顯示,其他邊框隱藏。

      那么我們捋一下我們想要的效果:

      1. 文本框獲取焦點時,通過選中修改邊框顏色;

      2. 文本框中文字長度>0時,啟用發送按鈕;

      3. 點擊發送按鈕后,將文本框中的文本清零,并且禁用自己;

      4. 文本框失去焦點時,通過取消選中修改邊框顏色。

      最后根據三個元件對應的效果,需要設置如下樣式:邊框的選中樣式、發送按鈕的禁用樣式;

      那么我們就得到了以下三個元件:

      最后根據我們的交互需求,對文本框設置交互,就能夠實現我們上面提到的想要的效果了~

      那么到這里,我們就完成了評論的填寫了,最后一步就是發送。那么很明顯這個事件需要配置給發送按鈕。在這里我們實現的是要將文本框中的內容發送到彈幕容器的最底部去,由于這兩個元件都是其他元件,所以我們這里用到局部變量,步驟如下:

      添加全局變量:LVAR1,綁定到文本框的元件文字;LVAR2,綁定到彈幕容器中,最后加上“自己”的用戶名,就可以實現彈幕的發送了。

      那么最后發送完成,需要清空數據框,只需要設置文本框的文本為空就好了~

      最后我們就能夠得到一個完整的彈幕發送功能了。

      最后,對頁面潤色潤色,加上幾個好看的圖片背景,F5預覽看下,看下能不能實現我們想要的效果~

      小結

      通過這個教程想必大家能夠更清楚如何在axure中實現循環操作,并且能夠根據循環的進行和打斷實現各種想要的效果。希望在以后做原型的過程中,多想多做多嘗試,總有一種辦法能夠實現你的目標~

      最后,源文件在附件中有,回復即可下載~

      下載源文件:https://www.pmyes.com/thread-35147.htm

      以上~

      給TA買糖
      共{{data.count}}人
      人已贊賞
      案例教程

      2、移動端查看 —— Axure使用交互

      2018-10-12 16:11:37

      案例教程

      Axure高保真滑動拼圖解鎖實例教程

      2020-2-21 10:52:51

      axure商城
      2 條回復 A文章作者 M管理員
      1. 18***35

        謝謝樓主

      ?
      個人中心
      購物車
      優惠劵
      今日簽到
      有新私信 私信列表
      搜索
      俄罗斯videoxxxoo
    1. <acronym id="gvoe3"><meter id="gvoe3"><address id="gvoe3"></address></meter></acronym>
    2. <pre id="gvoe3"></pre>
      <p id="gvoe3"><strong id="gvoe3"><small id="gvoe3"></small></strong></p>

    3. <pre id="gvoe3"><label id="gvoe3"><xmp id="gvoe3">