Android仿最美應用詳情頁動畫效果

效果圖

這裏寫圖片描述

效果分解

將視圖劃分爲內容視圖和標題視圖(貌似也不合適,因爲沒有標題,只是放置了一些圖標)

內容視圖

這裏寫圖片描述

標題視圖:覆蓋在內容視圖上方

這裏寫圖片描述

動畫的臨界點:標題視圖的收藏按鈕(下載按鈕)的底部與內容視圖的收藏按鈕(下載按鈕)的頂部剛好重疊

臨界點視圖:紅色的粗線條

這裏寫圖片描述

1 向上滾動

1.1 內容視圖的收藏按鈕和下載按鈕平緩移動到標題視圖的收藏按鈕和下載按鈕對應的位置

1.2 收藏文字和下載文字消失

2 向下滾動

2.1 標題視圖的收藏按鈕和下載按鈕平緩移動到內容視圖的收藏按鈕和下載按鈕對應的位置

2.2 收藏文字和下載文字通過縮放動畫漸顯

實現思路分析

1 向上滾動(剛好到底臨界點)

1.1 文字通過setVisibility(View.INVISIBLE);設置不可見

1.2 內容視圖的收藏按鈕和下載按鈕通過setVisibility(View.INVISIBLE);設置不可見

1.3 標題視圖的收藏按鈕和下載按鈕通過setVisibility(View.VISIBLE);設置可見(默認不可見)

1.4 動畫

1.4.1 讓標題視圖的收藏按鈕執行位移動畫,動畫路徑:內容視圖的收藏按鈕—>標題視圖的收藏按鈕

1.4.2 讓標題視圖的下載按鈕執行位移動畫,動畫路徑:內容視圖的下載按鈕—>標題視圖的下載按鈕

2 向下滾動(剛好到底臨界點)

2.1 文字通過setVisibility(View.VISIBLE);設置可見

2.2 內容視圖的收藏按鈕和下載按鈕通過setVisibility(View.VISIBLE);設置可見

2.3 標題視圖的收藏按鈕和下載按鈕通過setVisibility(View.INVISIBLE);設置不可見

2.4 動畫

2.4.1 讓內容視圖的收藏按鈕執行位移動畫,動畫路徑:標題視圖的收藏按鈕位置—>內容視圖的收藏按鈕位置

2.4.2 讓內容視圖的下載按鈕執行位移動畫,動畫路徑:標題視圖的下載按鈕位置—>內容視圖的下載按鈕位置

2.4.3 文字的縮放動畫的執行

當然,爲了動畫的一致,使用AnimatorSet執行動畫

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章