每次開啟支付寶首頁滑動,頭部的伸縮動畫甚是吸引人。於是自己決定動手來實現乙個。
無圖言虛空,效果圖:
首先看到這種效果,第一反應就是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...