Android 属性动画实战
什么是属性动画?
属性动画可以通过直接更改 View 的属性来实现 View 动画。例如:
- 通过不断的更改 View 的坐标来实现让 View 移动的效果;
- 通过不断的更改 View 的背景来实现让 View 的背景渐变的效果;
- 通过不断的更改 View 的宽高来实现让 View 变形的效果;
- ...
由此可见,利用属性动画几乎可以处理任何的涉及到 View 的动画效果。
实战
具体的细节就不多说了,网上相应的教程也不少。这篇博客主要是来实现类似于美团外卖购物车的效果。
分析
首先分析购物车动画具体的细节:在滑动过程中,“购物车”向右移动,直至一半隐藏到右侧;在手指停留在屏幕中时,“购物车”还隐藏在右侧;当手指离开屏幕,“购物车”在一定时间后重新移动回来。
以上的动画细节可以分析出和 RecycleView 的滚动事件息息相关,因此动画就应该在 RecycleView 的滚动事件中实现。
实现基本布局
上图的蓝色图片既是我们要处理的 View 。
给 RecycleView 加上滚动事件
接下来给 RecycleView 加上滚动事件,滑动或者飞翔时图片消失,当停止滑动时图片显示。
// 给rv加上滚动事件
rv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
switch (newState) {
case RecyclerView.SCROLL_STATE_DRAGGING:// 滚动中
case RecyclerView.SCROLL_STATE_SETTLING:// 飞翔中
iv.setVisibility(View.GONE);
break;
case RecyclerView.SCROLL_STATE_IDLE:// 停止滚动
iv.setVisibility(View.VISIBLE);
break;
}
}
});
效果图:
实现消失的动画
根据上面的图可以发现触发时机基本是没问题了,接下来要做的是让消失不突兀,加上消失的动画。
消失的实质是 View 的 x 坐标从当前位置一直往右直到变为隐藏了一半,下面让我们来实现这个效果:
// 消失动画的基本属性(从iv当前的x坐标一直到出了屏幕右侧一半)
disappearAnimator = ValueAnimator.ofFloat(iv.getX(), (float) (Utils.getScreenWidth(this) - iv.getWidth() / 2.0));
disappearAnimator.setDuration(400);// 动画持续时间
disappearAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {// Value更新事件
float curValue = (float) animation.getAnimatedValue();
iv.setX(curValue);
}
}); // 给rv加上滚动事件
rv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
switch (newState) {
case RecyclerView.SCROLL_STATE_DRAGGING:// 滚动中
case RecyclerView.SCROLL_STATE_SETTLING:// 飞翔中
disappearAnimator.start();
break;
case RecyclerView.SCROLL_STATE_IDLE:// 停止滚动
iv.setVisibility(View.VISIBLE);
break;
}
}
});
然而发现实际上动画是这样的:
发现他是从最左边一直移动到了最右边,与我们的需求不符。
经调试发现,在 onCreate 的时候 iv 尚未初始化完毕,因此宽高以及坐标都还不能获取到。所以获取到的坐标以及宽度都是0。
所以可以在滚动事件中获取 iv 的坐标以及宽高,更改后的代码如下:
// 给rv加上滚动事件
rv.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
// 获取iv的坐标以及宽高
if (0 == originX) {
originX = iv.getX();
ivWidth = iv.getWidth();
} switch (newState) {
case RecyclerView.SCROLL_STATE_DRAGGING:// 滚动中
case RecyclerView.SCROLL_STATE_SETTLING:// 飞翔中
// 消失动画的基本属性(从iv当前的x坐标一直到出了屏幕右侧一半)
if (disappearAnimator == null) {
disappearAnimator = ValueAnimator.ofFloat(originX, (float) (screenWidth - ivWidth / 2.0));
disappearAnimator.setDuration(400);// 动画持续时间
disappearAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {// Value更新事件
float curValue = (float) animation.getAnimatedValue();
iv.setX(curValue);
}
});
} disappearAnimator.start();
break;
case RecyclerView.SCROLL_STATE_IDLE:// 停止滚动
iv.setVisibility(View.VISIBLE);
break;
}
}
});
效果如下图:
实现出现的动画
既然已经实现了消失的动画,那出现的动画也就不难了。出现的实质是 View 的 x 坐标从右侧一半一直运动到原始位置。
case RecyclerView.SCROLL_STATE_IDLE:// 停止滚动
// 出现动画的基本属性(从屏幕右侧一半到原始位置)
if (appearAnimator == null) {
appearAnimator = ValueAnimator.ofFloat((float) (screenWidth - ivWidth / 2.0), originX);
appearAnimator.setDuration(400);// 动画持续时间
appearAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {// Value更新事件
float curValue = (float) animation.getAnimatedValue();
iv.setX(curValue);
}
});
} appearAnimator.start();
break;
效果图如下:
但是发现如果频繁的滑动暂停的话动画会冲突,因此需要做一些判定,如果动画正在运行则不再重新开始动画。改动后的代码如下:
switch (newState) {
case RecyclerView.SCROLL_STATE_DRAGGING:// 滚动中
case RecyclerView.SCROLL_STATE_SETTLING:// 飞翔中
// 消失动画的基本属性(从iv当前的x坐标一直到出了屏幕右侧一半)
if (disappearAnimator == null) {
disappearAnimator = ValueAnimator.ofFloat(originX, (float) (screenWidth - ivWidth / 2.0));
disappearAnimator.setDuration(400);// 动画持续时间
disappearAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {// Value更新事件
float curValue = (float) animation.getAnimatedValue();
iv.setX(curValue);
}
});
} // 如果消失动画还未开始执行并且iv的位置在原始位置,则执行
if (!disappearAnimator.isStarted() && originX == iv.getX()) {
disappearAnimator.start();
}
break;
case RecyclerView.SCROLL_STATE_IDLE:// 停止滚动
// 出现动画的基本属性(从屏幕右侧一半到原始位置)
if (appearAnimator == null) {
appearAnimator = ValueAnimator.ofFloat((float) (screenWidth - ivWidth / 2.0), originX);
appearAnimator.setDuration(400);// 动画持续时间
appearAnimator.setStartDelay(700);// 延迟时间
appearAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {// Value更新事件
float curValue = (float) animation.getAnimatedValue();
iv.setX(curValue);
}
});
} // 如果出现动画还未开始执行,则执行
if (!appearAnimator.isStarted()) {
appearAnimator.start();
}
break;
}
但是发现还是会有冲突,经检测,发现是出现动画和消失动画互相干扰的缘故。当滑动已暂停但出现动画还未执行完毕,此时重新滑动会触发消失动画。
因此需要给出现动画加一个延迟,并且如果处于非暂停状态需要取消出现动画。(也许美团外卖暂停一段时间才开始出现的原因就是防止用户不停的滑动暂停吧。)
修改后的代码如下:
case RecyclerView.SCROLL_STATE_DRAGGING:// 滚动中
case RecyclerView.SCROLL_STATE_SETTLING:// 飞翔中
// 消失动画的基本属性(从iv当前的x坐标一直到出了屏幕右侧一半)
if (disappearAnimator == null) {
disappearAnimator = ValueAnimator.ofFloat(originX, (float) (screenWidth - ivWidth / 2.0));
disappearAnimator.setDuration(400);// 动画持续时间
disappearAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {// Value更新事件
float curValue = (float) animation.getAnimatedValue();
iv.setX(curValue);
}
});
} // 如果此时出现动画已开始,则取消
if (appearAnimator != null && appearAnimator.isStarted()) {
appearAnimator.cancel();
} // 如果消失动画还未开始执行并且iv的位置在原始位置,则执行
if (!disappearAnimator.isStarted() && originX == iv.getX()) {
disappearAnimator.start();
}
break;
最终效果如图所示:
总结
- 如果要实现其他的效果,例如淡入淡出等同理就可以实现;
- 多个动画对统一个 View 做变换时一定要注意动画之间的冲突;
- 属性动画+函数方程可以实现一些丰富多变的效果,待研究;
- 本文的实现还是比较简陋,最好的效果是动画可以被打断,由于比较麻烦,所以没有实现。
Github地址:属性动画初战
大家如果有什么疑问或者建议可以通过评论或者邮件的方式联系我,欢迎大家的评论~
Android 属性动画实战的更多相关文章
- Android属性动画
这几天看郭神的博客 Android属性动画完全解析(上),初识属性动画的基本用法之后,我自己突然想实现一种动画功能,就是我们在携程网.阿里旅行等等手机APP端买火车票的时候,看到有选择城市,那么就有出 ...
- 【转】android 属性动画之 ObjectAnimator
原文网址:http://blog.csdn.net/feiduclear_up/article/details/39255083 前面一篇博客讲解了 android 简单动画之 animtion,这里 ...
- Android属性动画之ValueAnimation
ValueAnimation是ObjectAnimation类的父类,经过前几天的介绍,相信大家对ObjectAnimation有了 一定的认识,今天就为大家最后介绍一下ValueAnimation, ...
- Android属性动画完全解析(下)
转载:http://blog.csdn.net/guolin_blog/article/details/44171115 大家好,欢迎继续回到Android属性动画完全解析.在上一篇文章当中我们学习了 ...
- Android属性动画完全解析(上),初识属性动画的基本用法
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系 ...
- Android属性动画完全解析(中)
转载:http://blog.csdn.net/guolin_blog/article/details/43536355 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是 ...
- Android属性动画完全解析(上)
Android属性动画完全解析(上) 转载:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷 ...
- Android 属性动画(Property Animation) 全然解析 (下)
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...
- Android 属性动画 源码解析 深入了解其内部实现
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42056859,本文出自:[张鸿洋的博客] 我参加了博客之星评选,如果你喜欢我的博 ...
随机推荐
- 手动安装gitlab-runner
手动安装gitlab-runner 在终端使用命令curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runn ...
- SQL 对float类型列进行排序引发的异常
车祸现场 要求:根据学分和完成时间获取前200名学员,当学分相同时,完成时间较早的排在前面 可以明显看到,完成时间为4.1号的记录排在了3.27号前面. 事故原因 float 表示近似数值,存在精度损 ...
- Flutter学习笔记(3)--Dart变量与基本数据类型
一.变量 在Dart里面,变量的声明使用var.Object或Dynamic关键字,如下所示: var name = ‘张三’: 在Dart语言里一切皆为对象,所以如果没有将变量初始化,那么它的默认值 ...
- Windows 应用容器化
背景 在这个时间点,我们可能已经对 Linux 容器使用已经达到熟练掌握的程度,因为 Docker 与 Kubernetes 都是最早为 Linux 平台设计.当我们从容器这项技术中体会到种种收益,对 ...
- Java设计模式学习笔记(一) 设计模式概述
前言 大约在一年前学习过一段时间的设计模式,但是当时自己的学习方式比较低效,也没有深刻的去理解.运用所学的知识. 所以现在准备系统的再重新学习一遍,写一个关于设计模式的系列博客. 废话不多说,正文开始 ...
- redis 文件事件模型
参考文献: 深入剖析 redis 事件驱动 Redis 中的事件循环 深入了解epoll (转) Redis自己的事件模型 ae EPOLL(7) Linux IO模式及 select.poll.ep ...
- 关于 https的SNI问题
遇到的问题,服务器多站点配置HTTPS 后遇到的问题,服务器报警告错误. 随后网上搜索了下 SNI的意义. 这句话很经典: SNI(Server Name Indication)是为了解决一个服务器使 ...
- Markdown下,上传图片问题
最简单的方法: 1,登录qq 2,登录博客园,并打开博客园添加随笔的地方:如图: 3,选择需要截屏的地方,按住ctrl+alt+A截屏,然后在qq的发送栏内贴过去 4,鼠标左键按住不松开,然后拖到这里 ...
- 阿里云体验:安装jdk
在阿里云的linux服务器上默认是没有安装java环境的,需要自己安装.查了许多资料,发现这篇文章简洁易用.http://www.cnblogs.com/cloudwind/archive/2012/ ...
- mplayer+ffmpeg 组合截图
mplayer截图的优点:对于一个时长很长的视频,可以任意指定一个时间点截图,mplayer会直接跳到这个时间点开始解码截图: 缺点:由于是直接跳到指定的时间点,也就是直接跳过了之前的帧,这样解码出来 ...