????????????????????????????????????????卡片翻牌效果
實(shí)現(xiàn)方法:
? ? 1.使用屬性動(dòng)畫ObjectAnimator
? ? 2.使用Animator
? ? 3.使用canvas繪制
前兩種方法網(wǎng)上很多水醋,這里不多做介紹管削,這里著重介紹第三種翔始,因?yàn)榭勺远x的程度比較高罗心,所以適用的范圍比較廣一些,最下方也有g(shù)ithub的源碼地址城瞎,大家可以看看渤闷,因?yàn)槭莻€(gè)簡(jiǎn)單demo,所以沒有考慮太多復(fù)用問題脖镀,大家可以自行優(yōu)化飒箭。源碼:卡片翻牌效果
準(zhǔn)備數(shù)據(jù):動(dòng)畫是由數(shù)據(jù)來(lái)驅(qū)動(dòng),我這邊準(zhǔn)備了24點(diǎn)玩法的圖片和random了一些1-13的數(shù)字來(lái)作為數(shù)據(jù),其中正面的背景圖片有4種撲克牌花色的圖片弦蹂,1-13的撲克牌圖片漫萄,以及背面的塔羅牌卡片。
想法:使用ValueAnimator來(lái)作為動(dòng)畫旋轉(zhuǎn)的時(shí)間和角度控制盈匾,將一張或多張圖片進(jìn)行旋轉(zhuǎn)
實(shí)現(xiàn):將每張卡片視為一個(gè)cell腾务,在view中設(shè)置好位置,然后將繪制過程放到cell中削饵,每個(gè)cell控制自身的旋轉(zhuǎn)和位置岩瘦,這里將關(guān)鍵代碼貼出
```
canvas.save();
//因?yàn)橐獙amera的視角調(diào)整到圖片的中間位置,所以向下移動(dòng)卡片的高度一半窿撬,而且我是從180到0的角度轉(zhuǎn)換启昧,所以要向右移動(dòng)一個(gè)卡片距離
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();
//將軸心移動(dòng)到卡片中心(PS:因?yàn)槭菑?80度開始,所以看起來(lái)是在卡片的右邊,向左移動(dòng)卡片寬度一半)
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的時(shí)候只繪制背面
if (cardBitmap !=null) {
canvas.drawBitmap(cardBitmap,mMatrix,mPaint);
}
}else {
if (mTargetVarietyBitmap !=null) {
canvas.drawBitmap(mTargetVarietyBitmap,mMatrix,mPaint);
}
//繪制數(shù)字圖片的時(shí)候劈伴,移動(dòng)到卡片的中間位置
if (mTargetContentBitmap !=null) {
mMatrix.preTranslate(tx, ty);
canvas.drawBitmap(mTargetContentBitmap,mMatrix,mPaint);
mMatrix.postTranslate(tx, ty);
}
}
canvas.restore();
```
卡片翻牌效果源碼?如果你覺得還可以的話密末,跪求個(gè)star,^_^