一步步教你寫Slack的Loading動畫
項目地址:https://github.com/JeasonWong/SlackLoadingView
老規(guī)矩,先上效果。
圖好大。。
說下第一眼看到這個動畫后的思路:
+兩根平行線,要用到直線方程 y=kx+b
+另外兩根平行線,與之前兩根平行線的斜率相乘為-1,即k1*k2=-1
+線條做圓周運動就是k值的不斷變化
+然后就是簡單的線條長度變化
我相信很多人第一眼會和我有類似的思路,但是當我上了個廁所后意識到我想復雜了~
說下上完廁所后的思路:
不要想著線條是斜的,就是一個普通的線段,一個LineTo搞定(startX和stopX一樣,僅Y不同)
線條的垂直更容易,直接Canvas翻轉(轉過后再轉回)
整個動畫的圓周運動也是Canvas翻轉(轉過后不轉回)
線條的單度變化依然用屬性動畫(這是必須的。。)
動畫開始前就讓整個Canvas旋轉
這樣一來就太容易了。
我把動畫分成了四步:
畫布旋轉及線條變化動畫(Canvas Rotate Line Change)
畫布旋轉動畫(Canvas Rotate)
畫布旋轉圓圈變化動畫(Canvas Rotate Circle Change)
線條變化動畫(Line Change)
詳細說明前先介紹下成員變量和一些初始化
成員變量
//靜止狀態(tài) private final int STATUS_STILL = 0; //加載狀態(tài) private final int STATUS_LOADING = 1; //線條最大長度 private final int MAX_LINE_LENGTH = dp2px(getContext(), 120); //線條最短長度 private final int MIN_LINE_LENGTH = dp2px(getContext(), 40); //最大間隔時長 private final int MAX_DURATION = 3000; //最小間隔時長 private final int MIN_DURATION = 500; private Paint mPaint; private int[] mColors = new int[]{0xB07ECBDA, 0xB0E6A92C, 0xB0D6014D, 0xB05ABA94}; private int mWidth, mHeight; //動畫間隔時長 private int mDuration = MIN_DURATION; //線條總長度 private int mEntireLineLength = MIN_LINE_LENGTH; //圓半徑 private int mCircleRadius; //所有動畫 private List<Animator> mAnimList = new ArrayList<>(); //Canvas起始旋轉角度 private final int CANVAS_ROTATE_ANGLE = 60; //動畫當前狀態(tài) private int mStatus = STATUS_STILL; //Canvas旋轉角度 private int mCanvasAngle; //線條長度 private float mLineLength; //半圓Y軸位置 private float mCircleY; //第幾部動畫 private int mStep;
初始化
private void initView() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setColor(mColors[0]); } private void initData() { mCanvasAngle = CANVAS_ROTATE_ANGLE; mLineLength = mEntireLineLength; mCircleRadius = mEntireLineLength / 5; mPaint.setStrokeWidth(mCircleRadius * 2); mStep = 0; }
一、畫布旋轉及線條變化動畫(Canvas Rotate Line Change)
/** * Animation1 * 動畫1 * Canvas Rotate Line Change * 畫布旋轉及線條變化動畫 */ private void startCRLCAnim() { Collection<Animator> animList = new ArrayList<>(); ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(CANVAS_ROTATE_ANGLE + 0, CANVAS_ROTATE_ANGLE + 360); canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mCanvasAngle = (int) animation.getAnimatedValue(); } }); animList.add(canvasRotateAnim); ValueAnimator lineWidthAnim = ValueAnimator.ofFloat(mEntireLineLength, -mEntireLineLength); lineWidthAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mLineLength = (float) animation.getAnimatedValue(); invalidate(); } }); animList.add(lineWidthAnim); AnimatorSet animationSet = new AnimatorSet(); animationSet.setDuration(mDuration); animationSet.playTogether(animList); animationSet.setInterpolator(new LinearInterpolator()); animationSet.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { Log.d("@=>", "動畫1結束"); if (mStatus == STATUS_LOADING) { mStep++; startCRAnim(); } } }); animationSet.start(); mAnimList.add(animationSet); }
第一步動畫涉及到兩個動畫同時進行,所以使用了AnimatorSet,這個類很強大,可以讓N個動畫同時進行(playTogether),也可以讓N個動畫順序執(zhí)行(playSequentially)。
說到這里,其實我的四個動畫就是順序進行的,但是每個動畫里又有同時進行的動畫,為了講解方便,我是監(jiān)聽了onAnimationEnd來控制動畫執(zhí)行順序,其實可以直接使用playSequentially。
上方動畫就干了兩件事:
1、旋轉畫布,從CANVAS_ROTATE_ANGLE + 0轉到CANVAS_ROTATE_ANGLE + 360,CANVAS_ROTATE_ANGLE是畫布初始傾斜角度
2、線條長度變化,從mEntireLineLength到-mEntireLineLength。
對應的onDraw方法:
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (mStep % 4) { case 0: for (int i = 0; i < mColors.length; i++) { mPaint.setColor(mColors[i]); drawCRLC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 - mLineLength, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mPaint, mCanvasAngle + i * 90); } break; ... } } ... private void drawCRLC(Canvas canvas, float startX, float startY, float stopX, float stopY, @NonNull Paint paint, int rotate) { canvas.rotate(rotate, mWidth / 2, mHeight / 2); canvas.drawArc(new RectF(startX - mCircleRadius, startY - mCircleRadius, startX + mCircleRadius, startY + mCircleRadius), 180, 180, true, mPaint); canvas.drawLine(startX, startY, stopX, stopY, paint); canvas.drawArc(new RectF(stopX - mCircleRadius, stopY - mCircleRadius, stopX + mCircleRadius, stopY + mCircleRadius), 0, 180, true, mPaint); canvas.rotate(-rotate, mWidth / 2, mHeight / 2); }
是不是很機智,drawCRLC做了三件事:
1、畫布旋轉后又旋轉回來
2、畫半圓(為什么要畫半圓?不畫整個圓?這里留個思考題。)
3、畫線條
這樣動畫1就完成了。
二、畫布旋轉動畫(Canvas Rotate)
/** * Animation2 * 動畫2 * Canvas Rotate * 畫布旋轉動畫 */ private void startCRAnim() { ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(mCanvasAngle, mCanvasAngle + 180); canvasRotateAnim.setDuration(mDuration / 2); canvasRotateAnim.setInterpolator(new LinearInterpolator()); canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mCanvasAngle = (int) animation.getAnimatedValue(); invalidate(); } }); canvasRotateAnim.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { Log.d("@=>", "動畫2結束"); if (mStatus == STATUS_LOADING) { mStep++; startCRCCAnim(); } } }); canvasRotateAnim.start(); mAnimList.add(canvasRotateAnim); } ... @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (mStep % 4) { ... case 1: for (int i = 0; i < mColors.length; i++) { mPaint.setColor(mColors[i]); drawCR(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mPaint, mCanvasAngle + i * 90); } break; ... } } ... private void drawCR(Canvas canvas, float x, float y, @NonNull Paint paint, int rotate) { canvas.rotate(rotate, mWidth / 2, mHeight / 2); canvas.drawCircle(x, y, mCircleRadius, paint); canvas.rotate(-rotate, mWidth / 2, mHeight / 2); }
有了動畫1的底子,那這個就太容易了,只是簡單的旋轉Canvas。
三、畫布旋轉圓圈變化動畫(Canvas Rotate Circle Change)
/** * Animation3 * 動畫3 * Canvas Rotate Circle Change * 畫布旋轉圓圈變化動畫 */ private void startCRCCAnim() { Collection<Animator> animList = new ArrayList<>(); ValueAnimator canvasRotateAnim = ValueAnimator.ofInt(mCanvasAngle, mCanvasAngle + 90, mCanvasAngle + 180); canvasRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mCanvasAngle = (int) animation.getAnimatedValue(); } }); animList.add(canvasRotateAnim); ValueAnimator circleYAnim = ValueAnimator.ofFloat(mEntireLineLength, mEntireLineLength / 4, mEntireLineLength); circleYAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mCircleY = (float) animation.getAnimatedValue(); invalidate(); } }); animList.add(circleYAnim); AnimatorSet animationSet = new AnimatorSet(); animationSet.setDuration(mDuration); animationSet.playTogether(animList); animationSet.setInterpolator(new LinearInterpolator()); animationSet.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { Log.d("@=>", "動畫3結束"); if (mStatus == STATUS_LOADING) { mStep++; startLCAnim(); } } }); animationSet.start(); mAnimList.add(animationSet); } ... @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (mStep % 4) { ... case 2: for (int i = 0; i < mColors.length; i++) { mPaint.setColor(mColors[i]); drawCRCC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mCircleY, mPaint, mCanvasAngle + i * 90); } break; ... } } ... private void drawCRCC(Canvas canvas, float x, float y, @NonNull Paint paint, int rotate) { canvas.rotate(rotate, mWidth / 2, mHeight / 2); canvas.drawCircle(x, y, mCircleRadius, paint); canvas.rotate(-rotate, mWidth / 2, mHeight / 2); }
動畫3做了兩件事:
1、旋轉Canvas
2、變化Circle的Y坐標,達到往里縮的效果
四、線條變化動畫(Line Change)
/** * Animation4 * 動畫4 * Line Change * 線條變化動畫 */ private void startLCAnim() { ValueAnimator lineWidthAnim = ValueAnimator.ofFloat(mEntireLineLength, -mEntireLineLength); lineWidthAnim.setDuration(mDuration); lineWidthAnim.setInterpolator(new LinearInterpolator()); lineWidthAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { mLineLength = (float) animation.getAnimatedValue(); invalidate(); } }); lineWidthAnim.addListener(new AnimatorListener() { @Override public void onAnimationEnd(Animator animation) { Log.d("@=>", "動畫4結束"); if (mStatus == STATUS_LOADING) { mStep++; startCRLCAnim(); } } }); lineWidthAnim.start(); mAnimList.add(lineWidthAnim); } ... @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); switch (mStep % 4) { ... case 3: for (int i = 0; i < mColors.length; i++) { mPaint.setColor(mColors[i]); drawLC(canvas, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mEntireLineLength, mWidth / 2 - mEntireLineLength / 2.2f, mHeight / 2 + mLineLength, mPaint, mCanvasAngle + i * 90); } break; } } ... private void drawLC(Canvas canvas, float startX, float startY, float stopX, float stopY, @NonNull Paint paint, int rotate) { canvas.rotate(rotate, mWidth / 2, mHeight / 2); canvas.drawArc(new RectF(startX - mCircleRadius, startY - mCircleRadius, startX + mCircleRadius, startY + mCircleRadius), 0, 180, true, mPaint); canvas.drawLine(startX, startY, stopX, stopY, paint); canvas.drawArc(new RectF(stopX - mCircleRadius, stopY - mCircleRadius, stopX + mCircleRadius, stopY + mCircleRadius), 180, 180, true, mPaint); canvas.rotate(-rotate, mWidth / 2, mHeight / 2); }
動畫4只做了線條的變化。
這樣整個Slack的Loading動畫就完成了,是不是很簡單。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android多國語言轉換Excel及Excel轉換為string詳解
這篇文章主要給大家介紹了關于Android多國語言轉換Excel以及Excel轉換為string的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面來一起看看吧2019-01-01Android源碼中final關鍵字的用法及final,finally,finalize的區(qū)別
Android的源碼中很多地方對final關鍵字的用法很是“別出心裁”,之所以這么說是因為我從沒看過是這么使用final關鍵字的,通過本文給大家分享Android源碼中final關鍵字的用法及final,finally,finalize的區(qū)別,感興趣的朋友一起學習吧2015-12-12修改Android FloatingActionButton的title的文字顏色及背景顏色實例詳解
這篇文章主要介紹了修改Android FloatingActionButton的title的文字顏色及背景顏色實例詳解的相關資料,需要的朋友可以參考下2017-03-03Android編程開發(fā)實現帶進度條和百分比的多線程下載
這篇文章主要介紹了Android編程開發(fā)實現帶進度條和百分比的多線程下載,總結了前面關于Java多線程下載的技巧,實例分析了Android實現帶百分比和進度條的多線程下載技巧,需要的朋友可以參考下2015-12-12Android RichText 讓Textview輕松的支持富文本(圖像ImageSpan、點擊效果等等類似QQ微信聊
AndroidRichText幫助實現像QQ,微信一樣的,一個TextView里既有文字又有表情又有圖片的效果,采用插件化的框架,代碼簡單,可拓展性強2016-01-01利用Warensoft Stock Service編寫高頻交易軟件
本文主要介紹了利用Warensoft Stock Service編寫高頻交易軟件的方法步驟,具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01Kotlin協(xié)程開發(fā)之Flow的融合與Channel容量及溢出策略介紹
這篇文章主要介紹了Kotlin協(xié)程:Flow的融合、Channel容量、溢出策略,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-09-09