Android可自定义神奇动效的卡片切换视图实例
作者:BakerJ 发布时间:2022-11-24 09:07:46
前言
面对众多卡片层叠效果,我们的产品童鞋也突发奇想,搞出了另一种卡片层叠切换展示的交互,而且产品狗们居然要求多做几种动效给他们看,好让他们选择,这简直就是要搞事情啊,what are you 弄啥咧?!
“哥哥我做不到啊.....啊.....呸”,做为一名有节操的程序猿,自然是不能说出这么没有出息的话,哥就满足你们,于是,出了个可自定义动效的卡片切换视图,效果如下所示
思路
首先,要展示出卡片层叠的视觉效果。在这里,我们通过方块的缩放大小差异以及在Y方向上的位置差异,来展现这种视觉效果。
其次,要能够方便的定义卡片视图内容。我们通过都很熟悉的设置Adapter的方式来构建内容视图。
最后,要能够自定义动效。我们通过定义一个由0到1的ValueAnimator,即每个动画的过程,其实就是该ValueAnimator在一个动画周期内,从0变化到1的过程,0表示动画刚开始,1表示动画结束了,0.5则表示这一轮动画已经执行到了一半。这样,通过转换器以及插值器,我们就可以根据ValueAnimator实时的值,来设置当前正在执行动画的卡片应该有的“样子”。
总览
我们给出三种基本的动画模式
/*
* ANIM_TYPE_FRONT:被选中的卡片通过自定义动效移至第一,其他的卡片通过通用动效补位
* ANIM_TYPE_SWITCH:选中的卡片和第一张卡片互换位置,并都是自定义动效
* ANIM_TYPE_FRONT_TO_LAST:第一张图片通过自定义动效移至最后,其他卡片通过通用动效补位
*/
public static final int ANIM_TYPE_FRONT = 0, ANIM_TYPE_SWITCH = 1, ANIM_TYPE_FRONT_TO_LAST = 2;
并通过Helper类来处理所有的动画逻辑,以及Adapter来生成卡片视图
private CardAnimationHelper mAnimationHelper;
private BaseAdapter mAdapter;
在onMeasure时根据卡片宽高比来设置卡片的尺寸,在此请注意,当前情况下卡片宽度与整体容器宽度一致,后续通过自定义的方式,通过缩放来产生卡片的视觉效果。
private float mCardRatio = CARD_SIZE_RATIO;//宽高比:卡片高 / 卡片宽
private int mCardWidth, mCardHeight;//卡片宽高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
...
if (mCardWidth == 0 || mCardHeight == 0) {
setCardSize(true);
}
}
/*
* 根据卡片比例计算卡片宽高,并传入Helper
*/
private void setCardSize(boolean resetAdapter) {
mCardWidth = getMeasuredWidth();
mCardHeight = (int) (mCardWidth * mCardRatio);
mAnimationHelper.setCardSize(mCardWidth, mCardHeight);
mAnimationHelper.initAdapterView(mAdapter, resetAdapter);
}
那么如此之后,自然Helper中就保存了视图的主要数据与参数
//卡片列表
private LinkedList<CardItem> mCards;
//当前正在向后以及向前移动的卡片
private CardItem mCardToBack, mCardToFront;
//正在向后以及向前移动卡片的位置
private int mPositionToBack = 0, mPositionToFront = 0;
//动画运行的ValueAnimator
private ValueAnimator mValueAnimator;
//当前的动画系数
private float mCurrentFraction = 1;
...//以及一系列的转换器与插值器
细节
那么,动画到底是如何实现的,以及如何自定义的呢,我们以通用动画为例,来看看动画的主要流程
首先,在ValueAnimator更新的时候,获得当前的动画系数,依次来执行动画
/**
* ValueAnimator动画更新
*/
@Override
public void onAnimationUpdate(ValueAnimator animation) {
//获取当前动画系数
mCurrentFraction = (float) animation.getAnimatedValue();
//通过插值器获取插值系数
fractionInterpolated = mAnimInterpolator.getInterpolation(mCurrentFraction);
doAnimationCommon(mCurrentFraction, fractionInterpolated);
...
}
接着,对需要执行动画的卡片,执行动画,以ANIM_TYPE_FRONT动画模式为例,当选中的卡片移动到最前的时候,原来在这张卡片之前的所有卡片,都要向后移动一位,来留出第一个的位置
/**
* 执行通用动画
*/
private void doAnimationCommon(float fraction, float fractionInterpolated) {
//如果当前动画模式为选中的卡片移到最前
if (mAnimType == InfiniteCardView.ANIM_TYPE_FRONT) {
//则遍历在选中卡片之前的卡片
for (int i = 0; i < mPositionToFront; i++) {
CardItem card = mCards.get(i);
//对卡片执行动画,从当前位置移动到后一个位置
doAnimationCommonView(card.view, fraction, fractionInterpolated, i, i + 1);
...
}
}...
}
最后,通过转换器,对卡片进行自定义动画处理
/**
* 对视图执行通用动画
* @param view 卡片视图
* @param fromPosition 从该位置
* @param toPosition 移动到该位置
*/
private void doAnimationCommonView(View view, float fraction, float fractionInterpolated, int
fromPosition, int toPosition) {
//通用转换器转换动画
mTransformerCommon.transformAnimation(view, fraction, mCardWidth,
mCardHeight, fromPosition, toPosition);
if (mAnimInterpolator != null) {
//通用转换器转换插值动画
mTransformerCommon.transformInterpolatedAnimation(view, fractionInterpolated, mCardWidth,mCardHeight, fromPosition, toPosition);
}
}
而转换器的具体实现则以DefaultCommonTransformer为例
@Override
public void transformAnimation(View view, float fraction, int cardWidth, int cardHeight, int fromPosition, int toPosition) {
//需要跨越的卡片数量
int positionCount = fromPosition - toPosition;
//以0.8做为第一张的缩放尺寸,每向后一张缩小0.1
//(0.8f - 0.1f * fromPosition) = 当前位置的缩放尺寸
//(0.1f * fraction * positionCount) = 移动过程中需要改变的缩放尺寸
float scale = (0.8f - 0.1f * fromPosition) + (0.1f * fraction * positionCount);
ViewHelper.setScaleX(view, scale);
ViewHelper.setScaleY(view, scale);
//在Y方向的偏移量,每向后一张,向上偏移卡片宽度的0.02
//-cardHeight * (0.8f - scale) * 0.5f 对卡片做整体居中处理
ViewHelper.setTranslationY(view, -cardHeight * (0.8f - scale) * 0.5f - cardWidth * (0.02f *
fromPosition - 0.02f * fraction * positionCount));
}
对于向第一位移动的选中卡片,也是同理,只不过是根据该卡片对应的转换器来进行自定义动画的转换。
最后的效果,就像演示图中第一次点击,图片向前翻转到第一位的效果一样。
对于产品狗突如其来的想法,咱们程序猿不善于口水仗的,就只能用代码来让他们来服气了。毕竟,大家还都是伐木累嘛,哈哈。
当实现某个东西遇到困难时,不妨想想Android系统自身的一些实现方式,比如参考ListView的Adapter,ViewPager定义翻页动画的Transformer等等,总会有意想不到的启发。
总结
猜你喜欢
- 本文实例为大家分享了SpringBoot实现分页功能的具体代码,供大家参考,具体内容如下新建demo\src\main\java\com\e
- 在Java SE中,对IO流与集合的操作在应用中比较重要。接下来,我以一个小型项目的形式,演示IO流、集合等知识点在实践中的运用。该项目名称
- Java线程池的几种实现方法和区别介绍import java.text.DateFormat;import java.text.Simple
- 本文实例为大家分享了java利用udp实现发送数据的具体代码,供大家参考,具体内容如下1.udp的特点数据以包的形式发送数据udp是面向无连
- 你以前听到的谈论关于Java8的所有都是围绕lambda表达式. 但它仅仅是Java8的一部分. Java 8 有许多新特性—一些强大的新类
- java 设计模式之单例模式前言:在软件开发过程中常会有一些对象我们只需要一个,如:线程池(threadpool)、缓存(cac
- 本文实例讲述了Android编程中context及全局变量的用法。分享给大家供大家参考,具体如下:今天在研究context的时候,对appl
- 1、什么是序列化与反序列化?序列化:指把堆内存中的 Java 对象数据,通过某种方式把对象存储到磁盘文件中或者传递给其他网络节点(在网络上传
- 本文是Neward & Associates的总裁Ted Neward为developerworks独家撰稿“你不知道5个……”系列
- 最近碰到这个问题,在使用spring提供的JpaTemplate进行查询时,如果数据量超过100 条,查询效率就会明显降低。由于开始时使用J
- XmlTextReader 提供对 XML 数据流的只进只读访问。当前节点指读取器定位到的节点。使用任何读方法推进读取器并且属性反映当前节点
- 接触FFmpeg有一段时间了,它是音视频开发的开源库,几乎其他所有播放器、直播平台都基于FFmpeg进行二次开发。本篇文章来总结下采用FFm
- 一、什么是HTTP协议HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应
- 结构化查询语言(SQL)是一种标准化的语言,它允许你在数据库上执行操作,如创建项目,读取内容,内容更新和删除条目。SQL是所有可能会使用几乎
- 本文主要给大家介绍了关于Java8中Optional类型和Kotlin中可空类型使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一
- 一、场景笔者就Zuul网关下实现其负载均衡与熔断机制(雪崩)进行实践,前提是已经导入zuul相关依赖springboot版本:1.5.9.R
- 一、实验:继承1、概念Maven工程之间,A 工程继承 B 工程B 工程:父工程A 工程:子工程本质上是 A 工程的 pom.xml 中的配
- 一、 * 与过滤器在讲Spring boot之前,我们先了解一下过滤器和 * 。这两者在功能方面很类似,但是在具体技术实现方面,差距还是比较
- JVM内存模型/内存空间Java虚拟机JVM运行起来,就会给内存划分空间,这块空间成为运行时数据区。运行时数据区主要划分为以下 6
- 在C程序代码中我们可以利用操作系统提供的互斥锁来实现同步块的互斥访问及线程的阻塞及唤醒等工作。然而在Java中除了提供LockAPI外还在语