Android特效专辑（十二）——仿支付宝咻一咻功能实现波纹扩散特效，精细小巧的View

先来看看这个效果

Android特效专辑（十二）——仿支付宝咻一咻功能实现波纹扩散特效，精细小巧的View - 图1

这是我的在Only上添加的效果，说实话，Only现在都还只是半成品，台面都上不了，怪自己技术不行，也太懒了
PS：这个view也是我模仿了人家的效果，参考了人家的思路写的，不是纯手撸，罪过罪过，网上应该也能找到很多这样的效果，我只是加入了一些自己的需求在里面

我么新建一个工程——Whew

RoundImageView

这个之前讲过，网上 的粒子，把头像变成圆形的，这里就不多说了，直接撸代码吧！

  1.       package com.lgl.whew;
  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，可设置最多两个宽度不同且颜色不同的圆形边框。
  24.  *
  25.  * 设置颜色在xml布局文件中由自定义属性配置参数指定
  26.  */
  28. public class RoundImageView extends ImageView {
  30.     private int mBorderThickness = 0;
  32.     private Context mContext;
  34.     private int defaultColor = 0xFFFFFFFF;
  36.     // 如果只有其中一个有值，则只画一个圆形边框
  38.     private int mBorderOutsideColor = 0;
  40.     private int mBorderInsideColor = 0;
  42.     // 控件默认长、宽
  44.     private int defaultWidth = 0;
  46.     private int defaultHeight = 0;
  48.     public RoundImageView(Context context) {
  50.         super(context);
  52.         mContext = context;
  54.     }
  56.     public RoundImageView(Context context, AttributeSet attrs) {
  58.         super(context, attrs);
  60.         mContext = context;
  62.         setCustomAttributes(attrs);
  64.     }
  66.     public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
  68.         super(context, attrs, defStyle);
  70.         mContext = context;
  72.         setCustomAttributes(attrs);
  74.     }
  76.     private void setCustomAttributes(AttributeSet attrs) {
  78.         TypedArray a = mContext.obtainStyledAttributes(attrs,
  79.                 R.styleable.roundedimageview);
  81.         mBorderThickness = a.getDimensionPixelSize(
  82.                 R.styleable.roundedimageview_border_thickness, 0);
  84.         mBorderOutsideColor = a
  85.                 .getColor(R.styleable.roundedimageview_border_outside_color,
  86.                         defaultColor);
  88.         mBorderInsideColor = a.getColor(
  89.                 R.styleable.roundedimageview_border_inside_color, defaultColor);
  91.     }
  93.     @Override
  94.     protected void onDraw(Canvas canvas) {
  96.         Drawable drawable = getDrawable();
  98.         if (drawable == null) {
  100.             return;
  102.         }
  104.         if (getWidth() == 0 || getHeight() == 0) {
  106.             return;
  108.         }
  110.         this.measure(0, 0);
  112.         if (drawable.getClass() == NinePatchDrawable.class)
  114.             return;
  116.         Bitmap b = ((BitmapDrawable) drawable).getBitmap();
  118.         Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
  120.         if (defaultWidth == 0) {
  122.             defaultWidth = getWidth();
  124.         }
  126.         if (defaultHeight == 0) {
  128.             defaultHeight = getHeight();
  130.         }
  132.         int radius = 0;
  134.         if (mBorderInsideColor != defaultColor
  135.                 && mBorderOutsideColor != defaultColor) {// 定义画两个边框，分别为外圆边框和内圆边框
  137.             radius = (defaultWidth < defaultHeight ? defaultWidth
  138.                     : defaultHeight) / 2 - 2 * mBorderThickness;
  140.             // 画内圆
  142.             drawCircleBorder(canvas, radius + mBorderThickness / 2,
  143.                     mBorderInsideColor);
  145.             // 画外圆
  147.             drawCircleBorder(canvas, radius + mBorderThickness
  148.                     + mBorderThickness / 2, mBorderOutsideColor);
  150.         } else if (mBorderInsideColor != defaultColor
  151.                 && mBorderOutsideColor == defaultColor) {// 定义画一个边框
  153.             radius = (defaultWidth < defaultHeight ? defaultWidth
  154.                     : defaultHeight) / 2 - mBorderThickness;
  156.             drawCircleBorder(canvas, radius + mBorderThickness / 2,
  157.                     mBorderInsideColor);
  159.         } else if (mBorderInsideColor == defaultColor
  160.                 && mBorderOutsideColor != defaultColor) {// 定义画一个边框
  162.             radius = (defaultWidth < defaultHeight ? defaultWidth
  163.                     : defaultHeight) / 2 - mBorderThickness;
  165.             drawCircleBorder(canvas, radius + mBorderThickness / 2,
  166.                     mBorderOutsideColor);
  168.         } else {// 没有边框
  170.             radius = (defaultWidth < defaultHeight ? defaultWidth
  171.                     : defaultHeight) / 2;
  173.         }
  175.         Bitmap roundBitmap = getCroppedRoundBitmap(bitmap, radius);
  177.         canvas.drawBitmap(roundBitmap, defaultWidth / 2 - radius, defaultHeight
  178.                 / 2 - radius, null);
  180.     }
  182.     /**
  183.      * 获取裁剪后的圆形图片
  184.      */
  186.     public Bitmap getCroppedRoundBitmap(Bitmap bmp, int radius) {
  188.         Bitmap scaledSrcBmp;
  190.         int diameter = radius * 2;
  192.         // 为了防止宽高不相等，造成圆形图片变形，因此截取长方形中处于中间位置最大的正方形图片
  194.         int bmpWidth = bmp.getWidth();
  196.         int bmpHeight = bmp.getHeight();
  198.         int squareWidth = 0, squareHeight = 0;
  200.         int x = 0, y = 0;
  202.         Bitmap squareBitmap;
  204.         if (bmpHeight > bmpWidth) {// 高大于宽
  206.             squareWidth = squareHeight = bmpWidth;
  208.             x = 0;
  210.             y = (bmpHeight - bmpWidth) / 2;
  212.             // 截取正方形图片
  214.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
  215.                     squareHeight);
  217.         } else if (bmpHeight < bmpWidth) {// 宽大于高
  219.             squareWidth = squareHeight = bmpHeight;
  221.             x = (bmpWidth - bmpHeight) / 2;
  223.             y = 0;
  225.             squareBitmap = Bitmap.createBitmap(bmp, x, y, squareWidth,
  226.                     squareHeight);
  228.         } else {
  230.             squareBitmap = bmp;
  232.         }
  234.         if (squareBitmap.getWidth() != diameter
  235.                 || squareBitmap.getHeight() != diameter) {
  237.             scaledSrcBmp = Bitmap.createScaledBitmap(squareBitmap, diameter,
  238.                     diameter, true);
  240.         } else {
  242.             scaledSrcBmp = squareBitmap;
  244.         }
  246.         Bitmap output = Bitmap.createBitmap(scaledSrcBmp.getWidth(),
  248.         scaledSrcBmp.getHeight(),
  250.         Bitmap.Config.ARGB_8888);
  252.         Canvas canvas = new Canvas(output);
  254.         Paint paint = new Paint();
  256.         Rect rect = new Rect(0, 0, scaledSrcBmp.getWidth(),
  257.                 scaledSrcBmp.getHeight());
  259.         paint.setAntiAlias(true);
  261.         paint.setFilterBitmap(true);
  263.         paint.setDither(true);
  265.         canvas.drawARGB(0, 0, 0, 0);
  267.         canvas.drawCircle(scaledSrcBmp.getWidth() / 2,
  269.         scaledSrcBmp.getHeight() / 2,
  271.         scaledSrcBmp.getWidth() / 2,
  273.         paint);
  275.         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
  277.         canvas.drawBitmap(scaledSrcBmp, rect, rect, paint);
  279.         bmp = null;
  281.         squareBitmap = null;
  283.         scaledSrcBmp = null;
  285.         return output;
  287.     }
  289.     /**
  290.      * 边缘画圆
  291.      */
  293.     private void drawCircleBorder(Canvas canvas, int radius, int color) {
  295.         Paint paint = new Paint();
  297.         /* 去锯齿 */
  299.         paint.setAntiAlias(true);
  301.         paint.setFilterBitmap(true);
  303.         paint.setDither(true);
  305.         paint.setColor(color);
  307.         /* 设置paint的　style　为STROKE：空心 */
  309.         paint.setStyle(Paint.Style.STROKE);
  311.         /* 设置paint的外框宽度 */
  313.         paint.setStrokeWidth(mBorderThickness);
  315.         canvas.drawCircle(defaultWidth / 2, defaultHeight / 2, radius, paint);
  317.     }
  319. }
  320.

这里值得注意的是，要使用这个必须自定义一些属性，我们在values下新建一个attr.xml

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

然后在xml文件中引入命名空间

  1.        xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
  2.

我们直接看layout_mian.xml吧

layout_mian.xml

就一些布局咯

  1.       <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:imagecontrol="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical" >
  8.     <RelativeLayout
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content" >
  12.         <com.lgl.whew.WhewView
  13.             android:id="@+id/wv"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="match_parent" />
  17.         <com.lgl.whew.RoundImageView
  18.             android:id="@+id/my_photo"
  19.             android:layout_width="100dp"
  20.             android:layout_height="100dp"
  21.             android:layout_centerInParent="true"
  22.             android:src="@drawable/myphoto"
  23.             imagecontrol:border_inside_color="#bc0978"
  24.             imagecontrol:border_outside_color="#ba3456"
  25.             imagecontrol:border_thickness="1dp" />
  26.     </RelativeLayout>
  28. </LinearLayout>
  29.

这样你就可以使用圆形图片了，我们接下来看波纹的绘制

WhewView

  1.       package com.lgl.whew;
  3. import java.util.ArrayList;
  4. import java.util.List;
  6. import android.content.Context;
  7. import android.graphics.Canvas;
  8. import android.graphics.Color;
  9. import android.graphics.Paint;
  10. import android.util.AttributeSet;
  11. import android.view.View;
  13. /**
  14.  * 模仿咻一咻
  15.  * 
  16.  * @author LGL
  17.  *
  18.  */
  19. public class WhewView extends View {
  21.     private Paint paint;
  22.     private int maxWidth = 255;
  23.     // 是否运行
  24.     private boolean isStarting = false;
  25.     private List<String> alphaList = new ArrayList<String>();
  26.     private List<String> startWidthList = new ArrayList<String>();
  28.     public WhewView(Context context, AttributeSet attrs, int defStyleAttr) {
  29.         super(context, attrs, defStyleAttr);
  30.         // TODO Auto-generated constructor stub
  31.         init();
  32.     }
  34.     public WhewView(Context context, AttributeSet attrs) {
  35.         super(context, attrs);
  36.         // TODO Auto-generated constructor stub
  37.         init();
  38.     }
  40.     public WhewView(Context context) {
  41.         super(context);
  42.         // TODO Auto-generated constructor stub
  43.         init();
  44.     }
  46.     private void init() {
  47.         paint = new Paint();
  48.         // 设置博文的颜色
  49.         paint.setColor(0x0059ccf5);
  50.         alphaList.add("255");// 圆心的不透明度
  51.         startWidthList.add("0");
  52.     }
  54.     @Override
  55.     public void onDraw(Canvas canvas) {
  56.         super.onDraw(canvas);
  57.         setBackgroundColor(Color.TRANSPARENT);// 颜色：完全透明
  58.         // 依次绘制 同心圆
  59.         for (int i = 0; i < alphaList.size(); i++) {
  60.             int alpha = Integer.parseInt(alphaList.get(i));
  61.             // 圆半径
  62.             int startWidth = Integer.parseInt(startWidthList.get(i));
  63.             paint.setAlpha(alpha);
  64.             // 这个半径决定你想要多大的扩散面积
  65.             canvas.drawCircle(getWidth() / 2, getHeight() / 2, startWidth + 50,
  66.                     paint);
  67.             // 同心圆扩散
  68.             if (isStarting && alpha > 0 && startWidth < maxWidth) {
  69.                 alphaList.set(i, (alpha - 1) + "");
  70.                 startWidthList.set(i, (startWidth + 1) + "");
  71.             }
  72.         }
  73.         if (isStarting
  74.                 && Integer
  75.                         .parseInt(startWidthList.get(startWidthList.size() - 1)) == maxWidth / 5) {
  76.             alphaList.add("255");
  77.             startWidthList.add("0");
  78.         }
  79.         // 同心圆数量达到10个，删除最外层圆
  80.         if (isStarting && startWidthList.size() == 10) {
  81.             startWidthList.remove(0);
  82.             alphaList.remove(0);
  83.         }
  84.         // 刷新界面
  85.         invalidate();
  86.     }
  88.     // 执行动画
  89.     public void start() {
  90.         isStarting = true;
  91.     }
  93.     // 停止动画
  94.     public void stop() {
  95.         isStarting = false;
  96.     }
  98.     // 判断是都在不在执行
  99.     public boolean isStarting() {
  100.         return isStarting;
  101.     }
  103. }
  104.

这里我们看到，对外有几个方法，一个开始动画，一个停止动画，一个检测是否正在运行

MainActivity

这里就是我们的需求了，我反编译了一下支付宝的APK，并没有找到他的咻一咻的音效，就在他的raw目录下随便找了一个，我们现在是需要这样一个需求

  • 点击图片执行动画，并且每隔五分钟响一次
  • 再次点击图片，停止动画，停止音效

我们先新建一个raw文件夹把音效拷贝进去吧

  1.       package com.lgl.whew;
  3. import android.app.Activity;
  4. import android.media.AudioManager;
  5. import android.media.SoundPool;
  6. import android.os.Bundle;
  7. import android.os.Handler;
  8. import android.view.View;
  9. import android.view.View.OnClickListener;
  11. public class MainActivity extends Activity {
  13.     private WhewView wv;
  14.     private RoundImageView my_photo;
  15.     private static final int Nou = 1;
  17.     // 声明一个SoundPool
  18.     private SoundPool sp;
  19.     // 定义一个整型用load（）；来设置suondIDf
  20.     private int music;
  22.     private Handler handler = new Handler() {
  23.         public void handleMessage(android.os.Message msg) {
  24.             if (msg.what == Nou) {
  25.                 // 每隔10s响一次
  26.                 handler.sendEmptyMessageDelayed(Nou, 5000);
  27.                 sp.play(music, 1, 1, 0, 0, 1);
  28.             }
  29.         }
  30.     };
  32.     @Override
  33.     protected void onCreate(Bundle savedInstanceState) {
  34.         super.onCreate(savedInstanceState);
  35.         setContentView(R.layout.activity_main);
  37.         initView();
  38.     }
  40.     private void initView() {
  42.         // 第一个参数为同时播放数据流的最大个数，第二数据流类型，第三为声音质量
  43.         sp = new SoundPool(10, AudioManager.STREAM_SYSTEM, 5);
  44.         // 把你的声音素材放到res/raw里，第2个参数即为资源文件，第3个为音乐的优先级
  45.         music = sp.load(this, R.raw.hongbao_gq, 1);
  47.         wv = (WhewView) findViewById(R.id.wv);
  48.         my_photo = (RoundImageView) findViewById(R.id.my_photo);
  49.         my_photo.setOnClickListener(new OnClickListener() {
  51.             @Override
  52.             public void onClick(View v) {
  53.                 if(wv.isStarting()){
  54.                     //如果动画正在运行就停止，否则就继续执行
  55.                     wv.stop();
  56.                     //结束进程
  57.                     handler.removeMessages(Nou);
  58.                 }else{
  59.                     // 执行动画
  60.                     wv.start();
  61.                     handler.sendEmptyMessage(Nou);
  62.                 }
  63.             }
  64.         });
  66.     }
  67. }
  68.

相信这里的逻辑不是很难吧，对了，我们在结束activity的时候也是要销毁这个进程的，不然…你懂的

  1.           @Override
  2.     protected void onDestroy() {
  3.         // TODO Auto-generated method stub
  4.         super.onDestroy();
  5.         handler.removeMessages(Nou);
  6.     }
  7.

我们运行一下，想听效果的可以下载Demo运行一下，我们这里做一个简单的演示

Android特效专辑（十二）——仿支付宝咻一咻功能实现波纹扩散特效，精细小巧的View - 图2

Demo下载地址：http://download.csdn.net/detail/qq_26787115/9437957