博主聲明：
轉(zhuǎn)載請?jiān)陂_頭附加本文鏈接及作者信息，并標(biāo)記為轉(zhuǎn)載土涝。本文由博主 威威喵 原創(chuàng)佛寿，請多支持與指教。
本文首發(fā)于此 博主：威威喵 | 博客主頁：https://blog.csdn.net/smile_running
今天在手機(jī)上看到這樣的一種加載效果但壮，看起來還挺炫酷的冀泻，好幾個(gè)小圓轉(zhuǎn)啊轉(zhuǎn)，顏色還不同蜡饵，轉(zhuǎn)完了之后消失了弹渔，然后內(nèi)容就加載出來了。用語言描述大概就是這樣了溯祸，我們直接看效果吧肢专。
看到這個(gè)效果的時(shí)候，我的腦殼里面就在想焦辅，這個(gè)圓它要怎么轉(zhuǎn)起來呢博杖，繪制一周的圓倒是比較簡單，但是要讓它轉(zhuǎn)起來筷登，肯定是坐標(biāo)值發(fā)生的改變剃根，那究竟如何做出相應(yīng)的改變呢，我們接下來一步一步分析和實(shí)現(xiàn)該效果前方。
首先狈醉，看到這個(gè)效果的時(shí)候，我們能做的第一步惠险，就是把外面這 6 個(gè)小圓給繪制出來苗傅，多的不說，我們先繪制固定的 6 個(gè)小圓就好了班巩，如何動起來再考慮渣慕。
要想繪制這 6 個(gè)靜態(tài)的小圓，其實(shí)并不難趣竣。小圓的軌跡其實(shí)就是一個(gè)圓的圓弧吧，那么這個(gè)軌跡所圍成的必定是一個(gè)大圓旱物，所以呢遥缕，我們先將里面這個(gè)大圓給繪制出來。
接著考慮小圓的繪制宵呛，既然我們已經(jīng)把大圓繪制出來了单匣，肯定直到大圓的圓心和半徑了，那么每一個(gè)小圓就是根據(jù)不同的角度繪制不同的位置了，那么 6 個(gè)小圓平均一下户秤，每個(gè)之間的間隔就是 60° 的差值码秉。好吧，之間來看下面我畫的草圖就一目了然了
根據(jù)上面我畫的那張圖鸡号，我們看到大圓一周共有 6 個(gè)小圓转砖，我們拿一個(gè)圓為例子， 綠色小圓的圓心 P 點(diǎn)就是我們所要求的坐標(biāo)點(diǎn)鲸伴。因?yàn)槲覀兊?6 個(gè)小圓對應(yīng)的角度都是均分的府蔗，所以我們也就知道了 a 的角度，通過三角函數(shù)公式可以計(jì)算出 x汞窗，y 的邊長姓赤，這樣就得出了 P 點(diǎn)的坐標(biāo)啦。
上面的效果就是這樣計(jì)算的仲吏，下面我們來看看代碼應(yīng)該怎么寫不铆。
private void drawCircles(Canvas canvas) {
for (int i = 0; i < mCircleCount; i++) {
mPaint.setColor(mColors[i]);
double diff = mAngleDiff + mPercentAngle * i;
float x = mCenterX + (float) Math.sin(diff) * mCenterRadius;
float y = mCenterY - (float) Math.cos(diff) * mCenterRadius;
canvas.drawCircle(x, y, mSmallCircleRadius, mPaint);
}
}
沒錯，代碼就是這么簡單就可以計(jì)算出 6 個(gè)小圓的 x , y 值裹唆，接著用 canvas 畫出來就形成下面的效果了
接下來誓斥，要想讓它旋轉(zhuǎn)起來的話，需要屬性動畫進(jìn)行配合處理每一個(gè)小圓所運(yùn)動時(shí)變化的角度差量值品腹，因?yàn)槊總€(gè)小圓的差量值都是一樣的岖食，這個(gè)差量值相當(dāng)于變化的小圓旋轉(zhuǎn)一周得到的角 a 的一個(gè)差量值，拿到這個(gè)值就可以配合三角函數(shù)公式計(jì)算出每一個(gè)小圓的 x 舞吭，y 坐標(biāo)了泡垃。最后，屬性動畫所改變的差值羡鸥，通過重新繪制蔑穴，就能使小圓旋轉(zhuǎn)起來了。代碼如下：
private void drawCenterCircle(Canvas canvas) {
if (mValueCirclesAnimator == null) {
//從 0 變到 2pi 就是每一個(gè)小圓所旋轉(zhuǎn)的差量
mValueCirclesAnimator = ObjectAnimator.ofFloat(0f, 2 * (float) Math.PI);
mValueCirclesAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mAngleDiff = (float) animation.getAnimatedValue();
invalidate();
}
});
mValueCirclesAnimator.setRepeatCount(-1);
mValueCirclesAnimator.setDuration(5000);
mValueCirclesAnimator.setInterpolator(new LinearInterpolator());
mValueCirclesAnimator.start();
}
drawCircles(canvas);
}
小圓的旋轉(zhuǎn)效果如下
好了惧浴，到這一步存和，我們的小圓就可以順利的旋轉(zhuǎn)起來了。接下來再去實(shí)現(xiàn)匯聚的動畫效果衷旅，等小圓的旋轉(zhuǎn)動畫結(jié)束之后呢捐腿，每個(gè)小圓都會開始匯聚到中心點(diǎn)，下面我們來看一張圖柿顶。
每一條粉紅色的線代表著中心位置與小圓的距離茄袖，也就是大圓的半徑，它們的值都是一樣的嘁锯。要想?yún)R聚到中心的話宪祥，那必然要改變大圓的半徑聂薪，直到半徑縮為 0 ，既每一個(gè)小圓就重合了蝗羊。
所以根據(jù)上面的分析藏澳，我們在旋轉(zhuǎn)動畫結(jié)束以后，要對大圓的半徑進(jìn)行縮小耀找，并且要重新繪制一下翔悠，代碼如下：
private void startConvergeAnimator() {
if (mConvergeAnimator == null) {
mConvergeAnimator = ObjectAnimator.ofFloat(mCenterRadius, 0);
mConvergeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCenterRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mConvergeAnimator.setDuration(2000);
mConvergeAnimator.setInterpolator(new AnticipateInterpolator(3f));
mConvergeAnimator.start();
}
}
這個(gè)動畫的執(zhí)行是在旋轉(zhuǎn)動畫之后開始的，所以要監(jiān)聽旋轉(zhuǎn)動畫的結(jié)束事件涯呻，并且結(jié)束時(shí)凉驻，取消旋轉(zhuǎn)動畫，代碼如下：
mRotateAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mRotateAnimator.cancel();
//旋轉(zhuǎn)動畫結(jié)束后复罐，播放匯聚動畫
startConvergeAnimator();
}
});
這樣就會看到如下的效果：
來到這一步涝登，我們就剩下最后一個(gè)圓的擴(kuò)散效果，圓的擴(kuò)散是從匯聚之后的那個(gè)中心點(diǎn)開始的效诅，首先它是一個(gè)空心的圓胀滚，隨著半徑慢慢的變大，然后把要顯示的內(nèi)容揭開乱投，視覺效果很強(qiáng)咽笼。
在這一步可能會有一點(diǎn)難度，因?yàn)槟憧赡軙慊炱蒽拧Ｎ覀兊陌霃狡鋵?shí)是不斷的從 0 變到對角線的長度的剑刑，這毫無疑意。那么既然是空心的圓双肤，畫筆要設(shè)置為空心施掏。這樣我們就可以反過來這樣想：
比如我就繪制一個(gè)空心的圓，它的大小固定是對角線的長度茅糜，在開始時(shí)設(shè)置它的畫筆寬度為對角線的長度七芭，伴隨著半徑不斷的增大，那么畫筆寬度也就隨著減小蔑赘，那就會是一個(gè)圓從中間擴(kuò)散的效果狸驳。看下面的草圖
黃色的線長度缩赛，既是我們要設(shè)置的畫筆寬度耙箍，它的值應(yīng)該是對角線減去半徑。代碼如下：
private void drawSpreadCircle(Canvas canvas) {
mPaint.setColor(mBackGround);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mDiagonal - mSpreadRadius);
canvas.drawCircle(mCenterX, mCenterY, mDiagonal, mPaint);
}
然后一個(gè)半徑變化的屬性動畫代碼
private void startSpreadAnimator() {
isSpread = true;
if (mSpreadAnimator == null) {
mSpreadAnimator = ObjectAnimator.ofFloat(0, mDiagonal);
mSpreadAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSpreadRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mSpreadAnimator.setDuration(5000);
mSpreadAnimator.start();
}
}
哈哈酥馍，最后的一步辩昆，我們就實(shí)現(xiàn)了這樣的效果了。
最后放出大招物喷，本文效果的最終全部代碼：
package nd.no.xww.qqmessagedragview;
import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.AnticipateInterpolator;
import android.view.animation.LinearInterpolator;
/**
* @author xww
* @desciption : 一個(gè)炫酷的加載動畫集合效果
* @date 2019/8/3
* @time 17:20
* 博主：威威喵
* 博客：https://blog.csdn.net/smile_Running
*/
public class LoaderAnimationView extends View {
private Paint mPaint;
private int mWidth;
private int mHeight;
private float mCenterRadius;
private int mCenterX;
private int mCenterY;
private float mSmallCircleRadius;
private int mCircleCount;
//角度差
private float mAngleDiff = 0F;
//每一份圓的角度占比
private double mPercentAngle;
//擴(kuò)散半徑
private float mSpreadRadius;
//屏幕對角線
private float mDiagonal;
// 旋轉(zhuǎn)動畫
private ValueAnimator mRotateAnimator;
// 匯聚動畫
private ValueAnimator mConvergeAnimator;
// 圓的擴(kuò)散動畫
private ValueAnimator mSpreadAnimator;
private boolean isSpread = false;
private int mBackGround;
//6種顏色卤材，繪制6個(gè)不同顏色的小圓
private int[] mColors = new int[]{
getResources().getColor(android.R.color.holo_red_dark),
getResources().getColor(android.R.color.holo_orange_dark),
getResources().getColor(android.R.color.holo_blue_dark),
getResources().getColor(android.R.color.holo_green_dark),
getResources().getColor(android.R.color.holo_purple),
getResources().getColor(android.R.color.darker_gray)
};
private void init() {
mPaint = new Paint();
mPaint.setDither(true);
mPaint.setAntiAlias(true);
mBackGround = Color.parseColor("#ffffff");
mCircleCount = mColors.length;
//計(jì)算每一個(gè)小圓對應(yīng)的角度
mPercentAngle = 2 * Math.PI / mCircleCount;
mWidth = getResources().getDisplayMetrics().widthPixels;
mHeight = getResources().getDisplayMetrics().heightPixels - mWidth / 4;
mCenterRadius = mWidth / 4;
mSmallCircleRadius = mCenterRadius / 8;
mCenterX = mWidth / 2;
mCenterY = mHeight / 2;
mDiagonal = (float) Math.sqrt(Math.pow(mCenterX, 2) + Math.pow(mCenterY, 2));
}
public LoaderAnimationView(Context context) {
this(context, null);
}
public LoaderAnimationView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public LoaderAnimationView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onDraw(Canvas canvas) {
//開始旋轉(zhuǎn)動畫
startRotateAnimator();
if (!isSpread) {
canvas.drawColor(mBackGround);
drawCircles(canvas);
} else {
drawSpreadCircle(canvas);
}
}
private void startRotateAnimator() {
//從 0 變到 2pi 就是每一個(gè)小圓所旋轉(zhuǎn)的差量
if (mRotateAnimator == null) {
mRotateAnimator = ObjectAnimator.ofFloat(0, 2 * (float) Math.PI);
mRotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mAngleDiff = (float) animation.getAnimatedValue();
invalidate();
}
});
mRotateAnimator.setDuration(3000);
mRotateAnimator.setInterpolator(new LinearInterpolator());
mRotateAnimator.start();
//監(jiān)聽動畫結(jié)束事件
mRotateAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mRotateAnimator.cancel();
//旋轉(zhuǎn)動畫結(jié)束后，播放匯聚動畫
startConvergeAnimator();
}
});
}
}
private void startConvergeAnimator() {
if (mConvergeAnimator == null) {
mConvergeAnimator = ObjectAnimator.ofFloat(mCenterRadius, 0);
mConvergeAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mCenterRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mConvergeAnimator.setDuration(2000);
mConvergeAnimator.setInterpolator(new AnticipateInterpolator(3f));
mConvergeAnimator.start();
mConvergeAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mConvergeAnimator.cancel();
//開始擴(kuò)散動畫
startSpreadAnimator();
}
});
}
}
private void startSpreadAnimator() {
isSpread = true;
if (mSpreadAnimator == null) {
mSpreadAnimator = ObjectAnimator.ofFloat(0, mDiagonal);
mSpreadAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mSpreadRadius = (float) animation.getAnimatedValue();
invalidate();
}
});
mSpreadAnimator.setDuration(5000);
mSpreadAnimator.start();
}
}
private void drawCircles(Canvas canvas) {
for (int i = 0; i < mCircleCount; i++) {
mPaint.setColor(mColors[i]);
double diff = mAngleDiff + mPercentAngle * i;
float x = mCenterX + (float) Math.sin(diff) * mCenterRadius;
float y = mCenterY - (float) Math.cos(diff) * mCenterRadius;
canvas.drawCircle(x, y, mSmallCircleRadius, mPaint);
}
}
private void drawSpreadCircle(Canvas canvas) {
mPaint.setColor(mBackGround);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(mDiagonal - mSpreadRadius);
canvas.drawCircle(mCenterX, mCenterY, mDiagonal, mPaint);
}
}
怎么樣峦失，效果很不錯吧扇丛，特地把圖片換成了我的博客的頭像，好喜歡這只小貓咪尉辑，一只敲可愛的小貓咪帆精，awsl，哇隧魄，就這樣吧卓练，結(jié)束。
