当前位置:   article > 正文

Kotlin实现Android RecyclerView炫酷动画!_kotlin recyclerview效果

kotlin 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,上图的属性值动画如下:

设置动画

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

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

一些漂亮的动画示例

  1. //Animation One//
  2. <translate
  3.     android:fromYDelta="100%"
  4.     android:toYDelta="0%"
  5.     android:duration="500"
  6.     />
  7. <alpha
  8.     android:fromAlpha="0.0"
  9.     android:toAlpha="1.0"
  10.     android:duration="500"/>
  11. <scale
  12.     android:pivotX="50%"
  13.     android:pivotY="50%"
  14.     android:fromXScale="0.5"
  15.     android:fromYScale="0.5"
  16.     android:toXScale="1"
  17.     android:toYScale="1"
  18.     android:duration="500"
  19.     />

 

  1. //Animation Two//
  2. <translate
  3.     android:fromXDelta="200%"
  4.     android:toYDelta="0%"
  5.     android:duration="500"
  6.     />
  7. <scale
  8.     android:pivotX="50%"
  9.     android:pivotY="50%"
  10.     android:fromXScale="0"
  11.     android:fromYScale="0"
  12.     android:toXScale="1"
  13.     android:toYScale="1"
  14.     android:duration="500"
  15.     />

 

  1. //Animation Three//
  2. <translate
  3.     android:fromXDelta="200%"
  4.     android:toYDelta="0%"
  5.     android:duration="500"
  6.     />
  7. <alpha
  8.     android:fromAlpha="0.0"
  9.     android:toAlpha="3.0"
  10.     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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/660212
推荐阅读
相关标签
  

闽ICP备14008679号