Android 翻頁效果加蘋果桌面應用抖動效果

Rance935發表於2019-03-02

效果預覽

這是最近專案的一個需求,作者寫這篇文章目的不是想教大家如何做這個動畫。很多動畫很多效果,都有開源作者已經實現了,我們只需要拿來用。在實際開發中開發效率才是第一步,原始碼的學習可以放在自己沒事的時候來做。分享下我拿到一個需求時是怎樣一步一步來攻克的。個人見解,不吝賜教!

Android 翻頁效果加蘋果桌面應用抖動效果

分析

首先我們先將動畫分解,這一動畫分為兩部分

  • 翻頁動畫
  • item抖動效果

然後我們再來看佈局,可能一開始拿到這個效果圖,我們直接就認為筆記本里面就是一個gridview或者一個橫向的recyclerview。其實不然,我們認真分析可以看出不管是gridview還是橫向recyclerview,它們的item第一行從左往右都是item0、item1、item2、item3,而我們實現的效果是筆記本的左邊頁->右邊頁,也就是必須要左邊半頁填滿後才向右邊半頁填資料,作者用了兩個兩行兩列的girdview放在筆記本里面,實現了這一效果。如下圖(注意看item的下標):

Android 翻頁效果加蘋果桌面應用抖動效果

編碼實現

翻頁效果

如果我們自己來寫這個翻頁的效果,還是有點複雜。經過搜尋我發現了一個類庫android-FlipView已經實現了這一效果,在這裡也感謝原作者的貢獻。android-FlipView支援左右翻頁和上下翻頁。
作者將api設計得儘可能跟ListView一樣。FlipView擁有一個一般的adapter,你可以在如下設定adapter:

void setAdapter(ListAdapter adapter);
ListAdapter getAdapter();複製程式碼

獲取可翻轉的頁數和當前頁:

int getPageCount();
int getCurrentPage();複製程式碼

類似於ListView中scrollTo, smoothScrollTo, scrollBy 和smoothScrollBy 作用的一些方法:

void flipTo(int page);
void smoothFlipTo(int page);
void flipBy(int pageDelta);
void smoothFlipBy(int pageDelta);複製程式碼

翻頁效果最大的難題已經解決,接下來問題就是資料封裝,巢狀兩個girdview了,這裡簡單貼下程式碼,感興趣的可以直接去看原始碼。

/**
         * 當前資料8個一頁,獲取總頁數
         * 兩種情況1:資料長度剛好是8的倍數,那麼總頁數=資料長度÷8
         *        2:資料長度不為8的倍數,總頁數=資料長度÷8 + 1 (為什麼加1?因為長度與8相除有餘數,餘數這一部分也要佔一頁)
         */
        if (familyInfos.size() % 8 == 0) {
            totalPage = familyInfos.size() / 8;
        } else {
            totalPage = familyInfos.size() / 8 + 1;
        }

        /**用一個新的集合來裝每一頁裡面的資料,形成一個新的集合
         * 迴圈總頁數次   用List.subList(int start, int end)方式取出資料  注意這裡的引數不是下標,從1開始
         * 同樣兩種情況1:噹噹前頁的資料剛好8個的時候直接取
         *            2:最後一頁的情況,就是從 頁碼*8->資料長度
         */
        List<List<FamilyInfo>> family = new ArrayList<>();
        for (int i = 0; i < totalPage; i++) {
            List newlist = null;
            if (i * 8 + 7 < familyInfos.size() - 1) {
                newlist = familyInfos.subList(i * 8, (i + 1) * 8);
            } else {
                newlist = familyInfos.subList(i * 8, familyInfos.size());
            }
            family.add(newlist);
        }
        adapter = new FlipViewAdapter(this, family);
        flipView.setAdapter(adapter);複製程式碼

抖動效果

開始作者用的是gridview的setLayoutAnimation方法,不瞭解LayoutAnimation的可以去搜尋下,但是這種方式只能在girdview第一次載入的時候才會有,後面我們再需要開啟動畫就不行了。
所以只有一個item一個item的去做動畫了。分析一下這個動畫,這個抖動的動畫是以item的中心點左右旋轉。ok,那就用rotate旋轉動畫

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="100"
    android:fromDegrees="-2"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:toDegrees="2" />
<!--    
  duration      動畫執行時間
  fromDegrees   動畫開始時的角度   
  toDegrees     動畫結束時物件的旋轉角度,正代表順時針     
  pivotX    屬性為動畫相對於物件的X座標的開始位置  
  pivotY    屬性為動畫相對於物件的Y座標的開始位置
  repeatCount 動畫的重複次數 infinite表示迴圈
  repeatMode  重複模式  restart:重新從頭開始執行。reverse:反方向執行。
-->複製程式碼

總結

以上只是一個大概的思路,感興趣的可以去我的github看下原始碼。重點說明,因為是在平板上面做的,沒有做適配。可以用模擬器看效果或者橫屏模式。

本文作者:Rance935本文出處:Android翻頁效果加蘋果桌面應用抖動效果轉載請在開頭註明作者詳細資訊和本文出處
歡迎關注我的微信公眾號和QQ群,分享Android 開發和網際網路內容
Android技術分享:群號534813930
微訊號:androidparks
公眾號:AndroidParks

Android 翻頁效果加蘋果桌面應用抖動效果

相關文章