轉載請標明出處：http://blog.csdn.net/android_mnbvcxz/article/details/78570594?

Android 卡片翻轉動畫效果

前言

前端時間開發一款應用APP，里面展示的內容需要用到卡片元素，卡片的正面顯示主要信息，卡片的背面顯示詳細信息，單擊卡片實現翻轉動畫的效果。 在這里我給出了兩個卡片翻轉動畫效果的樣式，廢話不多說，讓我們一起看看效果吧： 翻轉動畫一
翻轉動畫二

一、卡片翻轉動畫效果一詳解

1.1 界面布局

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/choose_product_item_ly"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:layout_gravity="center"android:foreground="?attr/selectableItemBackground"app:cardBackgroundColor="@android:color/transparent"app:cardCornerRadius="@dimen/radius"app:cardElevation="4dp"app:cardMaxElevation="4dp"app:cardPreventCornerOverlap="true"app:cardUseCompatPadding="true"><include layout="@layout/ly_choose_product_item_back" /><!--反面布局--><include layout="@layout/ly_choose_product_item_front" /><!--正面布局--></android.support.v7.widget.CardView>
注：在CardView控件里面include了兩個正面和反面兩個布局，用于分別顯示各自的內容（這里面的代碼就不貼了）

1.2 自定義3D旋轉動畫類（繼承Animation）

/*** 3D旋轉動畫*/ public class Rotate3dAnimation extends Animation {// 開始角度private final float mFromDegrees;// 結束角度private final float mToDegrees;// 中心點private final float mCenterX;private final float mCenterY;private final float mDepthZ;// 是否需要扭曲private final boolean mReverse;// 攝像頭private Camera mCamera;public Rotate3dAnimation(float fromDegrees, float toDegrees, float centerX,float centerY, float depthZ, boolean reverse) {mFromDegrees = fromDegrees;mToDegrees = toDegrees;mCenterX = centerX;mCenterY = centerY;mDepthZ = depthZ;mReverse = reverse;}@Overridepublic void initialize(int width, int height, int parentWidth,int parentHeight) {super.initialize(width, height, parentWidth, parentHeight);mCamera = new Camera();}// 生成Transformation@Overrideprotected void applyTransformation(float interpolatedTime, Transformation t) {final float fromDegrees = mFromDegrees;// 生成中間角度float degrees = fromDegrees+ ((mToDegrees - fromDegrees) * interpolatedTime);final float centerX = mCenterX;final float centerY = mCenterY;final Camera camera = mCamera;final Matrix matrix = t.getMatrix();camera.save();if (mReverse) {camera.translate(0.0f, 0.0f, mDepthZ * interpolatedTime);} else {camera.translate(0.0f, 0.0f, mDepthZ * (1.0f - interpolatedTime));}camera.rotateY(degrees);// 取得變換后的矩陣camera.getMatrix(matrix);camera.restore();matrix.preTranslate(-centerX, -centerY);matrix.postTranslate(centerX, centerY);} }

1.3 設置動畫監聽

/*** 動畫執行動作監聽*/private final class DisplayNextView implements Animation.AnimationListener {public void onAnimationStart(Animation animation) {}// 動畫結束public void onAnimationEnd(Animation animation) {item_ly.post(new Runnable() {@Overridepublic void run() {if (item_front_ly.getVisibility() == View.VISIBLE) {applyRotation(view, 90, 0, false);} else {applyRotation(view, -90, 0, false);}}});if (item_front_ly.getVisibility() == View.VISIBLE) {item_front_ly.setVisibility(View.GONE);item_back_ly.setVisibility(View.VISIBLE);} else {item_front_ly.setVisibility(View.VISIBLE);item_back_ly.setVisibility(View.GONE);}}public void onAnimationRepeat(Animation animation) {}}注：這里動畫監聽的主要功能是判斷：如果之前顯示的是正面，則在動畫結束后隱藏正面，顯示反面；反之，隱藏反面，顯示正面

1.4 設置旋轉動畫

/*** 設置旋轉動(畫動畫效果1）* @param view* @param start* @param end* @param reverse*/private void applyRotation(View view, float start, float end, boolean reverse) {// 計算中心點float centerX = view.getWidth() / 2.0f;float centerY = view.getHeight() / 2.0f;Rotate3dAnimation rotation = new Rotate3dAnimation(start, end,centerX, centerY, 300.0f, reverse);rotation.setDuration(300);rotation.setFillAfter(true);rotation.setInterpolator(new AccelerateInterpolator());if (reverse)rotation.setAnimationListener(new DisplayNextView()); // 設置監聽view.startAnimation(rotation);}

二、卡片翻轉動畫效果二詳解

2.1 界面布局

<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/item_ly"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:layout_gravity="center"android:background="@android:color/transparent"><include layout="@layout/ly_item_back" /><!--反面布局--><include layout="@layout/ly_item_front" /><!--正面布局--></FrameLayout>

2.2 設置動畫

// 設置動畫（動畫效果1）private void setAnimators(final View view) {mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(mContext, R.animator.card_flip_anim_out);mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(mContext, R.animator.card_filp_anim_in); // 設置點擊事件mRightOutSet.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationStart(Animator animation) {super.onAnimationStart(animation);view.setClickable(false);}});mLeftInSet.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);view.setClickable(true);}});} 注：初始化右出(RightOut)和左入(LeftIn)動畫, 使用動畫集合AnimatorSet。當右出動畫開始時, 點擊事件無效, 當左入動畫結束時, 點擊事件恢復.

2.2.1 右出動畫（在動畫資源文件夾animator中創建動畫文件card_flip_anim_out.xml）

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"><!--旋轉--><objectAnimatorandroid:duration="3000"<!--總共旋轉時間，單位ms-->android:propertyName="rotationY"android:valueFrom="0"android:valueTo="180"/><!--消失--><objectAnimatorandroid:duration="0"android:propertyName="alpha"android:startOffset="1500"<!--背面布局出現時間（也是正面布局消失時間，正好是總共旋轉時間的一半），單位ms-->android:valueFrom="1.0"android:valueTo="0.0"/> </set> 注：右出動畫會旋轉180°, 當旋轉一半時, 正面卡片消失

2.2.2 左入動畫（在動畫資源文件夾animator中創建動畫文件card_flip_anim_in.xml）

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"><!--消失--><objectAnimatorandroid:duration="0"android:propertyName="alpha"android:valueFrom="1.0"android:valueTo="0.0"/><!--旋轉--><objectAnimatorandroid:duration="3000"android:propertyName="rotationY"android:valueFrom="-180"android:valueTo="0"/><!--出現--><objectAnimatorandroid:duration="0"android:propertyName="alpha"android:startOffset="1500"android:valueFrom="0.0"android:valueTo="1.0"/> </set>注：左入動畫背面布局在開始時是隱藏, 逆向旋轉, 當旋轉一半時, 顯示卡片。

2.3 鏡頭視角

/*** 改變視角距離, 貼近屏幕（動畫效果2）*/private void setCameraDistance(View front_ly, View back_ly) {int distance = 16000;float scale = mContext.getResources().getDisplayMetrics().density * distance;front_ly.setCameraDistance(scale);back_ly.setCameraDistance(scale);}注：改變視角, 涉及到旋轉卡片的Y軸, 即rotationY, 需要修改視角距離。如果不修改, 則會超出屏幕高度, 影響視覺體驗.

3.4 旋轉控制

/*** 翻轉動畫（動畫效果1）** @param v*/private void flipCard(View v) {// 正面朝上if (isShowBack()) {setShowBack(false);mRightOutSet.setTarget(item_front_ly);mLeftInSet.setTarget(item_back_ly);mRightOutSet.start();mLeftInSet.start();} else { // 背面朝上setShowBack(true);mRightOutSet.setTarget(item_back_ly);mLeftInSet.setTarget(item_front_ly);mRightOutSet.start();mLeftInSet.start();}}


源碼我還沒有從項目中剝離出來，要是公司項目一起上傳的話，感覺會被砍，所以我就不上傳了，要是有問題的話可以相互交流交流。


參考： http://blog.csdn.net/easyer2012/article/details/50483930

總結

以上是生活随笔為你收集整理的Android 卡片翻转动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。