1. 程式人生 > >Axure-製作App上下滑動效果

Axure-製作App上下滑動效果

如何實現上下滾動效果:

讓內容在顯示區域滾動;
內容面板沒有接觸到頂部時,讓內容面板移動至頂部;
內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。

1、所需元件

首先,我們需要準備以下元件:

2個矩形(300*30,分別命名為“頂部”、“底部”),動態面板(300*400,命名為“顯示區域”)。

點選【顯示區域】,在此面板的狀態1中,新增一個動態面板(300*750)。

2、填充“內容”面板

雙擊內容面板中的狀態1,填充一些元素,方便檢視滾動效果。

3、新增事件

(1)讓內容在顯示區域滾動。即,讓內容面板中的內容,在顯示區域面板的區域中滾動展示。

選中【顯示區域】面板,新增【拖動時】用例,新增【移動】動作,勾選【內容】面板,移動方式為【垂直移動】,點選確定。

(2)當內容面板沒有接觸到頂部時,讓內容面板移動至頂部。

① 先編輯條件,內容面板未接觸到頂部。

選中【顯示區域】面板,新增【拖動結束時】用例,【新增條件】。條件編輯如下圖:

②讓內容面板移動至頂部。

新增【移動】動作,勾選【內容】面板,移動【到達】至【0,0】。

(3)內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。

①先編輯條件,內容面板接觸到頂部,但未接觸底部。

選中【顯示區域】面板,新增【拖動結束時】用例,【新增條件】。條件編輯如下圖:

②讓內容面板移動至頂部。

新增【移動】動作,勾選【內容】面板,移動【到達】至【0,-350】,點選確定。

-350=400-750(顯示區域面板高度-內容面板高度)

以上就是用Axure 製作上下滾動效果的全部過程,可以點選預覽檢視一下~

密碼:15kp

相關推薦

Axure-製作App上下滑動效果

如何實現上下滾動效果: 讓內容在顯示區域滾動; 內容面板沒有接觸到頂部時,讓內容面板移動至頂部; 內容面板接觸到頂部,沒有接觸到底部時,把內容面板的底部定位到底部元件位置。 1、所需元件 首先,我們需要準備以下元件: 2個矩形(300*30,分別

自定義ViewGroup實現多個單頁面上下滑動效果

閱讀過自定義ViewGroup實現仿淘寶的商品詳情頁的童鞋,應該都瞭解了ViewGroup中onMeasure、onLayout、onTouchEvent等相關方法的使用。在介紹仿淘寶商品詳情頁時,我們提到過現在網上很多實現方法是使用ScrollView巢狀兩個

Axure8.0 頁面上下滑動效果實現

1.開啟Axure 8.0,在網上找一個iPhone外殼的圖片,然後新增大小和手機螢幕相等的動態面板,命名為“螢幕” 2.然後雙擊State1,新增一個矩形,寬度=螢幕寬度,長度任意。 然後選中矩形,點選滑鼠右鍵,選擇轉換為動態面板,命名為“內容

Axure學習筆記整理4-實現APP頁面上下滑動及彈回效果

相對於其他互動效果,Axure製作app頁面的上下滑動效果還是比較簡單的。 為了使效果顯著一點,先做一款簡單的原型如下。 第一步,將下面框起來的部分要做滑動的內容選好,點選滑鼠右鍵‘轉化為動態面板’,並把這個動態面板命名為‘介面內容’; 第二步,選中‘介面內容’動態面板,選擇

Axure學習筆記整理4-實現APP頁面上下滑動(垂直滾動條)

這裡有個比較簡單的互動方法用來實現頁面上下滑動的效果: 1、拖拽一個動態面板設定高度667,寬度375,雙擊進入state1,拖拽一些部件組成頁面,要超過動態面板本身的667尺寸;如下面這個state1的圖片: 2、在state1中選擇除了頂部狀態列的剩餘部分,剩餘部分選擇’轉換為動態面板

Axure製作放大鏡效果

1.準備工作 左側工具欄,拖拉出一個圖片框 設定成200*200大小,匯入圖片,命名小圖。 再拖拉出一個動態面板,設定成200*200 雙擊state1,拖拉出一個圖片框設定 500*500大小,匯入圖片,命名為大圖 兩張圖片最好是等比的,看著效果更

CoordinatorLayout + AppBarLayout + CollapsingToolbarLayout+NestedScrollView實現上下滑動懸停效果

這張圖解析上面幾個控制元件的關係:  轉載:https://www.jianshu.com/p/1f3974408528   CoordinatorLayout配合AppBarLayout、CollapsingToolbarLayout、Toolbar使用 轉載

如何用Axure快速製作APP互動原型

對於產品經理來說,熟練使用一些常用軟體是一項十分必要的技能。其中,作為一個專業的快速原型設計工具,Axure RP無疑在產品人心中擁有一個難以撼動的地位。但就要PS一樣,雖然足夠專業,但同樣也會存在使用靈活性的一些問題。 今天我們就談談,如何用Axure快速製作APP互動原型,不對,更準確的說法應該是:如何

android 垂直方向上下滑動阻尼效果

在開發過程時,View中需要上下阻尼效果,有網上有很多,直接上程式碼。 package com.android.feature; import android.content.Context; import android.graphics.Rect;

android GridView 去掉自帶點選邊框效果和禁止上下滑動

1.去掉自帶點選邊框效果: <com.yw.store.ui.HotKeyGridView android:id="@+id/search_home_gridview" android:layout_width="fill_pa

原來操控介面可以這麼簡單----安卓上下滑動縮放頂部圖片,左右滑動結束當前Activity,及View柔和回彈效果

先上效果圖: 上傳圖片不能超過2M,費了好大勁。每一張gif動的有點快,將就看。 首先說原理: 為activity的xml檔案根佈局新增setOnTouchListener。上下滑動和左右滑動的所有操作都是在OnTouchListener的onTouch方法中實現的,通過

ionic2 使用slides製作滑動效果的型別選擇欄

類似的效果如下圖: 1. 生成一個component ionic g component MySlide 2. 在my-slide.html中新增程式碼: <ion-slides class="slide-title" [options]="mySlide

基於vue實現上下滑動翻頁效果

    18年年底的時候,一直在做年度報告的H5頁面,因為專案需要,需要實現上下滑動翻頁,並且上滑的頁面比正常頁面的比例要縮小一定比例。     效果類似於http://www.17sucai.com/pins/demo-show?id=7834,這個連結是基於jquery實現的,我寫的是和這個例子效果一樣

Android 端天氣預報APP的實現(一)天氣顯示介面之上下滑動

最近參加了一個小比賽,選了天氣預報APP這個題目,最初選擇它,是想練練網路資料獲取和資料解析方面的知識,後來發現倒是學到了不少介面的東西。下面我來一步步講解一下我是怎麼完成的吧~ 首先,天氣預報最直觀的部分應該就是天氣顯示介面了,這裡,我想做成可以有上下滑動的

ios簡單製作淘搶購活動 滑動效果

最近做專案要做一個類似淘寶淘搶購 的活動效果,就簡單做了一個demo。菜鳥水平~~~~ 直接貼程式碼 - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor

AXURE原型手機端螢幕滑動效果

1.以iphone6為例,在工作區域拖入一個動態面板,命名為“動態面板1”寬375,高667.2.雙擊State1進入動態面板1裡,在動態面板裡再拖入一個動態面板,命名為“頂部選單”寬375,高667,雙擊State1進入頂部選單,設定需要的效果和文字。3.回到動態面板1裡,

Axure教程】動態面板製作彈出框效果

作為一名網際網路產品設計人員,相信很多同行每天上班電腦上都會執行著一個軟體——Axure,她能幫助網站需求設計者,快捷而簡便的建立基於網站構架圖的帶註釋頁面示意圖、操作流程圖、以及互動設計,並可自動生成用於演示的網頁檔案和規格檔案,以提供演示與開發。 隨著網際網路展品的發

[原型設計]Axure製作首頁輪播圖片切換效果

1、新建Axure PR檔案,取名“Axure製作首頁輪播圖片切換效果” 2、獲取素材,進入36Kr官網主頁,獲取輪播圖片素材。 獲取素材 3、拖拽動態面板控制元件Dynamic Panel,取名“輪播圖片”,設定6個狀態分別取名為1、2、3、4、5、6,動態面

ios 導航欄透明, 上下滑動 導航欄 顏色漸變

滾動 pear action 文字 oid ati scom compact arm p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px "PingFang SC"; color: #008400 } p.p2 { m

仿ios的滑動效果

public 頭部 ati 設置 class iss generated ttr stat package code.suibianchou.com.custormview2;import android.annotation.SuppressLint;import and