Android特效专辑(五)——自定义圆形头像和仿MIUI卸载动画—粒子爆炸

好的，各位亲爱的朋友，今天讲的特效还是比较炫的，首先，我们会讲一个自定义圆形的imageView，接着，我们会来实现粒子爆炸的特效，按照国际惯例，无图无真相的没这个效果也是模仿大神的，现在应用在了我的《Only》上

截图

  1.       好的，我们新建一个工程——AnimView，我们要用到的图片
  2.

一.自定义圆形头像——

  1.       直接开写了，要实现的东西都在注释上了
  2.

1.编写自定义属性attr.xml

  1.       <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  4.     <declare-styleable name="roundedimageview">
  6.         <attr name="border_thickness" format="dimension" />
  8.         <attr name="border_inside_color" format="color" />
  10.         <attr name="border_outside_color" format="color"></attr>
  12.     </declare-styleable>
  13. </resources>
  14.

2.自定义View

  1.       紧接着我们就可以编写这个类了
  2.     
  1.       package com.lgl.animview;
  3. /**
  4.  * 圆形头像
  5.  * Created by LGL on 2016/1/12.
  6.  */
  8. import android.content.Context;
  9. import android.content.res.TypedArray;
  10. import android.graphics.Bitmap;
  11. import android.graphics.Canvas;
  12. import android.graphics.Paint;
  13. import android.graphics.PorterDuff;
  14. import android.graphics.PorterDuffXfermode;
  15. import android.graphics.Rect;
  16. import android.graphics.drawable.BitmapDrawable;
  17. import android.graphics.drawable.Drawable;
  18. import android.graphics.drawable.NinePatchDrawable;
  19. import android.util.AttributeSet;
  20. import android.widget.ImageView;
  22. /**
  23.  * 圆形ImageView，可设置最多两个宽度不同且颜色不同的圆形边框。 设置颜色在xml布局文件中由自定义属性配置参数指定
  24.  */
  26. public class RoundImageView extends ImageView {
  28.     private int mBorderThickness = 0;
  30.     private Context mContext;
  32.     private int defaultColor = 0xFFFFFFFF;
  34.     // 如果只有其中一个有值，则只画一个圆形边框
  36.     private int mBorderOutsideColor = 0;
  38.     private int mBorderInsideColor = 0;
  40.     // 控件默认长、宽
  42.     private int defaultWidth = 0;
  44.     private int defaultHeight = 0;
  46.     public RoundImageView(Context context) {
  48.         super(context);
  50.         mContext = context;
  52.     }
  54.     public RoundImageView(Context context, AttributeSet attrs) {
  56.         super(context, attrs);
  58.         mContext = context;
  60.         setCustomAttributes(attrs);
  62.     }
  64.     public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
  66.         super(context, attrs, defStyle);
  68.         mContext = context;
  70.         setCustomAttributes(attrs);
  72.     }
  74.     private void setCustomAttributes(AttributeSet attrs) {
  76.         // 获取自定义的属性
  77.         TypedArray a = mContext.obtainStyledAttributes(attrs,
  78.                 R.styleable.roundedimageview);
  80.         mBorderThickness = a.getDimensionPixelSize(
  81.                 R.styleable.roundedimageview_border_thickness, 0);
  83.         mBorderOutsideColor = a
  84.                 .getColor(R.styleable.roundedimageview_border_outside_color,
  85.                         defaultColor);
  87.         mBorderInsideColor = a.getColor(
  88.                 R.styleable.roundedimageview_border_inside_color, defaultColor);
  90.     }
  92.     @Override
  93.     protected void onDraw(Canvas canvas) {
  95.         Drawable drawable = getDrawable();
  97.         if (drawable == null) {
  99.             return;
  101.         }
  103.         if (getWidth() == 0 || getHeight() == 0) {
  105.             return;
  107.         }
  109.         this.measure(0, 0);
  111.         if (drawable.getClass() == NinePatchDrawable.class)
  113.             return;
  115.         Bitmap b = ((BitmapDrawable) drawable).getBitmap();
  117.         Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
  119.         if (defaultWidth == 0) {
  121.             defaultWidth = getWidth();
  123.         }
  125.         if (defaultHeight == 0) {
  127.             defaultHeight = getHeight();
  129.         }
  131.         int radius = 0;
  133.         if (mBorderInsideColor != defaultColor
  134.                 && mBorderOutsideColor != defaultColor) {// 定义画两个边框，分别为外圆边框和内圆边框
  136.             radius = (defaultWidth < defaultHeight ? defaultWidth
  137.                     : defaultHeight) / 2 - 2 * mBorderThickness;
  139.             // 画内圆
  141.             drawCircleBorder(canvas, radius + mBorderThickness / 2,
  142.                     mBorderInsideColor);
  144.             // 画外圆
  146.             drawCircleBorder(canvas, radius + mBorderThickness
  147.                     + mBorderThickness / 2, mBorderOutsideColor);
  149.         } else if (mBorderInsideColor != defaultColor
  150.                 && mBorderOutsideColor == defaultColor) {// 定义画一个边框
  152.             radius = (defaultWidth < defaultHeight ? defaultWidth
  153.                     : defaultHeight) / 2 - mBorderThickness;
  155.             drawCircleBorder(canvas, radius + mBorderThickness / 2,
  156.                     mBorderInsideColor);
  158.         } else if (mBorderInsideColor == defaultColor
  159.                 && mBorderOutsideColor != defaultColor) {// 定义画一个边框
  161.             radius = (defaultWidth < defaultHeight ? defaultWidth
  162.                     : defaultHeight) / 2 - mBorderThickness;
  164.             drawCircleBorder(canvas, radius + mBorderThickness / 2,
  165.                     mBorderOutsideColor);
  167.         } else {// 没有边框
  169.             radius = (defaultWidth < defaultHeight ? defaultWidth
  170.                     : defaultHeight) / 2;
  172.         }
  174.         Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
  176.         canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight
  177.                 / 2 - radius, null);
  179.     }
  181.     /**
  182.      * 获取裁剪后的圆形图片
  183.      */
  185.     public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
  187.         Bitmap scaledSrcBmp;
  189.         int diameter = radius * 2;
  191.         // 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片
  193.         int bmpWidth = bmp.getWidth();
  195.         int bmpHeight = bmp.getHeight();
  197.         int squareWidth = 0, squareHeight = 0;
  199.         int x = 0, y = 0;
  201.         Bitmap squareBitmap;
  203.         if (bmpHeight > bmpWidth) {// 高大于宽
  205.             squareWidth = squareHeight = bmpWidth;
  207.             x = 0;
  209.             y = (bmpHeight - bmpWidth) / 2;
  211.             // 截取正方形图片
  213.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
  214.                     squareHeight);
  216.         } else if (bmpHeight < bmpWidth) {// 宽大于高
  218.             squareWidth = squareHeight = bmpHeight;
  220.             x = (bmpWidth - bmpHeight) / 2;
  222.             y = 0;
  224.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
  225.                     squareHeight);
  227.         } else {
  229.             squareBitmap = bmp;
  231.         }
  233.         if (squareBitmap.getWidth() != diameter
  234.                 || squareBitmap.getHeight() != diameter) {
  236.             scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,
  237.                     diameter, true);
  239.         } else {
  241.             scaledSrcBmp = squareBitmap;
  243.         }
  245.         Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),
  247.         scaledSrcBmp.getHeight(),
  249.         Bitmap.Config.ARGB_8888);
  251.         Canvas canvas = new Canvas(output);
  253.         Paint paint = new Paint();
  255.         Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),
  256.                 scaledSrcBmp.getHeight());
  258.         paint.setAntiAlias(true);
  260.         paint.setFilterBitmap(true);
  262.         paint.setDither(true);
  264.         canvas.drawARGB(0, 0, 0, 0);
  266.         canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
  268.         scaledSrcBmp.getHeight() / 2,
  270.         scaledSrcBmp.getWidth() / 2,
  272.         paint);
  274.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  276.         canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
  278.         bmp = null;
  280.         squareBitmap = null;
  282.         scaledSrcBmp = null;
  284.         return output;
  286.     }
  288.     /**
  289.      * 边缘画圆
  290.      */
  292.     private void drawCircleBorder(Canvas canvas, int radius, int color) {
  294.         Paint paint = new Paint();
  296.         /* 去锯齿 */
  298.         paint.setAntiAlias(true);
  300.         paint.setFilterBitmap(true);
  302.         paint.setDither(true);
  304.         paint.setColor(color);
  306.         /* 设置paint的　style　为STROKE：空心 */
  308.         paint.setStyle(Paint.Style.STROKE);
  310.         /* 设置paint的外框宽度 */
  312.         paint.setStrokeWidth(mBorderThickness);
  314.         canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);
  316.     }
  318. }
  319.

3.引用

  1.       引用起来就比较简单了，我们首先来引入他的命名空间
  2.     
  1.        xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
  2.     
  1.       然后我们直接写xml
  2.     
  1.         <com.lgl.animview.RoundImageView
  2.         android:id="@+id/iv_round"
  3.         android:layout_width="wrap_content"
  4.         android:layout_height="wrap_content"
  5.         android:src="@drawable/photo"
  6.         imagecontrol:border_inside_color="#bc0978"
  7.         imagecontrol:border_outside_color="#ba3456"
  8.         imagecontrol:border_thickness="1dp" />
  9.     
  1.       好的，让我们运行下吧
  2.

二.MUI卸载动画——粒子爆炸

  1.       关于这个粒子特效，在开篇的时候已经展示了效果，那么我们接下来，要怎么做尼？
  2.

1.ParticleUtils

  1.       用于粒子动画的单位转换
  2.     
  1.       package com.lgl.animview;
  3. import android.content.res.Resources;
  5. /**
  6.  * 粒子动画
  7.  */
  8. public class ParticleUtils {
  9.     /**
  10.      * 密度
  11.      */
  12.     public static final float DENSITY = Resources.getSystem().getDisplayMetrics().density;
  14.     public static int dp2px(int dp) {
  15.         return Math.round(dp * DENSITY);
  16.     }
  17. }
  18.

2.Particle

  1.       用于爆破效果的分子计算
  2.     
  1.       package com.lgl.animview;
  3. import java.util.Random;
  5. import android.graphics.Point;
  6. import android.graphics.Rect;
  8. /**
  9.  * Created by lgl on 16/01/14. 爆破粒子
  10.  */
  11. public class Particle {
  13.     public static final int PART_WH = 8; // 默认小球宽高
  15.     // 原本的值（不可变）
  16.     // float originCX;
  17.     // float originCY;
  18.     // float originRadius;
  20.     // 实际的值（可变）
  21.     float cx; // center x of circle
  22.     float cy; // center y of circle
  23.     float radius;
  25.     int color;
  26.     float alpha;
  28.     static Random random = new Random();
  30.     Rect mBound;
  32.     public static Particle generateParticle(int color, Rect bound, Point point) {
  33.         int row = point.y; // 行是高
  34.         int column = point.x; // 列是宽
  36.         Particle particle = new Particle();
  37.         particle.mBound = bound;
  38.         particle.color = color;
  39.         particle.alpha = 1f;
  41.         particle.radius = PART_WH;
  42.         particle.cx = bound.left + PART_WH * column;
  43.         particle.cy = bound.top + PART_WH * row;
  45.         return particle;
  46.     }
  48.     public void advance(float factor) {
  49.         cx = cx + factor * random.nextInt(mBound.width())
  50.                 * (random.nextFloat() - 0.5f);
  51.         cy = cy + factor * random.nextInt(mBound.height() / 2);
  53.         radius = radius - factor * random.nextInt(2);
  55.         alpha = (1f - factor) * (1 + random.nextFloat());
  56.     }
  57. }
  58.

3.ExplosionAnimator

  1.       属性动画，用于动画展示
  2.     
  1.       package com.lgl.animview;
  3. import android.animation.ValueAnimator;
  4. import android.graphics.Bitmap;
  5. import android.graphics.Canvas;
  6. import android.graphics.Color;
  7. import android.graphics.Paint;
  8. import android.graphics.Point;
  9. import android.graphics.Rect;
  10. import android.view.View;
  12. /**
  13.  * Created by lgl on 16/01/14.
  14.  */
  15. public class ExplosionAnimator extends ValueAnimator {
  16.     public static final int DEFAULT_DURATION = 1500;
  17.     private Particle[][] mParticles;
  18.     private Paint mPaint;
  19.     private View mContainer;
  21.     public ExplosionAnimator(View view, Bitmap bitmap, Rect bound) {
  23.         mPaint = new Paint();
  24.         mContainer = view;
  26.         setFloatValues(0.0f, 1.0f);
  27.         setDuration(DEFAULT_DURATION);
  29.         mParticles = generateParticles(bitmap, bound);
  30.     }
  32.     private Particle[][] generateParticles(Bitmap bitmap, Rect bound) {
  33.         int w = bound.width();
  34.         int h = bound.height();
  36.         int partW_Count = w / Particle.PART_WH; // 横向个数
  37.         int partH_Count = h / Particle.PART_WH; // 竖向个数
  39.         int bitmap_part_w = bitmap.getWidth() / partW_Count;
  40.         int bitmap_part_h = bitmap.getHeight() / partH_Count;
  42.         Particle[][] particles = new Particle[partH_Count][partW_Count];
  43.         Point point = null;
  44.         for (int row = 0; row < partH_Count; row++) { // 行
  45.             for (int column = 0; column < partW_Count; column++) { // 列
  46.                 // 取得当前粒子所在位置的颜色
  47.                 int color = bitmap.getPixel(column * bitmap_part_w, row
  48.                         * bitmap_part_h);
  50.                 point = new Point(column, row); // x是列，y是行
  52.                 particles[row][column] = Particle.generateParticle(color,
  53.                         bound, point);
  54.             }
  55.         }
  57.         return particles;
  58.     }
  60.     public void draw(Canvas canvas) {
  61.         if (!isStarted()) { // 动画结束时停止
  62.             return;
  63.         }
  64.         for (Particle[] particle : mParticles) {
  65.             for (Particle p : particle) {
  66.                 p.advance((Float) getAnimatedValue());
  67.                 mPaint.setColor(p.color);
  68.                 // mPaint.setAlpha((int) (255 * p.alpha)); //只是这样设置，透明色会显示为黑色
  69.                 mPaint.setAlpha((int) (Color.alpha(p.color) * p.alpha)); // 这样透明颜色就不是黑色了
  70.                 canvas.drawCircle(p.cx, p.cy, p.radius, mPaint);
  71.             }
  72.         }
  74.         mContainer.invalidate();
  75.     }
  77.     @Override
  78.     public void start() {
  79.         super.start();
  80.         mContainer.invalidate();
  81.     }
  82. }
  83.

4.ExplosionField

  1.       开始执行这个实例的动画了
  2.     
  1.       package com.lgl.animview;
  3. import java.util.ArrayList;
  5. import android.animation.Animator;
  6. import android.animation.AnimatorListenerAdapter;
  7. import android.app.Activity;
  8. import android.content.Context;
  9. import android.graphics.Bitmap;
  10. import android.graphics.Canvas;
  11. import android.graphics.Rect;
  12. import android.util.AttributeSet;
  13. import android.view.View;
  14. import android.view.ViewGroup;
  15. import android.view.Window;
  17. /**
  18.  * Created by lgl on 16/01/14.
  19.  */
  20. public class ExplosionField extends View {
  21.     private static final String TAG = "ExplosionField";
  22.     private static final Canvas mCanvas = new Canvas();
  23.     private ArrayList<ExplosionAnimator> explosionAnimators;
  24.     private OnClickListener onClickListener;
  26.     public ExplosionField(Context context) {
  27.         super(context);
  28.         init();
  29.     }
  31.     public ExplosionField(Context context, AttributeSet attrs) {
  32.         super(context, attrs);
  33.         init();
  34.     }
  36.     private void init() {
  37.         explosionAnimators = new ArrayList<ExplosionAnimator>();
  39.         attach2Activity((Activity) getContext());
  40.     }
  42.     @Override
  43.     protected void onDraw(Canvas canvas) {
  44.         super.onDraw(canvas);
  45.         for (ExplosionAnimator animator : explosionAnimators) {
  46.             animator.draw(canvas);
  47.         }
  48.     }
  50.     /**
  51.      * 爆破
  52.      *
  53.      * @param view
  54.      *            使得该view爆破
  55.      */
  56.     public void explode(final View view) {
  57.         Rect rect = new Rect();
  58.         view.getGlobalVisibleRect(rect); // 得到view相对于整个屏幕的坐标
  59.         rect.offset(0, -ParticleUtils.dp2px(25)); // 去掉状态栏高度
  61.         final ExplosionAnimator animator = new ExplosionAnimator(this,
  62.                 createBitmapFromView(view), rect);
  63.         explosionAnimators.add(animator);
  65.         animator.addListener(new AnimatorListenerAdapter() {
  66.             @Override
  67.             public void onAnimationStart(Animator animation) {
  68.                 view.animate().alpha(0f).setDuration(150).start();
  69.             }
  71.             @Override
  72.             public void onAnimationEnd(Animator animation) {
  73.                 view.animate().alpha(1f).setDuration(150).start();
  75.                 // 动画结束时从动画集中移除
  76.                 explosionAnimators.remove(animation);
  77.                 animation = null;
  78.             }
  79.         });
  80.         animator.start();
  81.     }
  83.     private Bitmap createBitmapFromView(View view) {
  84.         /*
  85.          * 为什么屏蔽以下代码段？ 如果ImageView直接得到位图，那么当它设置背景（backgroud)时，不会读取到背景颜色
  86.          */
  87.         // if (view instanceof ImageView) {
  88.         // Drawable drawable = ((ImageView)view).getDrawable();
  89.         // if (drawable != null && drawable instanceof BitmapDrawable) {
  90.         // return ((BitmapDrawable) drawable).getBitmap();
  91.         // }
  92.         // }
  94.         // view.clearFocus(); //不同焦点状态显示的可能不同——（azz:不同就不同有什么关系？）
  96.         Bitmap bitmap = Bitmap.createBitmap(view.getWidth(), view.getHeight(),
  97.                 Bitmap.Config.ARGB_8888);
  99.         if (bitmap != null) {
  100.             synchronized (mCanvas) {
  101.                 mCanvas.setBitmap(bitmap);
  102.                 view.draw(mCanvas);
  103.                 mCanvas.setBitmap(null); // 清除引用
  104.             }
  105.         }
  106.         return bitmap;
  107.     }
  109.     /**
  110.      * 给Activity加上全屏覆盖的ExplosionField
  111.      */
  112.     private void attach2Activity(Activity activity) {
  113.         ViewGroup rootView = (ViewGroup) activity
  114.                 .findViewById(Window.ID_ANDROID_CONTENT);
  116.         ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(
  117.                 ViewGroup.LayoutParams.MATCH_PARENT,
  118.                 ViewGroup.LayoutParams.MATCH_PARENT);
  119.         rootView.addView(this, lp);
  120.     }
  122.     /**
  123.      * 希望谁有破碎效果，就给谁加Listener
  124.      *
  125.      * @param view
  126.      *            可以是ViewGroup
  127.      */
  128.     public void addListener(View view) {
  129.         if (view instanceof ViewGroup) {
  130.             ViewGroup viewGroup = (ViewGroup) view;
  131.             int count = viewGroup.getChildCount();
  132.             for (int i = 0; i < count; i++) {
  133.                 addListener(viewGroup.getChildAt(i));
  134.             }
  135.         } else {
  136.             view.setClickable(true);
  137.             view.setOnClickListener(getOnClickListener());
  138.         }
  139.     }
  141.     private OnClickListener getOnClickListener() {
  142.         if (null == onClickListener) {
  144.             onClickListener = new OnClickListener() {
  145.                 @Override
  146.                 public void onClick(View v) {
  147.                     ExplosionField.this.explode(v);
  149.                     // view.setOnClickListener(null); // 用过一次就不需要了
  150.                 }
  151.             };
  152.         }
  154.         return onClickListener;
  155.     }
  156. }
  157.

5.MainActivity

  1.       好的，一切准备好了之后我们就可以使用了
  2.     
  1.       package com.lgl.animview;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  6. public class MainActivity extends Activity {
  8.     // 实例化粒子动画
  9.     private ExplosionField explosionField;
  11.     @Override
  12.     protected void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         setContentView(R.layout.activity_main);
  16.         explosionField = new ExplosionField(this);
  17.         // 绑定哪个控件哪个控件就有效果，如果需要整个layout，只要绑定根布局的id即可
  18.         explosionField.addListener(findViewById(R.id.iv_round));
  19.     }
  20. }
  21.     
  1.       在xml中我们什么也不用做，好的，让我们来运行一下
  2.     
  1.       好的，本篇博客也到此结束了，喜欢的点个赞
  2.

Demo下载：http://download.csdn.net/detail/qq_26787115/9409139