Kotlin实现Android RecyclerView炫酷动画!

在完成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轴上移动项目。它具有以下一些属性:

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

 

-Alpha

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

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

 

-Rotate

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

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

-Scale

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

Pivot在这里有不同的作用,两个pivot属性设置为50%表示视图的中心点,我这样设置是想从视图的中心开始放大,fromScaletoScale用于缩放视图,原始尺寸为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//
<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"

    />

 

//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"

    />

 

//Animation Three//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />
<alpha
    android: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

  • 25
    点赞
  • 79
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值