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轴上移动项目。它具有以下一些属性:
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//
<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
上一篇: 设计模式(三)——行为模式
推荐阅读
-
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载_jquery
-
Android自定义渐变式炫酷ListView下拉刷新动画
-
Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)
-
Android自定义渐变式炫酷ListView下拉刷新动画
-
Android实现单页显示3个Item的ViewPager炫酷切换效果
-
Android自定义ViewPagerIndicator实现炫酷导航栏指示器(ViewPager+Fragment)
-
Android使用Circular Reveal动画让页面跳转更炫酷
-
Android实现单页显示3个Item的ViewPager炫酷切换效果
-
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
-
Android使用Circular Reveal动画让页面跳转更炫酷