Caner Gures | 作者依然范特西稀 | 譯者技術最TOP(ID:Tech-Android) | 來源

在完成 app 的編碼之后，對于一個要求美觀的現代 App 來說，僅僅實現功能是不夠的，我相信很多人都贊同這一點，如今，應用程序應該包括 UI/UX、過渡動畫和客戶端。今天，我將嘗試解釋其中之一，也就是RecyclerView的 item 動畫，我將使用 Android Studio 和 Kotlin 進行開發，希望你編碼愉快～

從基礎開始

首先，你需要創建一個anim文件夾來存放動畫資源文件res(right-click)->New->Android Resource Directory

設置名稱為anim

完成之后，右擊anim文件夾，創建Animation Resources文件：

屬性說明

當創建完 Animation Resources 文件之后，你會看到一些屬性，我將一一解釋這些屬性，然后將創建我們自己的動畫：

-Translate

Translate 主要用于在 x 和 y 軸上移動項目。它具有以下一些屬性：

FromXDelta和fromYDelta表示 item 來自哪個方向。如果您為“fromXDelta”設置一個正值，它將來自屏幕的右側。ToDelta屬性表示該 item 將在何處停止。通常，我將toDelta屬性設為0％。因為即使在動畫持續時間結束時將其設置為“ -100％”，該項目也會返回到屏幕，效果看起來不太好。最后，duration就是動畫持續時間，我們來看一個帶有translate屬性的動畫

-Alpha

Alpha 用于確定不透明度，這個屬性主要用于淡入淡出(fade in/out)動畫，如下：

淡入淡出(fade in/out)動畫可以用fromAlpha和toAlpha來實現，如果使用上圖中的這些值可以實現如下動畫：

-Rotate

從名稱就知道，Rotate 屬性用于 RecyclerView item 的旋轉動畫。

這個屬性一開始也讓我感到困惑，因此，我將盡最大努力來解釋，fromDegrees代表 item 開始的角度，toDegrees為停止的角度，如上面的圖，item 將從 270° 開始，逆時針旋轉。pivot屬性根據值來固定 item(也就是旋轉中心)，例如：如果你設置pivotX:100% 和 pivotY:0%，并且fromDegrees: 90°它將 item 固定在右上角并相應旋轉。動畫如下：

-Scale

scale 屬性用于將視圖放大或者縮小，它的屬性比其他幾個動畫的屬性都要多，如下：

Pivot 在這里有不同的作用，兩個 pivot 屬性設置為 50%表示視圖的中心點，我這樣設置是想從視圖的中心開始放大，fromScale和toScale用于縮放視圖，原始尺寸為 1,開始尺寸為 0,上圖的屬性值動畫如下：

設置動畫

holder.shopDetailParent.animation?=
????AnimationUtils.loadAnimation(holder.itemView.context,?R.anim.example_anims)

首先，你需要定義你想做動畫的視圖，也就是 RecyclerView Adapter 中的 item，然后那你可以將上面的代碼片段加入到 Adapter 的OnBindViewHolder? 方法中來設置動畫，我想為整個 item 設置動畫，因此，我定義了一個shopDetailParent卡片視圖，example_anims是動畫文件，你需要在代碼中編寫自己的動畫文件。

一些漂亮的動畫示例

//Animation?One//
<translateandroid:fromYDelta="100%"android:toYDelta="0%"android:duration="500"
????/>

<alphaandroid:fromAlpha="0.0"android:toAlpha="1.0"android:duration="500"/>

<scaleandroid:pivotX="50%"android:pivotY="50%"android:fromXScale="0.5"android:fromYScale="0.5"android:toXScale="1"android:toYScale="1"android:duration="500"
????/>//Animation?Two//
<translateandroid:fromXDelta="200%"android:toYDelta="0%"android:duration="500"
????/>

<scaleandroid:pivotX="50%"android:pivotY="50%"android:fromXScale="0"android:fromYScale="0"android:toXScale="1"android:toYScale="1"android:duration="500"
????/>//Animation?Three//
<translateandroid:fromXDelta="200%"android:toYDelta="0%"android:duration="500"
????/>
<alphaandroid:fromAlpha="0.0"android:toAlpha="3.0"android:duration="2500"/>

插值器

我們還有最后一個要講的屬性-插值器，插值器是動畫表現的基礎，通常，我們的動畫默認使用的是線性插值器,該插值器在動畫的每一幀上均勻地移動視圖，如下(其他插值器，可以去https://jebware.com/interp/android-animation-interpolators.html查看)

其他插值器有不同的運動曲線，我將向你展示如何添加插值器，并展示一些示例，然后你可以自己嘗試。你所要做的就是將此行代碼添加到你的動畫集合中。

android:interpolator="@android:anim/decelerate_interpolator"

Decelerate插值器將使項目從屏幕的右側出現，并在它們接近最終位置時放慢它們的速度。

Decelerate Interpolator:Bounce Interpolator:Overshoot Interpolator:以下列出了 developer.android 上的所有插值器，同樣，你也可以自己定義插值器

感謝閱讀，本文就到這里，我希望本文能幫助你理解和實現一些精美的 RecyclerView 動畫。有任何問題，歡迎留言討論。覺得有幫助別忘了轉發、點在看，謝謝！

---

原文：https://levelup.gitconnected.com/android-recyclerview-animations-in-kotlin-1e323ffd39be

熱文推薦：

• JVM 通過「逃逸分析」就能讓對象在「棧上分配」？沒那么簡單！
• 學不動也要學！探究Fragment延遲加載的前世今生
• 面試官："Handler的runWithScissors()了解嗎？為什么Google不讓開發者用？"

總結

以上是生活随笔為你收集整理的recyclerview item动画_RecyclerView 的 Item 酷炫动画，效果加案例讲解！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。