<acronym id="p33pj"><strong id="p33pj"></strong></acronym>
  • <p id="p33pj"><strong id="p33pj"></strong></p>
    <track id="p33pj"></track><td id="p33pj"></td>
    <p id="p33pj"></p>
  • <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

      1. <p id="p33pj"></p>
        axure商城

        用Axure動態面板制作簡易抽獎小程序

        分享通過Axure動態面板實現簡易抽獎程序的大概思路

        一、目標

        通過axure動態面板的功能,實現一個簡易的抽獎程序。

        二、技能要求

        要求看本來的同學,需要對動態面板的功能又一個基本的掌握。如果不熟悉的話,也可以通過本文來了解一下動態面板的屬性。

        三、目的

        技癢,想寫個文分享一下,輸出一下自己的思路。

        四、背景

        我第一篇文章發布了后,首頁的文章第一的位置很快就被那個高保真抽獎的文章給擠下去了,看那篇文章在上面掛了很久,閱讀量還比我的高,不太爽??戳讼?,人家作者是用前端代碼實現的,題文不符,我就想能不能用axure實現一個差不多的效果。因此想到了動態面板,隨手實現了一下。從想法到實現大概花了半小時,但是寫教程可能要半天。因為碼字有點費手,本落手速慢。

        五、教程

        原型預覽鏈接

        步驟1:新建一個原型,并新建一個頁面

        步驟2:拖一個手機殼模型到頁面中

        步驟3:拖一個動態面板到頁面的手機模型中央位置

        步驟4:拖一個按鈕到動態面板正下方位置

        圖片上傳失敗了,后面再補充圖片吧。

        步驟5:雙擊動態面板,然后拖入一個矩形,矩形背景設置為無背景色。雙擊矩形,進行文字編輯,輸入參與抽獎者姓名。有若干參與者,則新建面板狀態,重復步驟5即可。(人太多的話就放棄這個方式吧,用別人寫好的程序它不香嗎?但是你也可以花時間慢慢搞,裝個×也不錯,想做好看點的話再加上頭像什么的就更好了,這里我就不多說怎么添加頭像了……)

        步驟6:編輯按鈕文字為“開始”,并設置交互樣式,選中樣式背景色為粉色

        步驟7:給按鈕添加單擊事件,添加情形,當按鈕文字為“開始”時,設置按鈕文本為“停止”,且設置選中狀態為“真”,并設置動態面板狀態為下一項,勾上向后循環,且循環時間設置為100毫秒;當前設置完成后,點擊“開始“按鈕后,頁面上動態面板的名字會快速滾動起來。此時為開始抽獎狀態。

        步驟8:繼續給按鈕添加情緒,當按鈕文字為“停止”時,設置按鈕文案為“開始”,且設置選中狀態為“假”,并設置動態面板為“停止循環”;當前設置完成后,點擊“停止”按鈕后,頁面上的動態面板滾動會停止在當前名字。此時為抽獎結束狀態,顯示的名字即為中獎者。

         

         

        給TA打賞
        共{{data.count}}人
        人已打賞
        基礎教程

        Axure教程:高保真滾動抽獎

        2021-10-27 13:59:09

        產品經理基礎教程高級教程

        用axure做出交互高保真原型之:文字輸入超出限制輸入的交互效果

        2022-1-6 12:27:48

        axure商城
        10 條回復 A文章作者 M管理員
        1. 羅羅諾亞

          雖然寫的不完全,但是對萌新很友好,手把手教學

          • 落落同學

            是的,臨時起意,寫的有點草率了。有經驗了,下次寫教程我一定深思熟慮。沒寫清楚的地方大家可以在評論區問我。文章寫了就不能修改了。就是因為平時搜到別人的教程我自己看的都很痛苦,我才有了寫教程的心思,希望能給大家帶來一股清流。

          • 羅羅諾亞

            希望出多點,我這萌新需要你這種老師,挺有用的

          • 落落同學

            我努力,但是網站審核好慢,要好幾天

        2. Xcc

          操作到步驟8好像不行了,單擊事件只能添加一次,可以從開始變成停止,再從停止變成開始怎么實現呢?

          • 落落同學

            不好意思,寫漏了。當抽獎停下來后,根據情形判斷,按鈕文本設置為”開始“,此情形下,單擊事件為,判斷情形,按鈕文本為”開始“,執行設置動態面板狀態,切換到下一項,時間設置為10毫秒,然后勾上向后循環。此處的動態面板設置跟步驟7一致,不同之處在于增加了文本判斷的步驟。

          • 落落同學

            別忘了還有按鈕的選中設置哦

        3. ??????141739

          你這個跟人家差的有點多啊,首先不是隨機的,其次再次抽取無法去掉上一個選中人,再一個說他是用前段代碼實現的?我一臉問號?

        ?
        個人中心
        購物車
        優惠劵
        今日簽到
        有新私信 私信列表
        搜索
        国产亚洲日韩在线a不卡
        <acronym id="p33pj"><strong id="p33pj"></strong></acronym>
      2. <p id="p33pj"><strong id="p33pj"></strong></p>
        <track id="p33pj"></track><td id="p33pj"></td>
        <p id="p33pj"></p>
      3. <pre id="p33pj"><ruby id="p33pj"></ruby></pre>

          1. <p id="p33pj"></p>