Android Recycleview与AnimatorSet实现画廊中卡片翻转效果 android动画

Android Recycleview与AnimatorSet实现画廊中卡片翻转效果

前言
1.使用recycleview实现画廊效果
2.实现item中卡片翻转的效果

2.1 item中的布局，由卡片的正反面组成。
2.2 在adapter中的onBindViewHolder（@NonNull RollingHolder holder, int position）方法中对点击事件进行监听实现卡片翻转的效果。
2.3 动画的实现初始化右出(RightOut）和左入(LeftIn)使用动画集合AnimatorSet.。在Recycleview的 adapter中通过标记的形式设置动画的翻转动作。

3.动画效果
参考文章

前言前一段时间发现微信读书中卡片翻转的效果很炫酷。就仔细研究了一下卡片翻转的效果，就写了一个在画廊中实现图片翻转的Demo。
1.使用recycleview实现画廊效果

//设置recycleview横向滑动 LinearLayoutManager ms = new LinearLayoutManager(this); ms.setOrientation(LinearLayoutManager.HORIZONTAL); recycler.setLayoutManager(ms); cardRollingAdapter = new CardRollingAdapter(this,cardTextList); recycler.setAdapter(cardRollingAdapter); //实现像ViewPager一次滑动一页的效果 new PagerSnapHelper().attachToRecyclerView(recycler);

2.实现item中卡片翻转的效果 2.1 item中的布局，由卡片的正反面组成。

2.2 在adapter中的onBindViewHolder（@NonNull RollingHolder holder, int position）方法中对点击事件进行监听实现卡片翻转的效果。

@Override public void onBindViewHolder(@NonNull RollingHolder holder, int position) {mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(context, R.anim.anim_out); mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(context, R.anim.anim_in); //设置数据 holder.bookTitle.setText(mData.get(position).getFontText()); holder.bookAuthor.setText(mData.get(position).getBackText()); //设置正面不同的背景 position++; if (position % 2 == 0){ holder.fontLayout.setBackgroundResource(R.drawable.sh_all_white_shadow); holder.bookTitle.setTextColor(mContext.getResources().getColor(R.color.color_ff8a8s8s)); }else{ holder.fontLayout.setBackgroundResource(R.drawable.sh_all_red_shadow); holder.bookTitle.setTextColor(mContext.getResources().getColor(R.color.color_f7f7f7)); }//对item 设置翻转动画 holder.itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (!mRightOutSet.isRunning() && !mLeftInSet.isRunning()){ String tag = ""; if (null == holder.ll_container.getTag()) { tag = "back"; //设置视角距离贴近屏幕 int distance = 16000; float scale = mContext.getResources().getDisplayMetrics().density * distance; holder.fontLayout.setCameraDistance(scale); holder.backLayout.setCameraDistance(scale); } else { tag = holder.ll_container.getTag().toString(); }if ("back".equals(tag)) { mRightOutSet.setTarget(holder.fontLayout); mLeftInSet.setTarget(holder.backLayout); mRightOutSet.start(); mLeftInSet.start(); holder.ll_container.setTag("front"); } else { mRightOutSet.setTarget(holder.backLayout); mLeftInSet.setTarget(holder.fontLayout); mRightOutSet.start(); mLeftInSet.start(); holder.ll_container.setTag("back"); } }} }); }

2.3 动画的实现初始化右出(RightOut）和左入(LeftIn)使用动画集合AnimatorSet.。在Recycleview的 adapter中通过标记的形式设置动画的翻转动作。