Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单

这次做的东西呢，和上篇有点类似，就是用比较简单的逻辑思路去实现一些比较好玩的特效，最近也是比较忙，所以博客更新的速度还得看时间去推演，但是也能保证一周三更的样子，现在也还是以小功能，或者说是一些小入门级别的博客为主，我也不算是什么很厉害的人，很多细节的支持处理的仍然还是不到位，所以也是一直在弥补，话不多说，来看看今天的效果

Android特效专辑（十）——点击水波纹效果实现，逻辑清晰实现简单 - 图1

实现起来很简单吧，那我们就来看一下他是怎么实现的咯！

OnclickRuning

  1.       package com.lgl.onclickruning;
  3. import android.content.Context;
  4. import android.graphics.Canvas;
  5. import android.graphics.Color;
  6. import android.graphics.Paint;
  7. import android.graphics.Paint.Style;
  8. import android.os.Handler;
  9. import android.util.AttributeSet;
  10. import android.util.Log;
  11. import android.view.MotionEvent;
  12. import android.view.View;
  14. /**
  15.  * 点击水波纹涟漪动画效果
  16.  * 
  17.  * @author LGL
  18.  * 
  19.  */
  20. public class Runing extends View {
  22.     // 画笔
  23.     private Paint mPaint;
  24.     // 内圆宽度
  25.     private int strokeWidth;
  26.     // 圆心x
  27.     private int cx;
  28.     // 圆心y
  29.     private int cy;
  30.     // 半径
  31.     private int radius;
  32.     // Handler消息
  33.     private static final int FLUSH = 0;
  35.     public Runing(Context context, AttributeSet attrs) {
  36.         super(context, attrs);
  38.         init();
  40.     }
  42.     private void init() {
  44.         // 初始化画笔
  45.         mPaint = new Paint();
  46.         // 抗锯齿
  47.         mPaint.setAntiAlias(true);
  48.         // 设置颜色
  49.         mPaint.setColor(Color.BLUE);
  50.         // 设置空心
  51.         mPaint.setStyle(Style.STROKE);
  52.         // 设置内圆的宽度
  53.         mPaint.setStrokeWidth(strokeWidth);
  54.         // 设置透明度 0-255
  55.         mPaint.setAlpha(255);
  57.         // 初始值
  58.         strokeWidth = 0;
  59.         radius = 0;
  60.     }
  62.     /**
  63.      * 绘制
  64.      */
  65.     @Override
  66.     protected void onDraw(Canvas canvas) {
  67.         super.onDraw(canvas);
  68.         // 绘制圆环
  69.         canvas.drawCircle(cx, cy, radius, mPaint);
  70.     }
  72.     /**
  73.      * 触摸事件
  74.      */
  75.     @Override
  76.     public boolean onTouchEvent(MotionEvent event) {
  78.         // 判断手势按下和抬起
  79.         switch (event.getAction()) {
  80.         case MotionEvent.ACTION_DOWN:
  81.             /**
  82.              * 按下去开始画圆，也就是起涟漪，所以我们首先得获取到按下的坐标，事实上，我们要做这样操作的开发，都必须先提前拿到该有的坐标
  83.              */
  84.             cx = (int) event.getX();
  85.             cy = (int) event.getY();
  86.             Log.i("坐标", "圆心x：" + cx + "圆心y:" + cy);
  88.             break;
  89.         }
  90.         // 初始化
  91.         init();
  92.         // 发送
  93.         handler.sendEmptyMessage(FLUSH);
  94.         return true;
  95.     }
  97.     /**
  98.      * 刷新状态
  99.      */
  100.     private void flush() {
  101.         // 半径每次+10
  102.         radius += 10;
  103.         // 线条的宽度每次都是半径的四分之一
  104.         strokeWidth = radius / 4;
  105.         // 重新设置给画笔
  106.         mPaint.setStrokeWidth(strokeWidth);
  107.         // 颜色渐变,每次减少20的色值
  108.         int nextAlpha = mPaint.getAlpha() - 20;
  109.         // 避免等于负数
  110.         if (nextAlpha < 20) {
  111.             // 直接设置为透明
  112.             nextAlpha = 0;
  113.         }
  114.         // 继续重新设置给画笔
  115.         mPaint.setAlpha(nextAlpha);
  116.     }
  118.     private Handler handler = new Handler() {
  119.         public void handleMessage(android.os.Message msg) {
  120.             switch (msg.what) {
  121.             case FLUSH:
  122.                 // 更改参数状态
  123.                 flush();
  124.                 // 刷新 执行我们的绘制方法
  125.                 invalidate();
  126.                 // 继续验证透明度,只要不为0就一直发送，直到透明
  127.                 if (mPaint.getAlpha() != 0) {
  128.                     handler.sendEmptyMessageDelayed(FLUSH, 100);
  129.                 }
  130.                 break;
  131.             }
  132.         }
  133.     };
  134. }
  135.

layout_main.xml

  1.       <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent" >
  6.     <com.lgl.onclickruning.Runing
  7.         android:layout_width="match_parent"
  8.         android:layout_height="match_parent" />
  10. </RelativeLayout>
  11.

代码其实很简单，我们简单的逻辑就可以实现了，但是别小看了这个思维，你可以用这个逻辑去实现更多有趣的特效，这里就期待你的挖掘了，嘻嘻

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