欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Kotlin实现Android RecyclerView炫酷动画!

程序员文章站 2022-06-09 21:30:28
...

在完成app的编码之后,对于一个要求美观的现代App来说,仅仅实现功能是不够的,我相信很多人都赞同这一点,如今,应用程序应该包括UI/UX、过渡动画和客户端。今天,我将尝试解释其中之一,也就是RecyclerView的item动画,我将使用Android Studio和Kotlin进行开发,希望你编码愉快~

从基础开始

首先,你需要创建一个anim文件夹来存放动画资源文件

res(right-click)->New->Android Resource Directory

Kotlin实现Android RecyclerView炫酷动画!

设置名称为anim

Kotlin实现Android RecyclerView炫酷动画!

完成之后,右击anim文件夹,创建Animation Resources文件:

属性说明

当创建完Animation Resources 文件之后,你会看到一些属性,我将一一解释这些属性,然后将创建我们自己的动画:

Kotlin实现Android RecyclerView炫酷动画!

-Translate

Translate主要用于在x和y轴上移动项目。它具有以下一些属性:

Kotlin实现Android RecyclerView炫酷动画!

FromXDeltafromYDelta表示item来自哪个方向。如果您为“fromXDelta”设置一个正值,它将来自屏幕的右侧。ToDelta属性表示该item将在何处停止。通常,我将toDelta属性设为0%。因为即使在动画持续时间结束时将其设置为“ -100%”,该项目也会返回到屏幕,效果看起来不太好。最后,duration就是动画持续时间,我们来看一个带有translate属性的动画

Kotlin实现Android RecyclerView炫酷动画!

 

-Alpha

Alpha用于确定不透明度,这个属性主要用于淡入淡出(fade in/out)动画,如下:

Kotlin实现Android RecyclerView炫酷动画!

淡入淡出(fade in/out)动画可以用fromAlphatoAlpha来实现,如果使用上图中的这些值可以实现如下动画:

Kotlin实现Android RecyclerView炫酷动画!

 

-Rotate

从名称就知道,Rotate属性用于RecyclerView item 的旋转动画

Kotlin实现Android RecyclerView炫酷动画!

这个属性一开始也让我感到困惑,因此,我将尽最大努力来解释,fromDegrees代表item开始的角度,toDegrees为停止的角度,如上面的图,item将从270°开始,逆时针旋转。pivot属性根据值来固定item(也就是旋转中心),例如:如果你设置pivotX:100% 和 pivotY:0%,并且fromDegrees: 90°它将item固定在右上角并相应旋转。动画如下:

Kotlin实现Android RecyclerView炫酷动画!

-Scale

scale属性用于将视图放大或者缩小,它的属性比其他几个动画的属性都要多,如下:

Kotlin实现Android RecyclerView炫酷动画!

Pivot在这里有不同的作用,两个pivot属性设置为50%表示视图的中心点,我这样设置是想从视图的中心开始放大,fromScaletoScale用于缩放视图,原始尺寸为1,开始尺寸为0,上图的属性值动画如下:

Kotlin实现Android RecyclerView炫酷动画!

设置动画

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

首先,你需要定义你想做动画的视图,也就是RecyclerView Adapter 中的item,然后那你可以将上面的代码片段加入到Adapter的OnBindViewHolder 方法中来设置动画,我想为整个item设置动画,因此,我定义了一个shopDetailParent卡片视图,example_anims是动画文件,你需要在代码中编写自己的动画文件。

一些漂亮的动画示例

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

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

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:toXScale="1"
    android:toYScale="1"
    android:duration="500"

    />

Kotlin实现Android RecyclerView炫酷动画!

 

//Animation Two//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0"
    android:fromYScale="0"
    android:toXScale="1"
    android:toYScale="1"
    android:duration="500"

    />

 

Kotlin实现Android RecyclerView炫酷动画!

//Animation Three//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="3.0"
    android:duration="2500"/>

Kotlin实现Android RecyclerView炫酷动画!

插值器

我们还有最后一个要讲的属性-插值器,插值器是动画表现的基础,通常,我们的动画默认使用的是线性插值器,该插值器在动画的每一帧上均匀地移动视图,如下(其他插值器,可以去https://jebware.com/interp/android-animation-interpolators.html查看)

Kotlin实现Android RecyclerView炫酷动画!

其他插值器有不同的运动曲线,我将向你展示如何添加插值器,并展示一些示例,然后你可以自己尝试。你所要做的就是将此行代码添加到你的动画集合中。

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

Kotlin实现Android RecyclerView炫酷动画!

Decelerate插值器将使项目从屏幕的右侧出现,并在它们接近最终位置时放慢它们的速度。

Decelerate Interpolator:

Kotlin实现Android RecyclerView炫酷动画!

 

Bounce Interpolator:

Kotlin实现Android RecyclerView炫酷动画!

Overshoot Interpolator:

Kotlin实现Android RecyclerView炫酷动画!

以下列出了developer.android上的所有插值器,同样,你也可以自己定义插值器

Kotlin实现Android RecyclerView炫酷动画!

感谢阅读,我希望本文能帮助你理解和实现一些精美的RecyclerView动画。

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

相关标签: RecyclerView