一.效果演示
好久都沒(méi)有更新文章了氛赐，決定加班更新一篇文章。剛進(jìn)入一個(gè)新的環(huán)境正在慢慢適應(yīng)先舷，加上深圳這邊節(jié)奏又比較快艰管，閑暇的時(shí)間是越來(lái)越少了，所以這次就分享工作中遇到的一個(gè)簡(jiǎn)單小效果蒋川。這效果花了我接近半天的時(shí)間牲芋，先來(lái)看下：
自定義炫酷動(dòng)畫 - 搶紅包動(dòng)效
接到一個(gè)新的任務(wù)，設(shè)計(jì)師效果出來(lái)后感覺(jué)還是蠻酷的捺球。首先想到的不是去網(wǎng)上找缸浦，找應(yīng)該也是白找，靜下心來(lái)分析分析氮兵。
二.效果分析實(shí)現(xiàn)
首先我們肯定會(huì)想能不能叫設(shè)計(jì)師給個(gè) gif 圖片裂逐，但是這些進(jìn)度是可以由后臺(tái)控制，所以單純的 gif 圖片肯定是不能實(shí)現(xiàn)的胆剧。因此我們只能自定義 View 去實(shí)現(xiàn)絮姆。紅包和進(jìn)度條背景給的是兩張圖片，爆炸效果給的也是兩張?jiān)貓D片秩霍，分析一下其實(shí)也挺簡(jiǎn)單的：
1篙悯、首先我們可以先實(shí)現(xiàn)進(jìn)度條效果；
2铃绒、其次進(jìn)度條動(dòng)畫執(zhí)行完后實(shí)現(xiàn)爆炸效果鸽照；
3、最后進(jìn)度條滿格后實(shí)現(xiàn)縮小放大爆炸效果颠悬。
步驟是這么個(gè)步驟矮燎，關(guān)鍵是代碼怎么寫定血？如果我們自定義 View 已經(jīng)入門了，那么寫起來(lái)就很簡(jiǎn)單了诞外，就是時(shí)間的問(wèn)題而已屑墨。還有我們能想到最麻煩的問(wèn)題就是適配怎么做矾兜？我們某個(gè)手機(jī)可能效果剛好此改，那其他手機(jī)呢姓赤？寫完以后如果有卡頓又該怎么優(yōu)化？問(wèn)題會(huì)有一大堆的既们，但真要?jiǎng)邮謱懫饋?lái)也沒(méi)那么麻煩濒析。
1、首先我們可以先實(shí)現(xiàn)進(jìn)度條效果
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 指定大小為寬高最大的值 * 1.1 啥纸，為什么要多 0.1 是由于有爆炸效果
int size = (int) (Math.max(mRedPackageBitmap.getWidth(), mRedPackageBitmap.getHeight()) * 1.1f);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(size, size);
}
@Override
protected void onDraw(Canvas canvas) {
// 先繪制靜態(tài)內(nèi)容
int viewHeight = getHeight();
int viewWidth = getWidth();
// 繪制紅包
canvas.drawBitmap(mRedPackageBitmap, 0, 0, null);
// 繪制進(jìn)度條背景,必須匹配上紅包位置号杏，只能按比例計(jì)算,而且還有適配所有機(jī)型
int progressBgWidth = mProgressBgBitmap.getWidth();
int left = (int) (progressBgWidth * 0.09f);
int top = viewHeight - mProgressBgBitmap.getHeight() - left;
canvas.drawBitmap(mProgressBgBitmap, left, top, null);
// 繪制進(jìn)度
if(mTotalProgress == 0 || mCurrentProgress == 0){
return;
}
// 這些只能慢慢調(diào)試，不能出現(xiàn)任何跟 px dp 有關(guān)的單位斯棒，只能按比例調(diào)試
int progressHeight = (int) (mProgressBgBitmap.getHeight()*0.25f);
float progressWidth = viewWidth*0.64f;
int currentProgressWidth = (int) (progressWidth*mCurrentProgress/mTotalProgress);
int round = progressHeight/2;
// 設(shè)置進(jìn)度條漸變顏色
Shader shader = new LinearGradient(0, 0, progressWidth, 0, new int[]{mProgressStarColor,mProgressEndColor}, new float[]{0, 1.0f}, Shader.TileMode.CLAMP);
mProgressPaint.setShader(shader);
top = (int) (top*1.19f);
left = (int) (left*2.5f);
RectF rectF = new RectF(left,top,left+currentProgressWidth,top+progressHeight);
canvas.drawRoundRect(rectF,round,round,mProgressPaint);
}
public void startAnimator(int from, int to) {
// 屬性動(dòng)畫
ValueAnimator animator = ValueAnimator.ofFloat(from, to).setDuration(PROGRESS_EXECUTE_TIME);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
// 不斷的設(shè)置當(dāng)前進(jìn)度刷新進(jìn)度效果
Float current = (Float) animation.getAnimatedValue();
setCurrentProgress(current);
}
});
animator.start();
}
2盾致、其次進(jìn)度條動(dòng)畫執(zhí)行完后實(shí)現(xiàn)爆炸效果
// 繪制爆炸效果
if (mBombProgress > 0 && mBombProgress < 1) {
// 每份角度
float preAngle = (float) (2 * Math.PI / mBombIcon.length);
for (int i = 0; i < 8; i++) {
// 計(jì)算每個(gè)角度
double angle = i * preAngle;
// 設(shè)置透明度
mBombPaint.setAlpha((int) (320 - mBombProgress * 255));
float cx = (float) (bombCenterX + mProgressBombRadius * mBombProgress * Math.cos(angle));
float cy = (float) (bombCenterY + mProgressBombRadius * mBombProgress * Math.sin(angle));
canvas.drawBitmap(mBombIcon[i % 2], cx, cy, mBombPaint);
}
}
// 繪制爆炸的動(dòng)畫
private void executeDisperseBombAnimator() {
ValueAnimator animator = ValueAnimator.ofFloat(0, 1f).setDuration(BOMB_EXECUTE_TIME);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mBombProgress = (float) animation.getAnimatedValue();
invalidate();
}
});
animator.setInterpolator(new DecelerateInterpolator());
animator.start();
animator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// 繪制完爆炸以后如果是滿格，執(zhí)行縮小動(dòng)畫
if (mCurrentProgress == mTotalProgress) {
}
}
});
}
3名船、最后進(jìn)度條滿格后實(shí)現(xiàn)縮小放大爆炸效果绰上。
/**
* 執(zhí)行縮小動(dòng)畫
*/
private void executeShrinkAnimator() {
if (mShrinkAnimators == null) {
mShrinkAnimators = new AnimatorSet();//組合動(dòng)畫
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", 1f, SHRINK_SCALE);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", 1f, SHRINK_SCALE);
mShrinkAnimators.setDuration(SHRINK_EXECUTE_TIME);
mShrinkAnimators.setInterpolator(new DecelerateInterpolator());
mShrinkAnimators.play(scaleX).with(scaleY);//兩個(gè)動(dòng)畫同時(shí)開(kāi)始
mShrinkAnimators.start();
mShrinkAnimators.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
// mHandler.sendEmptyMessageDelayed(0x0011, 200);
executeMagnifyAnimator();
}
});
}
mShrinkAnimators.start();
mHandler.sendEmptyMessageDelayed(0x0022, SHRINK_EXECUTE_TIME - 100);
}
/**
* 執(zhí)行放大的效果
*/
private void executeMagnifyAnimator() {
if (mMagnifyAnimators == null) {
mMagnifyAnimators = new AnimatorSet();//組合動(dòng)畫
ObjectAnimator scaleX = ObjectAnimator.ofFloat(this, "scaleX", SHRINK_SCALE, 1f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(this, "scaleY", SHRINK_SCALE, 1f);
mMagnifyAnimators.setDuration(MAGNIFY_EXECUTE_TIME);
mMagnifyAnimators.setInterpolator(new DecelerateInterpolator());
mMagnifyAnimators.play(scaleX).with(scaleY);//兩個(gè)動(dòng)畫同時(shí)開(kāi)始
mMagnifyAnimators.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mHandler.sendEmptyMessageDelayed(0x0011, ANIMATION_STOP_TIME);
}
});
}
mMagnifyAnimators.start();
}
視頻鏈接：https://pan.baidu.com/s/1cAYBfuhR1WquroYjakftfg
視頻密碼：h7w6
