Android可自定义神奇动效的卡片切换视图实例

 更新时间:2019年02月12日 11:01:23   作者:BakerJ  
今天小编就为大家分享一篇关于Android可自定义神奇动效的卡片切换视图实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧

前言

面对众多卡片层叠效果,我们的产品童鞋也突发奇想,搞出了另一种卡片层叠切换展示的交互,而且产品狗们居然要求多做几种动效给他们看,好让他们选择,这简直就是要搞事情啊,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等等,总会有意想不到的启发。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接

相关文章

  • Android实现仿今日头条点赞动画效果实例

    Android实现仿今日头条点赞动画效果实例

    我想看到今日头条的点赞效果,应该都觉得很绚丽吧,下面这篇文章主要给大家介绍了关于Android实现仿今日头条点赞动画效果的相关资料,文中通过示例代价介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • Android中使用protobuf的具体示例

    Android中使用protobuf的具体示例

    本篇文章主要介绍了Android中使用protobuf的具体示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • Android之ArcSlidingHelper制作圆弧滑动效果

    Android之ArcSlidingHelper制作圆弧滑动效果

    这篇文章主要介绍了Android之ArcSlidingHelper制作圆弧滑动效果,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • Android启动APP时黑屏白屏的解决方法

    Android启动APP时黑屏白屏的解决方法

    这篇文章主要为大家详细介绍了Android启动APP时黑屏白屏的解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android沉浸式状态栏微技巧(带你真正理解沉浸式模式)

    Android沉浸式状态栏微技巧(带你真正理解沉浸式模式)

    因为Android官方从来没有给出过沉浸式状态栏这样的命名,只有沉浸式模式(Immersive Mode)这种说法.下面通过本文给大家介绍Android沉浸式状态栏微技巧,需要的朋友参考下
    2016-12-12
  • Android CameraX结合LibYUV和GPUImage自定义相机滤镜

    Android CameraX结合LibYUV和GPUImage自定义相机滤镜

    之前使用Camera实现了一个自定义相机滤镜(Android自定义相机滤镜 ),但是运行起来有点卡顿,这次用Camerax来实现一样的效果发现很流畅,在此记录一下,也希望能帮到有需要的同学
    2021-12-12
  • Android实现京东上滑效果

    Android实现京东上滑效果

    这篇文章主要为大家详细介绍了Android实现京东上滑效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 快速解决安卓7.0系统写入SD卡权限失败的问题

    快速解决安卓7.0系统写入SD卡权限失败的问题

    今天小编就为大家分享一篇快速解决安卓7.0系统写入SD卡权限失败的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Android自定义view之围棋动画效果的实现

    Android自定义view之围棋动画效果的实现

    这篇文章主要介绍了Android自定义view之围棋动画效果的实现,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • Android自定义Style实现方法

    Android自定义Style实现方法

    Android自定义Style实现方法,需要的朋友可以参考一下
    2013-06-06

最新评论