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


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//<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 酷炫动画,效果加案例讲解!相关推荐

  1. 自定义动画属性java_创建酷炫动画效果的10个JavaScript库

    原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...

  2. Android kotlin实现Recyclerview酷炫动画

    在现在进行app开发中 针对app的UI 美观效果要求越来越高了 所以开发出一款酷炫的app相当重要了 今天就对RecyclerView来实现酷炫动画 首先在Android studio中 的项目中 ...

  3. 【注释张豪华版 Path酷炫动画】极速get花式Path (支付宝支付成功动画)

    本篇文章已授权微信公众号 hongyangAndroid (鸿洋)独家发布 转载请标明出处: http://blog.csdn.net/zxt0601/article/details/54018970 ...

  4. canvas动画科技园_Canvas 写的酷炫动画代码分析

    霓虹灯线形成的自发六边形,随机性生成火花 在看这篇文章时,里面有个动画的示例(如上图),然后感觉有点很酷炫,就打算了解一下怎么写的.( 先上代码示例链接) 前景提要 需要先确保你还记得三角函数的知识. ...

  5. Android矢量图动画特效,Android使用SVG矢量图打造酷炫动画效果

    一个真正Android使用SVG矢量图打造酷炫动效往往让人虎躯一震,话不多说,咱们先看看效果: 这个效果我们需要考虑以下几个问题: 1. 这是图片还是文字: 2. 如果是图片该如何拿到图形的边沿线坐标 ...

  6. H5 实现酷炫水滴效果

    H5 实现酷炫水滴效果 天马行空般的设计甩到面前,含着泪也要做出来 --百度前端工程师的内心独白 之前接到了一个需求,设计师同事想在网页中使用一个类水滴效果的索引条.Duang,Duang,这醉人的需 ...

  7. Android酷炫动画效果

    Android自定义View:一个精致的打钩小动画 一个精致的打钩动画. Android 自定义水平进度条圆角进度 项目中实现进度条进度过程中显示圆角样式 ViewPager系列之 仿魅族应用的广告B ...

  8. android+酷炫动画效果,Android酷炫动画效果之3D星体旋转效果

    在Android中,如果想要实现3D动画效果一般有两种选择:一是使用Open GL ES,二是使用Camera.Open GL ES使用起来太过复杂,一般是用于比较高级的3D特效或游戏,并且这个也不是 ...

  9. Lottie 站在巨人的肩膀上实现 Android 酷炫动画效果

    说到动画效果,一般都会感到很高端,感觉很酷炫:而小菜技术有限,稍复杂的动画效果也需要很多时间处理,但是遇到时间紧任务重的情况该怎么办呢?那就尝试一下 Lottie 吧,酷炫的动画集成却相当简单,还支持 ...

最新文章

  1. 漫谈回溯(未完待续)
  2. Oracle客户端工具出现“Cannot access NLS data files or invalid environment specified”错误的解决办法...
  3. 软件工程-第一次作业
  4. crackMe的逆向分析
  5. SpringMVC中@RequestMapping 6个基本用法小结
  6. 产品经理面试中那些不忍直视的奇葩题目,面试官你真是够了!
  7. 华为平板matepad支持鸿蒙2.0,首款鸿蒙OS 2.0平板,华为正式公布Matepad Pro2,搭载麒麟9000...
  8. tensorflow版PSENet 文本检测模型训练和测试
  9. Linux记录-重启后磁盘丢失问题解决方案
  10. homestead.yaml配置详解
  11. matplotlib画箱线图,添加非参数检验-秩和检验的结果
  12. 【LeetCode】马三来刷题之Permutations
  13. RabbitMQ报错 o.s.a.r.c.CachingConnectionFactory : Channel shutdown: channel error; protocol meth
  14. 出现 -2146959355, ‘服务器运行失败‘ 错误的处理
  15. Ubuntu 18.04 LTS 安装64位 iNode 客户端
  16. 告别UAC恼人的弹窗
  17. 【web前端教程笔记】
  18. 文件查找,打包压缩,解压相关分享
  19. linux使用过程中出现的问题
  20. java lib 不在构建路径里面问题_svn - Eclipse“这个编译单元不在java项目的构建路径上”...

热门文章

  1. LeetCode Rotate Array(数组的旋转)
  2. 第九章构造数据类型实验
  3. 【剑指offer】题目二
  4. JavaScript对象this指向(普通键this指向 非指向函数的键)
  5. 【FCS NOI2018】福建省冬摸鱼笔记 day4
  6. Pyhton学习——Day3
  7. URL编码表%20Base64编码表%20HTTP消息含义
  8. python3中的一些小改动
  9. PHP学习笔记二: 面向对象设计
  10. Android周学习Step By Step(9)--Intent之广播(完)