仿支付寶首頁頭部伸縮效果

2021-08-26 05:36:04 字數 1222 閱讀 4392

每次開啟支付寶首頁滑動,頭部的伸縮動畫甚是吸引人。於是自己決定動手來實現乙個。

無圖言虛空,效果圖:

首先看到這種效果,第一反應就是coordinatorlayout布局,android studio新建專案時,可以直接新建個scrolling activity來檢視demo效果。

官方自帶的布局示例:

gradle關聯

implementation 'com.android.support:design:26.1.0'
簡單介紹使用到的幾個布局:

coordinatorlayout

coordinatorlayout協調者布局,用來協調其子view並以觸控影響布局的形式產生動畫效果的布局。coordinatorlayout是乙個頂級布局。

collapsing*******layout

接下來,我們就使用以上的屬性來完成demo

實現原理

讓頭部隨著內容下拉而展開,隨著內容上拉而收縮。

3、collapsing*******layout的子布局有兩種,展開時顯示的布局和*******,其中*******又包含了兩種布局,展開時的和收縮時的。

展開時,(掃一掃、付錢)的布局:

layout_margintop="50dp"預留出*******的高度,避免布局重疊。

*******裡的兩種布局:

4、最下面的布局可以是nestedscrollview,一定要在布局中設定以下屬性,這裡我直接用的demo中的布局:

@override

//垂直方向偏移量

int offset = math.abs(verticaloffset);

//最大偏移距離

if (offset <= scrollrange / 2) else

//根據偏移百分比計算掃一掃布局的透明度值

float scale = (float) offset / scrollrange;

int alpha = (int) (255 * scale);

bgcontent.setbackgroundcolor(color.argb(alpha, 25, 131, 209));

}

iOS 仿支付寶刮刮樂效果

仿支付寶刮刮樂效果,可以按照自己需求更改展示刮出來的效果的view 即刮開後刮刮樂效果展示 支付寶裡有個刮刮樂中獎,和大街小巷裡的類似彩票刮刮樂的效果一樣。一 實現思路 其實很簡單的三步 二 程式實現 雖然思路簡單,但是還需要注意 1.這兩個控制項的位置切記要相同 2.一定要先建立下面的展示刮出來的...

仿支付寶支付成功動畫

與支付寶支付成功後類似的乙個動畫,本人小白乙隻大神請繞過,畫的菜大家見諒 直接將view拷貝進專案中即可,動畫開關為loadcircle和stop方法,提供了監聽介面ondonecircleanimlistner以便於和外部邏輯銜接 import android.animation.animator...

PathMeasure 仿支付寶支付動畫

在 android 自定義 view 中,path 可能用的比較多,pathmeasure 可能用的比較少,就我而言,以前也沒有使用過 pathmeasure 這個 api,看到別人用 pathmeasure 和 valueanimator 結合在一起完成了很好的動畫效果,於是我也學習下 pathm...