卡片翻牌效果

---

实现方法：

    1.使用属性动画ObjectAnimator

    2.使用Animator

    3.使用canvas绘制

前两种方法网上很多，这里不多做介绍，这里着重介绍第三种，因为可自定义的程度比较高，所以适用的范围比较广一些，最下方也有github的源码地址，大家可以看看，因为是个简单demo，所以没有考虑太多复用问题，大家可以自行优化。源码：卡片翻牌效果

Card

准备数据：动画是由数据来驱动，我这边准备了24点玩法的图片和random了一些1-13的数字来作为数据，其中正面的背景图片有4种扑克牌花色的图片，1-13的扑克牌图片，以及背面的塔罗牌卡片。

想法：使用ValueAnimator来作为动画旋转的时间和角度控制，将一张或多张图片进行旋转

实现：将每张卡片视为一个cell，在view中设置好位置，然后将绘制过程放到cell中，每个cell控制自身的旋转和位置，这里将关键代码贴出

---

```

canvas.save();

//因为要将Camera的视角调整到图片的中间位置，所以向下移动卡片的高度一半，而且我是从180到0的角度转换，所以要向右移动一个卡片距离

canvas.translate(rect.left + rect.width(), rect.top + rect.height() /2);

mCamera.save();

mCamera.translate(0, rect.height() /2,0);

mCamera.rotateY(mRy);

mCamera.getMatrix(mMatrix);

mCamera.restore();

//将轴心移动到卡片中心（PS：因为是从180度开始，所以看起来是在卡片的右边,向左移动卡片宽度一半）

mMatrix.preTranslate(-rect.width() /2,0);

mMatrix.postTranslate(-rect.width() /2,0);

if (mTargetVarietyBitmap ==null &&mVarietyBitmap !=null) {

mTargetVarietyBitmap = Bitmap.createScaledBitmap(mVarietyBitmap, rect.width(), rect.height(),false);

}

if (mTargetContentBitmap ==null &&mContentBitmap !=null &&mVarietyBitmap !=null) {

float sx = rect.width() *1.0f /mVarietyBitmap.getWidth();

float sy = rect.height() *1.0f /mVarietyBitmap.getHeight();

mTargetContentBitmap = Bitmap.createScaledBitmap(mContentBitmap, (int) (mContentBitmap.getWidth() * sx), (int) (mContentBitmap.getHeight() * sy),false);

}

float tx = (rect.width() -mTargetContentBitmap.getWidth()) /2;

float ty = (rect.height() -mTargetContentBitmap.getHeight()) /2;

if (mRy >90) {

//角度大于90的时候只绘制背面

if (cardBitmap !=null) {

canvas.drawBitmap(cardBitmap,mMatrix,mPaint);

}

}else {

if (mTargetVarietyBitmap !=null) {

canvas.drawBitmap(mTargetVarietyBitmap,mMatrix,mPaint);

}

//绘制数字图片的时候，移动到卡片的中间位置

if (mTargetContentBitmap !=null) {

mMatrix.preTranslate(tx, ty);

canvas.drawBitmap(mTargetContentBitmap,mMatrix,mPaint);

mMatrix.postTranslate(tx, ty);

}

}

canvas.restore();

```

---

卡片翻牌效果源码 如果你觉得还可以的话，跪求个star，^_^