Android仿instagram頭像點擊加載動畫
既然這個動畫效果這么火，那還不趕快把我實現(xiàn)分享出來
1、介紹
2、使用
Step 1
dependencies {compile 'com.qintong:insLoadingAnimation:1.0.1'}
Step 2
android:layout_centerInParent="true"android:id="@+id/loading_view"android:layout_width="wrap_content"android:layout_height="wrap_content"android:src="@mipmap/pink"/>
Step 3
設(shè)置狀態(tài)：
LOADING: 表示InsLoadingView被點擊之后正在加載內(nèi)容(未加載完畢之前)，該狀態(tài)下動畫正在執(zhí)行。
UNCLICKED: 該InsLoadingView被點擊之前的狀態(tài)，此狀態(tài)下動畫停止。
CLICKED: 表示InsLoadingView被點擊和加載過，此狀態(tài)下動畫停止切圓圈的顏色為灰色。
默認的狀態(tài)是LOADING。
xml:
app:status="loading" //or "clicked",or "clicked" mInsLoadingView.setStatus(InsLoadingView.Status.LOADING); //Or InsLoadingView.Status.CLICKED, InsLoadingView.Status.UNCLICKED設(shè)置顏色
可以按如下代碼設(shè)置：
app:start_color="#FFF700C2" //or your colorapp:end_color="#FFFFD900" //or your color
mInsLoadingView.setStartColor(Color.YELLOW); //or your colormInsLoadingView.setEndColor(Color.BLUE); //or your color
設(shè)置速度
app:circle_duration="2000"app:rotate_duration="10000"
mInsLoadingView.setCircleDuration(2000);mInsLoadingView.setRotateDuration(10000);
2、實現(xiàn)
@Overrideprotected void onDraw(Canvas canvas) {canvas.scale(mScale, mScale, centerX(), centerY());drawBitmap(canvas);Paint paint = getPaint(getColor(0), getColor(360), 360);switch (mStatus) {case LOADING:drawTrack(canvas, paint);break;case UNCLICKED:drawCircle(canvas, paint);break;case CLICKED:drawClickedircle(canvas);break;}}
(1) 動畫繪制:
degress和cricleWidth是實時變化的，他們的值由ValueAnimator設(shè)置，這兩個值分別表示整個動畫整體旋轉(zhuǎn)的角度（也就是動畫中轉(zhuǎn)速較慢一端）和轉(zhuǎn)速較快的圓弧的動畫。兩個變量的單位都是度degress范圍為0-360，cricleWidth范圍為-360到360。cricleWidth圓弧向回“收縮”和向外“伸展”的過程,分別對應(yīng)代碼中的a和b過程,對應(yīng)的circleWidth范圍為-360—0度和0—360度。
在a過程中，cricleWidth + 360換算得到成正的adjustCricleWidth，adjustCricleWidth到360度繪制一個扇形圓弧，adjustCricleWidth到0度，依次向后每隔12度畫小的扇形圓弧，圓弧的寬度遞減。
b過程中：從0到cricleWidth：最前端繪制4個小扇形圓弧，其后到0度繪制一個長圓弧。從360度到cricleWidth，每間隔12度依次繪制小圓弧，其寬度遞減。
private void drawTrack(Canvas canvas, Paint paint) {canvas.rotate(degress, centerX(), centerY());canvas.rotate(ARC_WIDTH, centerX(), centerY());RectF rectF = new RectF(getWidth() * (1 - circleDia), getWidth() * (1 - circleDia),getWidth() * circleDia, getHeight() * circleDia);if (DEBUG) {Log.d(TAG, "cricleWidth:" + cricleWidth);}if (cricleWidth < 0) {//afloat startArg = cricleWidth + 360;canvas.drawArc(rectF, startArg, 360 - startArg, false, paint);float adjustCricleWidth = cricleWidth + 360;float width = 8;while (adjustCricleWidth > ARC_WIDTH) {width = width - arcChangeAngle;adjustCricleWidth = adjustCricleWidth - ARC_WIDTH;canvas.drawArc(rectF, adjustCricleWidth, width, false, paint);}} else {//bfor (int i = 0; i <= 4; i++) {if (ARC_WIDTH * i > cricleWidth) {break;}canvas.drawArc(rectF, cricleWidth - ARC_WIDTH * i, 8 + i, false, paint);}if (cricleWidth > ARC_WIDTH * 4) {canvas.drawArc(rectF, 0, cricleWidth - ARC_WIDTH * 4, false, paint);}float adjustCricleWidth = 360;float width = 8 * (360 - cricleWidth) / 360;if (DEBUG) {Log.d(TAG, "width:" + width);}while (width > 0 && adjustCricleWidth > ARC_WIDTH) {width = width - arcChangeAngle;adjustCricleWidth = adjustCricleWidth - ARC_WIDTH;canvas.drawArc(rectF, adjustCricleWidth, width, false, paint);}}}
(2) 點擊View收縮效果：
canvas.scale(mScale, mScale, centerX(), centerY());這里值得注意的是，在重寫onTouchEvent()時候，有兩點要注意：
@Overridepublic boolean onTouchEvent(MotionEvent event) {boolean result = false;if (DEBUG) {Log.d(TAG, "onTouchEvent: " + event.getAction());}switch (event.getAction()) {case MotionEvent.ACTION_DOWN: {startDownAnim();result = true;break;}case MotionEvent.ACTION_UP: {startUpAnim();break;}case MotionEvent.ACTION_CANCEL: {startUpAnim();break;}}return super.onTouchEvent(event) || result;}private void startDownAnim() {mTouchAnim.setFloatValues(mScale, 0.9f);mTouchAnim.start();}private void startUpAnim() {mTouchAnim.setFloatValues(mScale, 1);mTouchAnim.start();}
(3) ValueAnimator：
private void onCreateAnimators() {mRotateAnim = ValueAnimator.ofFloat(0, 180, 360);mRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {degress = (float) animation.getAnimatedValue();postInvalidate();}});mRotateAnim.setInterpolator(new LinearInterpolator());mRotateAnim.setDuration(mRotateDuration);mRotateAnim.setRepeatCount(-1);mCircleAnim = ValueAnimator.ofFloat(0, 360);mCircleAnim.setInterpolator(new DecelerateInterpolator());mCircleAnim.setDuration(mCircleDuration);mCircleAnim.setRepeatCount(-1);mCircleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {if (isFirstCircle) {cricleWidth = (float) animation.getAnimatedValue();} else {cricleWidth = (float) animation.getAnimatedValue() - 360;}postInvalidate();}});mCircleAnim.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {isFirstCircle = !isFirstCircle;}});mTouchAnim = new ValueAnimator();mTouchAnim.setInterpolator(new DecelerateInterpolator());mTouchAnim.setDuration(200);mTouchAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {mScale = (float) animation.getAnimatedValue();postInvalidate();}});startAnim();}
(4) 繪制圓形圖片：
private void drawBitmap(Canvas canvas) {Paint bitmapPaint = new Paint();setBitmapShader(bitmapPaint);RectF rectF = new RectF(getWidth() * (1 - bitmapDia), getWidth() * (1 - bitmapDia),getWidth() * bitmapDia, getHeight() * bitmapDia);canvas.drawOval(rectF, bitmapPaint);}private void setBitmapShader(Paint paint) {Drawable drawable = getDrawable();Matrix matrix = new Matrix();if (null == drawable) {return;}Bitmap bitmap = drawableToBitmap(drawable);BitmapShader tshader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);float scale = 1.0f;int bSize = Math.min(bitmap.getWidth(), bitmap.getHeight());scale = getWidth() * 1.0f / bSize;matrix.setScale(scale, scale);if (bitmap.getWidth() > bitmap.getHeight()) {matrix.postTranslate(-(bitmap.getWidth() * scale - getWidth()) / 2, 0);} else {matrix.postTranslate(0, -(bitmap.getHeight() * scale - getHeight()) / 2);}tshader.setLocalMatrix(matrix);paint.setShader(tshader);}private Bitmap drawableToBitmap(Drawable drawable) {if (drawable instanceof BitmapDrawable) {BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;return bitmapDrawable.getBitmap();}int w = drawable.getIntrinsicWidth();int h = drawable.getIntrinsicHeight();Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);drawable.setBounds(0, 0, w, h);drawable.draw(canvas);return bitmap;}
(5) 顏色：
Paint paint = getPaint(mStartColor, mEndColor, 360);private Paint getPaint(int startColor, int endColor, double arcWidth) {Paint paint = new Paint();Shader shader = new LinearGradient(0f, 0f, (float) (getWidth() * circleDia * (arcWidth - ARC_WIDTH * 4) / 360),getHeight() * strokeWidth, startColor, endColor, CLAMP);paint.setShader(shader);setPaintStroke(paint);return paint;}
(6) 重寫onMeasure()：
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);final int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);final int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);final int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);if (DEBUG) {Log.d(TAG, "onMeasure widthMeasureSpec:" + widthSpecMode + "--" + widthSpecSize);Log.d(TAG, "onMeasure heightMeasureSpec:" + heightSpecMode + "--" + heightSpecSize);}int width;if (widthSpecMode == MeasureSpec.EXACTLY && heightSpecMode == MeasureSpec.EXACTLY) {width = Math.min(widthSpecSize, heightSpecSize);} else {width = Math.min(widthSpecSize, heightSpecSize);width = Math.min(width, 300);}setMeasuredDimension(width, width);}
總結(jié)
源碼地址：
評論
圖片
表情