如何利用RecyclerView打造炫酷滑动卡片( 二 )


factor=Math.abs(topView.getX() - mTopViewX) * 0.2 / mBorder + 0.8
(2)抬起手指
手指抬起后,我们要进行状态判断
1.滑动未超过边界
此时我们需要对进行归位 。
2.超过边界
此时我们需要根据滑动方向,使飞离屏幕 。
对于这两种情况,我们都是通过计算view的终 点坐标,然后利用动画实现的 。对于第一种,很简单,和直接就是的原始坐标 。但是对于第二种,需要根据的原始坐标和目前坐标,计算出线性表达式,然后再根据来计算,至于,往右飞就可以赋为,而往左就直接为0-view.width,只要终点在屏幕外就可以 。具 体代 码如 下 。
private void touchUp(final View view) {float targetX = 0;float targetY = 0;boolean del = false;if (Math.abs(view.getX() - mTopViewX) < mBorder) {targetX = mTopViewX;targetY = mTopViewY;} else if (view.getX() - mTopViewX > mBorder) {del = true;targetX = getScreenWidth()*2;mRemovedListener.onRightRemoved();} else {del = true;targetX = -view.getWidth()-getScreenWidth();mRemovedListener.onLeftRemoved();}View animView = view;TimeInterpolator interpolator = null;if (del) {animView = getMirrorView(view);float offsetX = getX() - mDecorView.getX();float offsetY = getY() - mDecorView.getY();targetY = caculateExitY(mTopViewX + offsetX, mTopViewY + offsetY, animView.getX(), animView.getY(), targetX);interpolator = new LinearInterpolator();} else {interpolator = new OvershootInterpolator();}final boolean finalDel = del;animView.animate().setDuration(500).x(targetX).y(targetY).setInterpolator(interpolator).setUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {if (!finalDel) {updateNextItem(Math.abs(view.getX() - mTopViewX) * 0.2 / mBorder + 0.8);}}});}
对于第二种情况,如果直接启动动 画,并在动画结束时通知删除item,在连续操作时,会导致数据错乱 。但是如果在动画启动时直接移除item,又会失去动画效果 。所以我在这里采用了另一种办法,在动画开始前 创建一个与 一模一样的镜像View,添加到上,并隐藏删除掉,然后利用镜像View来展示动画 。添加镜像View的代码如下:
private ImageView getMirrorView(View view) {view.destroyDrawingCache();view.setDrawingCacheEnabled(true);final ImageView mirrorView = new ImageView(getContext());Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());mirrorView.setImageBitmap(bitmap);view.setDrawingCacheEnabled(false);FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(bitmap.getWidth(), bitmap.getHeight());int[] locations = new int[2];view.getLocationOnScreen(locations);mirrorView.setAlpha(view.getAlpha());view.setVisibility(GONE);((SwipeCardAdapter) getAdapter()).delTopItem();mirrorView.setX(locations[0] - mDecorViewLocation[0]);mirrorView.setY(locations[1] - mDecorViewLocation[1]);mDecorView.addView(mirrorView, params);return mirrorView;}
因为镜像View是添加 在 上的,父容器是Re,而View的x、y是相对于父容器而言的,所以镜像View的和需要加上一定偏移量 。
好了到这里,一切就准 备就绪了,下面让我们看看动画效 果如何 。
总结
效果 是 不是 还 不错,项目 地址在 这里:,欢迎大家fork AND star!也希望大家在使用app,看到一些酷炫效果的时候,也自己 去动手实现,谁让 我们是有 着职业精 神的 码农 呢!