recyclerview item动画_RecyclerView 的 Item 酷炫动画，效果加案例讲解！

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 酷炫动画，效果加案例讲解！的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。