來一份Android動畫全家桶

時間  2019-11-16
標籤 一份 android 動畫 全家 欄目 Android 简体版
原文   原文鏈接

前言

自上次《MTRVA2.0來啦》發佈後，立刻就有小夥伴問我有哪些Android動畫，過了一段時間又有小夥伴問我啥時候發佈Android動畫。其實，在寫《MTRVA2.0來啦》的時候，此次要講的Android動畫已經完成的差很少了，而在寫這篇文章的時候，下個版本的內容也快寫的差很少了（捂臉）。想提早學習的同窗能夠去個人開源項目CrazyDaily的develop分支，而後再跟個人文章過一遍，挺不錯的學習方法。廢話很少說，Android動畫彷佛已是老生常談的技術點，老生常談的技術感受老是潛移默化成爲Android程序員的必備技能。今天，你們再跟我一塊兒過一遍Android動畫及進階使用。html

效果圖

國際慣例，No picture,say a J8!android

先來看看今天講解的內容吧！git

  • lottie
  • 3D動畫
  • 列表側滑刪除
  • 列表展開閉合
  • 轉場動畫進階
  • 衛星菜單

一個大類可能包含多種動畫，好比轉場動畫用到了貝塞爾曲線的路徑動畫。再則說到Android動畫老是避免不了扯到View，因此期間會帶你們玩一玩自定義View。程序員

高能預警：本篇較長，能夠先選擇本身喜歡的內容進行閱讀或者收藏一下有空再看。github

舒適提示：想看針對第五章節額外附送的屬性動畫源碼分析請點這裏。web

分析

此次的分析隨着效果圖的展現順序一一講解，首先，向咱們迎面走來的是...額，不是，首先，是咱們的多是動畫趨勢的lottie動畫。面試

lottie

簡介

lottie多是一個革命性的動畫庫。爲何這麼說？固然也只是我想這麼說，先來看看lottie的震撼特色：算法

  • 跨平臺，支持Web、Android、iOS和React Native
  • 在線更新動畫，意味着不用發版和減小資源的佔用體積等
  • 相對於原生動畫和GIF更爲輕量
  • 代碼實現簡單，易於上手和維護

咱們再來看看這樣的一個效果圖（官方效果圖）：json

這麼說吧，這種效果原生確定是能寫的，可是很是費腦子和精力，不信的同窗能夠嘗試一下。其次用幀動畫，缺點也很明顯，資源佔用很大。最簡單的就是一張GIF圖片，沒有什麼動畫是GIF搞不定的（手動滑稽），但這應該是最差的方案了。數組

而lottie只要一份記錄動畫信息的json文件，就能夠在各大平臺跑起來。是否是很炫酷？

Android

So Easy！除了這個詞我還真沒想到怎麼形容。廢話很少說，先上代碼：

implementation 'com.airbnb.android:lottie:2.5.4' //gradle依賴

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/splash_lottie"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/splash_height"
        app:lottie_autoPlay="true"
        app:lottie_fileName="lottie/mtrva.json"
        app:lottie_imageAssetsFolder="images/mtrva/" />
複製代碼

是的，就是這麼簡單，只要把你的json文件傳給LottieAnimationView，它就能夠流暢地播放起來，像如何在代碼中使用及其它我就不一一貼出來了，你們能夠點這裏。

擴展

這纔是重頭戲，面試的時候說本身會實現複雜的動畫多是個賣點，但如今彷佛這個工做能夠被設計師取代，咱們先不談什麼級別的設計師，咱們先來講說爲啥咱們Android程序員不能夠來完成這份工做呢？跟我搶飯碗？不可能！

正如項目中Splash頁面底下文字[什麼都懂一點，生活更多彩一些][廋金體]，感興趣就玩一玩，真的頗有意思！

簡單分析一下，Splash頁面的動畫，logo圖標沿着s型的路徑，淡入，放大。很簡單的一個動畫，原生實現也是很簡單的。重點在於如何開發這樣的lottie動畫，只須要Adobe After Effects+bodymovin就能夠輕鬆導出一份這樣的json文件。而詳細的安裝及環境配置能夠點這裏，不過英文要好哦，否則只能看看蹩腳的翻譯。

簡單的開發能夠很快入門，我剛玩了一下子，就開發了這樣的一個效果：

很惋惜，好像導出在Android端運行不太兼容，沒有達到預期的效果，多是我使用姿式不對。就玩了一下子，弊端就體現出來了，這也是各類跨端的弊端，兼容性問題。一個庫開源，使用者老是避免不了踩坑，例如上面xml中lottie_imageAssetsFolder屬性添加是由於json中有圖片資源，須要圖片資源的路徑且圖片資源名要改成image_0，具體緣由能夠打開json文件瞧一瞧。

那麼有同窗問有沒有什麼現成的json嗎？AE這玩意好像學起來挺麻煩的，這個確定有，lottiefiles挺不錯的一個網站，點擊preview能夠拖拽你的json文件進行預覽和簡單地編輯。

關於lottie動畫介紹差很少就到這裏，關鍵點都說了，剩下的多是你的AE熟練度了。這玩意無法速成，須要大量經驗積累！難點並非技術，而是創意！創意！創意！

3D動畫

進入首頁，最早刺激我眼球的是右下角的妹子，其次是它的動畫，這樣的效果我最早在百度貼吧上看到的，如今好像去掉了，這也是我第一家公司面試的時候的做品，頗有親切感！

咱們簡單地拆解一下動畫，能夠分爲這些：3D翻轉、平移、陰影漸變和vignette。

3D翻轉

這個動畫的核心，用的是補間動畫，你也能夠植入view中，我相信這對你來講並不難。

拆解動畫：view分爲兩面，一面翻上去或者一面翻下去，而後展現另外一面，因此分爲4個動畫TopInAnimation、TopOutAnimation、BottomInAnimation和BottomOutAnimation，Top和Bottom爲反向操做，所以這裏只分析Top。

若是沒圖，我猜有些同窗很差理解，這裏給出一張中間單幀圖，畫得很差，諒解，諒解。

不知道你們瞭解setRotationX這個方法嗎，不清楚的能夠點這裏。最多見就是咱們的車輪，車軸就是X軸，而後側着看。這樣一想，是否是A和B都在作rotationX動畫，但這是不夠的，假如A面繞的X軸是高度中間等分線，直到A消失，也是消失在等分線的位置，腦補一下，而事實是A消失於頂部水平線，所以得作平移動畫，也就是一邊rotationX一邊translationY。

瞭解這個後，咱們再來了解兩個核心類Camera和Matrix。篇幅緣由，只給出連接，你們能夠深刻了解，其實就算整片文章都介紹，那也說不完。這裏說一下Camera的主要做用是將3D模型投影在2D的屏幕上，而Matrix主要經過一個3x3的矩陣對圖像進行平移、旋轉、縮放和錯切變化。

在上代碼以前，補充一個知識，左右手座標系。

Camera是基於左手座標系的，它也應該是基於OpenGL的，OpenGL貌似是右手座標系，而Android屏幕座標系的Y軸方向正好與Camera的Y軸方向相反。

Camera比較好理解，你能夠想象攝影大哥扛着攝像機對着屏幕左上角（原點），這個挺形象吧！Camera的默認位置是（0,0,-8），單位是英寸。Matrix相對比較複雜一點，你們能夠看看這篇文章Android中圖像變換Matrix的原理、代碼驗證和應用，這是我早期學習時收藏的文章，優秀！

簡單介紹完這兩大核心類，咱們來看看在項目中的運用：

static class TopOutAnimation extends Animation {
	...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        mCamera.save();
        final float rotate = -DEGREE + DEGREE * interpolatedTime;
        mCamera.rotateX(rotate);
        mCamera.getMatrix(mMatrix);
        mCamera.restore();
        mMatrix.preTranslate(-mWidth / 2, 0);
        mMatrix.postTranslate(mWidth / 2, mHeight - mHeight * interpolatedTime);
        t.getMatrix().postConcat(mMatrix);
    }
}

 static class TopInAnimation extends Animation {
 	...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        mCamera.save();
        final float rotate = DEGREE * interpolatedTime;
        mCamera.translate(0, -mHeight + interpolatedTime * mHeight, 0);
        mCamera.rotateX(rotate);
        mCamera.getMatrix(mMatrix);
        mCamera.restore();
        mMatrix.preTranslate(-mWidth / 2, -mHeight);
        mMatrix.postTranslate(mWidth / 2, 0);
        t.getMatrix().postConcat(mMatrix);
    }
}
複製代碼

先來分析一下TopOutAnimation，當interpolatedTime=0的時候，rotate=-90即模型是與屏幕是垂直的，當interpolatedTime=1的時候，rotate=0即正常位置。preTranslate是在旋轉前平移模型的位置，至於爲何是-mWidth/2和0，緣由也很簡單，記住Camera核心做用就好了，就是我上面說的，將3D模型投影在2D的屏幕上，因爲Camera的初始位置就是屏幕的原點，作旋轉的時候，投影到畫布的圖形確定是不正常的，由於不是正向的，那麼只要在camera旋轉前向左平移寬度的一半即爲正向，但要在旋轉後回到原來的位置，所以調用postTranslate且x值爲mWidth/2。我相信這個比較好理解，因此不貼圖了，至於preTranslate的y值是0是由於咱們初始化定義的camera的rotateX是-90即與屏幕垂直，是這樣的一個變換過程：

有同窗問，那我可不可一開始就在底部，這樣我postTranslate的時候就不用移動了，從邏輯上一點毛病都沒有，但事實上效果詫異，爲何呢？由於Matrix操做的是咱們的模型而非屏幕，甚至移動的距離是原來的幾倍，還發現變小了，爲何呢？這很簡單，你離光源越遠，確定越小，至於爲啥移動距離是原來的幾倍，我給你畫張圖：

那麼是否是就這一種方法呢？那確定不是，感興趣的同窗能夠本身去嘗試，本身動手實踐過才印象最深入。回到咱們討論點，因爲咱們preTranslate的y值是0使得投影效果在最頂部所以須要最終的view從底部不斷往上偏移，故調用postTranslate的y值是mHeight-mHeight*interpolatedTime。

有了TopOutAnimation的基礎分析，咱們理解TopInAnimation相對容易一點。

上面的代碼其實能夠改爲這樣：

static class TopInAnimation extends Animation {
 	...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        mCamera.save();
        final float rotate = DEGREE * interpolatedTime;
        mCamera.rotateX(rotate);
        mCamera.getMatrix(mMatrix);
        mCamera.restore();
        mMatrix.preTranslate(-mWidth / 2, -mHeight);
        mMatrix.postTranslate(mWidth / 2, mHeight - interpolatedTime * mHeight);
        t.getMatrix().postConcat(mMatrix);
    }
}
複製代碼

那是否是Camera的y軸平移等同於Matrix的postTranslate平移呢？只能說近似等同。此次我直接畫變換過程：

最後跟TopOutAnimation同樣調用postTranslate的平移就好了。

關於3D翻轉就先介紹到這，不懂的能夠問我，若是哪裏不對的或者有歧義的地方歡迎指正。

平移

這個就比較簡單了，直接上代碼：

public void start(boolean isTop, int index) {
        final float distance = -mTranslationYDistance * index;
    if (isTop) {
        mForegroundView.startAnimation(mTopOutAnimation);
        mBackgroundView.startAnimation(mTopInAnimation);
        ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f)
                .setDuration(DURATION);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(animation -> {
            final float value = (float) animation.getAnimatedValue();
            final float oppositeValue = 1 - value;
            ...
            setTranslationY(distance * oppositeValue);
        });
        animator.start();
    } else {
        mForegroundView.startAnimation(mBottomInAnimation);
        mBackgroundView.startAnimation(mBottomOutAnimation);
        ValueAnimator animator = ValueAnimator.ofFloat(0f, 1.0f)
                .setDuration(DURATION);
        animator.setInterpolator(new AccelerateDecelerateInterpolator());
        animator.addUpdateListener(animation -> {
            final float value = (float) animation.getAnimatedValue();
            final float oppositeValue = 1 - value;
			...
            setTranslationY(distance * value);
        });
        animator.start();
    }
}
複製代碼

代碼也給出3D翻轉的調用，向上平移的時候向下翻轉，向下平移的時候向上翻轉，平移動畫用的是ValueAnimator，由於咱們還須要根據value計算陰影的顏色，一塊兒來看看吧！

陰影漸變

爲啥要搞個漸變呢？由於要真，當立方體翻滾的時候，因爲光線緣由，一部分確定愈來愈暗，一部分愈來愈亮。臥槽，物理這麼6？還行，也就每次考試90來分。

//top
int foreStartColor = (int) mArgbEvaluator.evaluate(oppositeValue * 0.8f, 0x00000000, 0xff000000);
int foreCenterColor = (int) mArgbEvaluator.evaluate(oppositeValue * 0.4f, 0x00000000, 0xff000000);
int[] foreColors = {foreStartColor, foreCenterColor, 0x00000000};
int backStartColor = (int) mArgbEvaluator.evaluate(value * 0.8f, 0x00000000, 0xff000000);
int backCenterColor = (int) mArgbEvaluator.evaluate(value * 0.4f, 0x00000000, 0xff000000);
int[] backColors = {backStartColor, backCenterColor, 0x00000000};
mForegroundDrawable.setColors(foreColors);
mBackgroundDrawable.setColors(backColors);
//bottom
int foreStartColor = (int) mArgbEvaluator.evaluate(value * 0.8f, 0x00000000, 0xff000000);
int foreCenterColor = (int) mArgbEvaluator.evaluate(value * 0.4f, 0x00000000, 0xff000000);
int[] foreColors = {foreStartColor, foreCenterColor, 0x00000000};
int backStartColor = (int) mArgbEvaluator.evaluate(oppositeValue * 0.8f, 0x00000000, 0xff000000);
int backCenterColor = (int) mArgbEvaluator.evaluate(oppositeValue * 0.4f, 0x00000000, 0xff000000);
int[] backColors = {backStartColor, backCenterColor, 0x00000000};
mForegroundDrawable.setColors(foreColors);
mBackgroundDrawable.setColors(backColors);
複製代碼

mArgbEvaluator是Android提供的ArgbEvaluator類用來根據[0,1]某個值獲取兩種顏色漸變過程該進度時候的顏色值，好像挺拗口。咱們這裏操做的是drawable來實現漸變，那麼drawable是誰的呢？是用戶設置的子view嗎？那確定不是，否則要被打死。是咱們在獲取用戶子view的時候在這基礎上添加了一個ImageView與子view平級，上代碼：

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    ...
    View foregroundView = getChildAt(1);

    FrameLayout foregroundLayout = new FrameLayout(context);
    LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);

    removeAllViewsInLayout();
    ...
    ImageView foregroundImg = new ImageView(context);
    ...
    foregroundImg.setImageDrawable(mForegroundDrawable);
    ...
    foregroundLayout.addView(foregroundView);
    foregroundLayout.addView(foregroundImg);

    addViewInLayout(foregroundLayout, 0, params);
    ...
    mForegroundView = (FrameLayout) getChildAt(1);
}
複製代碼

這裏只給出ForegroundView的代碼，其它貼出來毫無心義，代碼也很簡單，在子view外層套一層FrameLayout，而後添加負責陰影漸變的ImageView，漸變效果與咱們平移時進度有關。

vignette

之因此加這個，跟咱們的陰影漸變同樣，要真。什麼是vignette？vignette大概就是暗角的意思。舉個栗子？

其主要特徵就是在圖像四個角有較爲顯著的亮度降低。這種效果本身去研究又是一堆公式，好在有大佬提供了方便。這裏咱們使用GPUImage來達到這樣的效果，該庫主要提供各類各樣的圖像處理濾鏡，而且支持照相機和攝像機的實時濾鏡。很惋惜的是這玩意創意來自於iOS。

那咱們如何在Android中使用呢？

GPUImageVignetteFilter filter = new GPUImageVignetteFilter();
filter.setVignetteCenter(new PointF(0.5f, 0.5f));
filter.setVignetteColor(new float[]{0.0f, 0.0f, 0.0f});
filter.setVignetteStart(0.0f);
filter.setVignetteEnd(0.75f);
GPUImage gpuImage = new GPUImage(context);
BitmapDrawable bitmapDrawable = (BitmapDrawable) ContextCompat.getDrawable(context, id);
gpuImage.setImage(bitmapDrawable.getBitmap());
gpuImage.setFilter(filter);
Bitmap bitmap = gpuImage.getBitmapWithFilterApplied();
複製代碼

id是咱們的資源id，主要就是要拿到一個bitmap對象，其它還支持file和uri。vignetteCenter就是咱們向外擴展的起始點，通常在中心，例如咱們上面的圖片例子，vignetteColor是暗角的顏色，vignetteStart和vignetteEnd就是漸變程度。

3D動畫是否是So Easy？是否是很炫酷？想不想本身實現一個？

關於3D動畫先到這結束了，佔用篇幅相對較長，看到這挺有耐心。

列表側滑刪除

long long ago，這個效果貌似是模仿...模仿啥來着？記不起來了，算了，早期的時候我也寫過這個玩意，代碼找不到了，哈哈，其實挺簡單，主要就是觸摸事件的運用，難點多是用戶體驗，滑起來卡卡的，那玩個毛。

但如今都什麼年代了，實現這種效果更簡單了，Android直接給咱們提供了ItemTouchHelper快速實現拖拽和側滑刪除。但須要簡單地修改一下，由於Android提供給咱們的好像與預期差了那麼一點點，因爲我比較懶且正好看到一個庫itemtouchhelper-extension是針對側滑刪除的，體驗還不錯，但仍是無法知足個人需求，例如我想用戶關閉界面的時候知道菜單是不是打開狀態。那我只能使用CV大法而後修改，果真最靈活的仍是CV源碼進行修改。

本節主要是想介紹ItemTouchHelper，除了這，Android還提供了不少RecyclerView的幫助類，例如DiffUtil[MTRVA就是基於這個]，SnapHelper[幫助咱們在某一個地方停住，例如你想嘗試用RecyclerView實現卡片滑動，不妨試試]，這兩個比較經常使用，固然還有其它的哦，你們不妨去看看這個包[androidx.recyclerview.widget]裏面的東西，固然支持包裏面也有，說不定有你想要的。

列表展開閉合

關於這個點貌似挺尷尬的，由於用MTRVA能夠輕鬆實現，我都不知道要不要介紹，關鍵有幾個用戶同窗會問這個，趁這個機會簡單說一下吧。

好比效果圖中到聯繫人列表有展開閉合的效果，怎麼實現的呢？首先咱們要排除直接操做view，好比讓view隱藏等等。這是不可取的，應該用數據去驅動UI，這個我已經強調不少遍了。先看一看代碼：

private void switchStatus(ContactHeader item, View icon) {
    final int index = mData.indexOf(item);
    final String flag = item.getIndex();
    if (item.isFlod()) {
        icon.animate().rotation(90).setDuration(500).start();
        mHelper.addData(index + 1, item.getChilds());
    } else {
        icon.animate().rotation(-90).setDuration(500).start();
        ...
        childs = mHelper.removeData(index + 1, count);
        item.setChilds(childs);
    }
    item.switchStatus();
    mHelper.setData(index, item);
}
複製代碼

很簡單的邏輯，若是當前是閉合狀態，icon須要選擇90度且添加數據，反之，旋轉-90度並移除數據。

關鍵點就在於addData和removeData，底層調用的是adapter的notifyItemRangeInserted和notifyItemRangeRemoved方法，所以是附帶動畫的，且對數組越界作了優化，例如addData的position大於或等於集合數量，那麼直接將應添加的數據直接添加在集合的末尾，而不是拋異常。

本節主要但願你們利用添加和移除數據來達到展開閉合的效果。

轉場動畫進階

每次玩Material Design產品的時候，老是有不少炫酷的轉場動畫刺激我。相信也有不少同窗跟我同樣，很喜歡這種風格。今天我就帶你們瞭解一下轉場動畫並自定義轉場動畫，走起！

常見轉場動畫

場景動畫核心框架

  • Scene：用來保存場景應用中View 的屬性集合
  • Transition：負責元素的過渡，你能夠在不一樣場景根據屬性值操做元素打造不一樣的動畫
    • 普經過渡
      • Explode：從場景中心進入或移除，一種爆炸的感受
      • Fade：最熟悉的淡入淡出
      • Slide：從場景邊緣進入或移除
      • AutoTransition：默認過渡，Fade+ChangeBounds
    • 共享元素過渡
      • ChangeBounds：根據場景先後佈局界限變化執行過渡動畫
      • ChangeClipBounds：根據場景先後getClipBounds變化執行過渡動畫
      • ChangeImageTransform：根據場景先後ImageView的矩陣變化執行過渡動畫
      • ChangeScroll：根據場景先後目標滾動屬性的變化執行過渡動畫
      • ChangeTransform：根據場景先後視圖縮放和旋轉變化執行過渡動畫，固然也能夠根據父視圖的改變
    • 場景切換調用[共享元素添加SharedElement]
      • setEnterTransition：A->B，B進入的過渡
      • setExitTransition：A->B，A退出的過渡
      • setReturnTransition：B->A，B返回的過渡
      • setReenterTransition：B->A，A重進的過渡
  • TransitionManager：把上面Scene和Transition結合起來，常見的有經過setTransition(Scene, Transition)結合

實戰

前一小節貌似有點翻譯的味道，但不少都是我親自體驗總結的，同時這也是必不可少的，咱們要理論結合實踐,再從實踐中領悟真理。

場景分析

以聯繫人列表頁爲出發點，點擊條目跳轉到聯繫人詳情頁。期間發生了什麼呢？

列表頁條目的頭像(其實過渡的時候已是詳情頁的頭像了）以貝塞爾曲線路徑移動且縮放至詳情頁的頭像；地址和名字平滑過渡到詳情頁；在共享元素過渡的時候，下一個場景也開始了進場動畫，右下角的菜單跟小球同樣彈跳下來同時背景以屏幕中心以圓形向外擴散。

代碼分析

首先咱們先分析一下進場動畫，由於這個相對比較好理解。

public class CircularRevealTransition extends Visibility {

	private static final String PROPNAME_ALPHA = "crazysunj:circularReveal:alpha";
	private static final String PROPNAME_RADIUS = "crazysunj:circularReveal:radius";
	private static final String PROPNAME_TRANSLATION_Y = "crazysunj:circularReveal:translationY";
	
	@Override
	public void captureStartValues(TransitionValues transitionValues) {
	    super.captureStartValues(transitionValues);
	    transitionValues.values.put(PROPNAME_ALPHA, 0.2f);
	    final View view = transitionValues.view;
	    transitionValues.values.put(PROPNAME_RADIUS, 0);
	    transitionValues.values.put(PROPNAME_TRANSLATION_Y, -view.getBottom());
	}
	
	@Override
	public void captureEndValues(TransitionValues transitionValues) {
	    super.captureEndValues(transitionValues);
	    transitionValues.values.put(PROPNAME_ALPHA, 1.0f);
	    final View view = transitionValues.view;
	    int radius = (int) Math.hypot(view.getWidth(), view.getHeight());
	    transitionValues.values.put(PROPNAME_RADIUS, radius);
	    transitionValues.values.put(PROPNAME_TRANSLATION_Y, 0);
	}
	
	@Override
	public Animator onAppear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
	    if (null == startValues || null == endValues) {
	        return null;
	    }
	    final int id = view.getId();
	    switch (id) {
	        case R.id.satellite_menu:
	            int startTranslationY = (int) startValues.values.get(PROPNAME_TRANSLATION_Y);
	            float startAlpha = (float) startValues.values.get(PROPNAME_ALPHA);
	            int endTranslationY = (int) endValues.values.get(PROPNAME_TRANSLATION_Y);
	            float endAlpha = (float) endValues.values.get(PROPNAME_ALPHA);
	            PropertyValuesHolder translationY = PropertyValuesHolder.ofFloat("translationY", startTranslationY, endTranslationY);
	            PropertyValuesHolder alpha = PropertyValuesHolder.ofFloat("alpha", startAlpha, endAlpha);
	            ObjectAnimator menuAnim = ObjectAnimator.ofPropertyValuesHolder(view, translationY, alpha);
	            menuAnim.setInterpolator(new BounceInterpolator());
	            menuAnim.setDuration(1000);
	            return menuAnim;
	        case R.id.cool_bg_view:
	            int startRadius = (int) startValues.values.get(PROPNAME_RADIUS);
	            int endRadius = (int) endValues.values.get(PROPNAME_RADIUS);
	            Animator coolAnim = new NoPauseAnimator(ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, startRadius, endRadius));
	            coolAnim.setDuration(1000);
	            coolAnim.setInterpolator(new AccelerateDecelerateInterpolator());
	            return coolAnim;
	        default:
	            return null;
	    }
	}
	
	@Override
	public Animator onDisappear(ViewGroup sceneRoot, View view, TransitionValues startValues, TransitionValues endValues) {
	  ...
	}
	...
}   
複製代碼

captureStartValues用來保存動畫須要的初始值，key-value的形式，至於key能夠模仿系統以兩個':'分離，captureEndValues用來保存動畫須要的結束值。咱們這裏，小球透明度從0.2開始，同時從相同x的屏幕頂部掉落，背景初始的半徑爲0；結束時小球透明度正常，小球回到老地方，背景擴展至滿屏，這裏半徑取了背景寬高的平方和的二次方根，關於值你們能夠本身調。

重點是繼承了Visibility，像這種進場動畫最好繼承Visibility，由於它很好地提供了view的出現和消失方法。

咱們再來看看onAppear方法，咱們利用id來標識一個view，但這樣就不靈活了。咱們利用PropertyValuesHolder把translationY和alpha在一個view上同時執行，像這種針對同一個view且須要執行多個屬性動畫，就能夠採用PropertyValuesHolder。背景的圓形擴散能夠用ViewAnimationUtils來建立，這是Android提供的，必屬精品。傳入操做的view，擴散點座標以及起始和結束半徑。

onDisappear就是一個相反的過程，就不介紹了。咱們再來看看共享元素動畫代碼：

public class BezierTransition extends Transition {
	...
    public BezierTransition() {
        setPathMotion(new PathMotion() {
            @Override
            public Path getPath(float startX, float startY, float endX, float endY) {
                Path path = new Path();
                path.moveTo(startX, startY);
                float controlPointX = (startX + endX) / 4;
                float controlPointY = (startY + endY) * 1.0f / 2;
                path.quadTo(controlPointX, controlPointY, endX, endY);
                return path;
            }
        });
    }

    private void captureValues(TransitionValues transitionValues) {
        Rect rect = new Rect();
        transitionValues.view.getGlobalVisibleRect(rect);
        transitionValues.values.put(PROPNAME_SCREEN_LOCATION, rect);
    }

    @Override
    public void captureStartValues(@NonNull TransitionValues transitionValues) {
        captureValues(transitionValues);
    }

    @Override
    public void captureEndValues(@NonNull TransitionValues transitionValues) {
        captureValues(transitionValues);
    }

    @Override
    public Animator createAnimator(ViewGroup sceneRoot,
                                   TransitionValues startValues, TransitionValues endValues) {
        if (null == startValues || null == endValues) {
            return null;
        }
        final int id = startValues.view.getId();
        if (id <= 0) {
            return null;
        }
        Rect startRect = (Rect) startValues.values.get(PROPNAME_SCREEN_LOCATION);
        Rect endRect = (Rect) endValues.values.get(PROPNAME_SCREEN_LOCATION);
        final View view = endValues.view;
        Path path = getPathMotion().getPath(startRect.centerX(), startRect.centerY(), endRect.centerX(), endRect.centerY());
        return ObjectAnimator.ofObject(view, new PropPosition(PointF.class, "position", new PointF(endRect.centerX(), endRect.centerY())), null, path);
    }
    ...
}
複製代碼

首先發現咱們繼承的是Transition，其次在構造函數裏面咱們執行了setPathMotion方法。PathMotion是Transition的一種擴展，提供以某種路徑運動，有兩個實現類ArcMotion和PatternPathMotion，感興趣的能夠研究下它的算法。前者是三階貝塞爾曲線，後者是矢量曲線。

咱們先來看看咱們本身實現的有點low的算法，哈哈，就是一個簡單的貝塞爾路徑，難點多是控制點的計算，如何讓路徑更優雅，這個艱鉅的任務就交給大家了。

若是繼承Transition，咱們實現的是createAnimator，拿到咱們建立的path，經過ObjectAnimator傳入PropPosition實現的。

static class PropPosition extends Property<View, PointF> {
    PointF endPoint;
    PropPosition(Class<PointF> type, String name, PointF endPoint) {
        super(type, name);
        this.endPoint = endPoint;
    }
    @Override
    public void set(View view, PointF value) {
        int x = Math.round(value.x);
        int y = Math.round(value.y);
        int startX = Math.round(endPoint.x);
        int startY = Math.round(endPoint.y);
        int transY = y - startY;
        int transX = x - startX;
        view.setTranslationX(transX);
        view.setTranslationY(transY);
    }
    @Override
    public PointF get(View object) {
        return null;
    }
}

ObjectAnimator ofObject (T target, 
                Property<T, V> property, 
                TypeConverter<PointF, V> converter, 
                Path path)
複製代碼

可能ObjectAnimator的這個方法咱們不經常使用，其實也很簡單，就是根據傳入的path，每一個進度會回調一個對象，咱們這裏是PointF，因爲默認的就是PointF，因此咱們第三個參數傳null就好了。假設咱們須要回調的是Point對象，那麼咱們要實現一個TypeConverter<PointF, Point>，很好理解，就是用來類型轉換的。

PropPosition的set方法回調中會返回每一個進度根據path計算出來的PointF，這樣咱們就能夠經過結束點計算出view須要平移的距離。

我知道你們很好奇是怎麼傳值的，這裏我單獨寫了一篇文章玩一玩Android屬性動畫源碼來輔助你們理解。

回到咱們的主題，既然類已經寫完了，如何調用的呢？

//詳情頁
private void initTransition() {
    Window window = getWindow();
    TransitionSet set = new TransitionSet();
    AutoTransition autoTransition = new AutoTransition();
    autoTransition.excludeTarget(R.id.ic_head, true);
    autoTransition.addTarget(R.id.tx_name);
    autoTransition.addTarget(R.id.ic_location);
    autoTransition.addTarget(R.id.tx_location);
    autoTransition.setDuration(600);
    autoTransition.setInterpolator(new DecelerateInterpolator());
    set.addTransition(autoTransition);
    
    BezierTransition bezierTransition = new BezierTransition();
    bezierTransition.addTarget(R.id.ic_head);
    bezierTransition.excludeTarget(R.id.tx_name, true);
    bezierTransition.excludeTarget(R.id.ic_location, true);
    bezierTransition.excludeTarget(R.id.tx_location, true);
    bezierTransition.setDuration(600);
    bezierTransition.setInterpolator(new DecelerateInterpolator());
    set.addTransition(bezierTransition);
    
    CircularRevealTransition transition = new CircularRevealTransition();
    transition.excludeTarget(android.R.id.statusBarBackground, true);
    
    window.setEnterTransition(transition);
    window.setReenterTransition(transition);
    window.setReturnTransition(transition);
    window.setExitTransition(transition);
    
    window.setSharedElementEnterTransition(set);
    window.setSharedElementReturnTransition(set);
}
複製代碼

根據前面知識普及，我相信不須要解釋太多，可能須要解釋的地方就是addTarget和excludeTarget。addTarget就是指定參與過渡的view，excludeTarget就是排除過渡的view。

有些小夥伴可能對那個背景很好奇，它並非一張背景圖，中間以貝塞爾曲線分割，下面是白色，上面是前一個場景高斯模糊。貝塞爾曲線雖然不是什麼很新鮮的東西，可是運用普遍，好比lottie章節開發用的AE中鋼筆的運用就是貝塞爾曲線。

小總結

整個過程下來，是否是發現轉場動畫也並不難，有些同窗看到這可能已經本身寫了幾個過渡動畫了。這我就很開心了，能幫到你們真正運用這些知識。固然了不要忘了添加windowContentTransitions屬性哦，還有windowAllowEnterTransitionOverlap和windowAllowReturnTransitionOverlap來控制兩個場景的動畫要不要同步。NM的，咋不早說？

衛星菜單

我記得在我畢業的時候，這玩意挺火的，看起來也很牛皮，實則實現起來很簡單。能夠說是動畫的入門，那爲啥要放這裏呢？我就放這裏，沒說我要分析啊，告訴一下你們項目有這個動畫。

騷聊

又到了緊張刺激的騷聊環節。到這裏，確定有小夥伴質疑我了，你肯定這是Android動畫全家桶嗎？我能夠很負責任的告訴你，是。只不過是普通規格的全家桶。不管是動畫的種類仍是動畫的用法確定是不全的，可是經常使用的已經八九不離十，重點是給你們總結個大概，感興趣的能夠深刻了解。

趁此次機會，我回答一下，不少同窗問個人問題，Android到什麼地步纔算厲害？首先我以爲這種問題很無聊，其次我本身的水平也並不高，不知道有沒有資格回答。

鄙人在這發表一得之見，不少同窗可能認爲懂底層源碼的人才是牛皮。懂底層確實很牛皮，但不是最牛皮的，只要你有耐心去閱讀分析，不斷深刻，我相信你也能夠和大佬同樣寫出深入的源碼分析，可能用的時間比大佬長那麼一點，那麼結果就出來了，學習能力。在這技術不斷迭代更新的時代，最重要的是學習能力，由於可能你今天用的技術明天就被棄用了，固然這可能誇張一點，正現在天的Android動畫分享，學習能力強的人看一遍本身過一遍已經能夠觸類旁通了，再則，源碼也是人寫的，也是有迭代的，那你是否是須要從新分析一遍？看源碼更多的是看大牛如何寫代碼，而後學以至用，今天主題動畫的難點不是源碼也不是如何使用，而是動畫的創意！

哦，對了，我答應別人天天只能吹#個牛，祝你們生活愉快，溜了，溜了。有問題能夠加我好友，我博客有聯繫方式，文章的代碼都是開源項目CrazyDaily裏面的。

最後，感謝一直支持個人人！

傳送門

Github：github.com/crazysunj/

博客：crazysunj.com/

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程