什么是属性动画?

属性动画可以通过直接更改 View 的属性来实现 View 动画。例如:

  1. 通过不断的更改 View 的坐标来实现让 View 移动的效果;
  2. 通过不断的更改 View 的背景来实现让 View 的背景渐变的效果;
  3. 通过不断的更改 View 的宽高来实现让 View 变形的效果;
  4. ...

由此可见,利用属性动画几乎可以处理任何的涉及到 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 属性动画实战的更多相关文章

  1. Android属性动画

    这几天看郭神的博客 Android属性动画完全解析(上),初识属性动画的基本用法之后,我自己突然想实现一种动画功能,就是我们在携程网.阿里旅行等等手机APP端买火车票的时候,看到有选择城市,那么就有出 ...

  2. 【转】android 属性动画之 ObjectAnimator

    原文网址:http://blog.csdn.net/feiduclear_up/article/details/39255083 前面一篇博客讲解了 android 简单动画之 animtion,这里 ...

  3. Android属性动画之ValueAnimation

    ValueAnimation是ObjectAnimation类的父类,经过前几天的介绍,相信大家对ObjectAnimation有了 一定的认识,今天就为大家最后介绍一下ValueAnimation, ...

  4. Android属性动画完全解析(下)

    转载:http://blog.csdn.net/guolin_blog/article/details/44171115 大家好,欢迎继续回到Android属性动画完全解析.在上一篇文章当中我们学习了 ...

  5. Android属性动画完全解析(上),初识属性动画的基本用法

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷的事情,因此Android系 ...

  6. Android属性动画完全解析(中)

    转载:http://blog.csdn.net/guolin_blog/article/details/43536355 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是 ...

  7. Android属性动画完全解析(上)

    Android属性动画完全解析(上) 转载:http://blog.csdn.net/guolin_blog/article/details/43536355 在手机上去实现一些动画效果算是件比较炫酷 ...

  8. Android 属性动画(Property Animation) 全然解析 (下)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38092093 上一篇Android 属性动画(Property Animatio ...

  9. Android 属性动画 源码解析 深入了解其内部实现

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42056859,本文出自:[张鸿洋的博客] 我参加了博客之星评选,如果你喜欢我的博 ...

随机推荐

  1. shell 循环打印某一天后的n天的日期

    #!/bin/bash start_date="2017-10-26" for i in `seq 0 30` do num=$((${i}+1)) datatime=`date ...

  2. BZOJ 2957:楼房重建(分块)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2957 题意:…… 思路:对于每一个块,维护一个单调递增的斜率(因为小于前面的斜率的话是肯定看不见的) ...

  3. mysql重复数据下,删除一条重复数据

    delete from information where id in (select id from (select max(id) as id,count(*) as ccc from infor ...

  4. c++学习书籍推荐《Beyond the C++ Standard Library》下载

    百度云及其他网盘下载地址:点我 作者简介 Björn Karlsson works as a Senior Software Engineer at ReadSoft, where he spends ...

  5. springboot不同环境打包

    1. 场景描述 springboot+maven打包,项目中经常用到不同的环境下打包不同的配置文件,比如连接的数据库.配置文件.日志文件级别等都不一样. 2. 解决方案 在pom.xml文件中定义 2 ...

  6. springboot+druid连接池及监控配置

    1. 问题描述 阿里巴巴的数据库连接池Druid在效率与稳定性都很高,被很多开发团队使用,并且自带的Druid监控也很好用,本章简单介绍下springboot+druid配置连接池及监控. 2. 解决 ...

  7. ServiceFabric极简文档-1.2 硬件环境.md

    1. 一个C盘,100G,16G内存,2.5HZ2. 官网有推荐配置

  8. 【EdgeBoard体验】开箱与上手

    简介 市面上基于嵌入式平台的神经网络加速平台有很多,今天给大家带来是百度大脑出品的EdgeBoard.按照官网文档的介绍,EdgeBoard是基于Xilinx Zynq Ultrascale+ MPS ...

  9. Spring Boot2(十四):单文件上传/下载,文件批量上传

    文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...

  10. 个人永久性免费-Excel催化剂功能第52波-相同内容批量合并单元格,取消合并单元格并填充内容

    在高级Excel用户群体中无比痛恨的合并单元格,在现实的表格中却阴魂不散的纠缠不断.今天Excel催化剂也来成为“帮凶”,制造更多的合并单元格.虽然开发出此功能,请使用过程中务必要保持节制,在可以称为 ...