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

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中的布局，由卡片的正反面组成。

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ll_icontainer" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/back_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="45dp" android:layout_marginBottom="45dp" android:gravity="center" android:background="@drawable/sh_all_back_shadow"> <TextView android:id="@+id/book_author" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#0f1312" android:textSize="19sp" android:text="作者"/> </LinearLayout> <LinearLayout android:id="@+id/font_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="45dp" android:layout_marginBottom="45dp" android:gravity="center" android:background="@drawable/sh_all_red_shadow"> <TextView android:id="@+id/book_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#f7f7f7" android:textSize="19sp" android:text="书名"/> </LinearLayout> </FrameLayout> </LinearLayout>

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中通过标记的形式设置动画的翻转动作。

//左入动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <!--消失--> <objectAnimator android:duration="0" android:propertyName="alpha" android:valueFrom="1.0" android:valueTo="0.0" /> <!--旋转--> <objectAnimator android:duration="@integer/anim_length" android:propertyName="rotationY" android:valueFrom="-180" android:valueTo="0" /> <!--出现--> <objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="@integer/anim_half_length" android:valueFrom="0.0" android:valueTo="1.0" /> </set> //右出动画 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <!--旋转--> <objectAnimator android:duration="@integer/anim_length" android:propertyName="rotationY" android:valueFrom="0" android:valueTo="180" /> <!--消失--> <objectAnimator android:duration="0" android:propertyName="alpha" android:startOffset="@integer/anim_half_length" android:valueFrom="1.0" android:valueTo="0.0" /> </set>

3.动画效果

参考文章

https://blog.csdn.net/caroline_wendy/article/details/50756697