水波纹效果----单环波纹

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Bitmap.Config;
import android.os.Handler;
import android.os.Message;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

/**
 * 水波纹View
 * @author lixiao
 *
 */
public class WaterView extends View{

	/**
	 * 不透明度(完全透明:0)
	 */
	private int alpha;
	private int radius;

	private Paint mPaint;

	private int widthScreen;
	private int heightScreen;

	private Handler mHandler;
	/**
	 * 图片直径
	 */
	private  static final int MIN = 50; 

	public WaterView(Context context,Bitmap source) {
		super(context);
		init();

		//获取屏幕的宽高
		DisplayMetrics dm = getResources().getDisplayMetrics();
		widthScreen = dm.widthPixels;
		heightScreen = dm.heightPixels;

		mHandler = new Handler(){
			@Override
			public void handleMessage(Message msg) {
				super.handleMessage(msg);
				switch (msg.what) {
				case 0:
					flushState();
					WaterView.this.invalidate();

					if(alpha !=0){
						mHandler.sendEmptyMessageDelayed(0, 50);
					}else{
						mHandler.sendEmptyMessage(1);
					}

					break;

				case 1:
					init();
					WaterView.this.invalidate();
					mHandler.sendEmptyMessage(0);

					break;

				default:
					break;
				}
			}
		};

		mHandler.sendEmptyMessage(0);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		Log.i("TAG", "onDraw......");
		super.onDraw(canvas);
		//画圆
		canvas.drawCircle(widthScreen/2, this.getHeight()/2, radius, mPaint);
	}

	private void init() {
		alpha = 255;
		radius = MIN/2 ;
		initPaint();

	}

	private void flushState() {
		radius  +=10;
		alpha  -=10;//控制速度,值越大,圆环扩大越快

		if(alpha <= 0){

			alpha = 0 ;
		}
		mPaint.setAlpha(alpha);

	}

	private void initPaint() {
		//新建一个画笔
		mPaint = new Paint();
		mPaint.setAntiAlias(true);//设置抗锯齿
		mPaint.setStrokeWidth((float) 1);//设置线宽10
		mPaint.setStyle(Paint.Style.STROKE);//设置空心画笔,环形方式绘制

		mPaint.setAlpha(alpha);
		mPaint.setColor(Color.BLUE);
	}

	/**
	 * 绘制圆形图片(暂时没用到)
	 * @param source 图片资源
	 * @param min 直径
	 * @return
	 */
	private Bitmap createCircleBitmap(Bitmap source,int min){
		Paint paint = new Paint();
		paint.setColor(Color.parseColor("#FFFFFF"));
		paint.setAntiAlias(true);//抗锯齿

		Bitmap target = Bitmap.createBitmap(min, min, Config.ARGB_8888);
		/**
		 * 产生同样大小的画布
		 */
		Canvas canvas = new Canvas(target);

		/**
		 * 首先绘制圆形
		 */
		canvas.drawCircle(widthScreen/2, this.getHeight()/2, min/2, paint);
		/**
		 * 使用SRC_IN(关键代码)
		 */
		paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
		/**
		 * 缩放图片
		 */
		 //获取这个图片的宽和高
        int width = source.getWidth();
        int height = source.getHeight();
		//计算缩放率,新尺寸除原始尺寸
        float scaleWidth = ((float) min) / width;
        float scaleHeight = ((float) min) / height;

        // 创建操作图片用的matrix对象
        Matrix matrix = new Matrix();

        // 缩放图片动作
        matrix.postScale(scaleWidth, scaleHeight);

        //旋转图片 动作
//        matrix.postRotate(45);

        // 创建新的图片
        Bitmap newBitmap = Bitmap.createBitmap(source, 0, 0,
        width, height, matrix, true);
		/**
		 * 绘制图片
		 */
		canvas.drawBitmap(newBitmap, 0, 0, paint);

		return target;
	}

}

时间: 2024-10-06 15:12:47

水波纹效果----单环波纹的相关文章

css 滚动视差 之 水波纹效果

核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: html: <div class="attach view"></div> <div class="text view">I WANT FLY</div> <div class="attach view"

水波纹效果

水波纹效果 Code 1.-(void)drawRect:(CGRect)rect {2. [super drawRect:rect];3. [[UIColor colorWithRed:22 / 255.0 green:163 / 255.0 blue:130 / 255.0 alpha:1] setFill];4. UIRectFill(rect);5.6. NSInteger pulsingCount = 6; // 脉冲个数7. double animationDuration = 3;

如何使用 HTML5 Canvas 制作水波纹效果

原文:如何使用 HTML5 Canvas 制作水波纹效果 今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javascript 就可以创建一个很有趣的解决功能. 在线演示      源码下载 Step 1. HTML 和以前一样,首先是 HTML 代码: <!DOCTYPE html> <html> <head> <meta

自定义view实现水波纹效果

今天看到一篇自定view 实现水波纹效果 觉得真心不错 学习之后再次写下笔记和心得.但是感觉原作者写得有些晦涩难懂,也许是本人愚笨 所以重写此作者教程.原作者博文大家可以去看下,感觉他在自定义view方面非常厉害,本文是基于此作者原文重新改写,拥有大量像相似部分 先看下效果吧: 1. 效果1: 2. 效果2 我先们来学习效果1: 效果1实现本质:用一张波形图和一个圆形图的图片,然后圆形图在波形图上方,然后使用安卓的图片遮罩模式desIn(不懂?那么先记住有这样一个遮罩模式).(只显示上部图像和下

Android 实现RippleEffect水波纹效果

最近看到360.UC.网易新闻客户端都应用了水波纹效果,就在私下里也研究了一下,参照GIT上大神的分享,自己也跟着做了一个示例,下面先看效果: 1.RippleEffect核心实现类 package com.example.RippleEffect; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphi

Android自定义View——实现水波纹效果类似剩余流量球

最近突然手痒就想搞个贝塞尔曲线做个水波纹效果玩玩,终于功夫不负有心人最后实现了想要的效果,一起来看下吧: 效果图镇楼 一:先一步一步来分解一下实现的过程 需要绘制一个正弦曲线(sin)或者余弦曲线(cos) 通过水平平移曲线来的到像水波波动的效果 水平移动的同时还需要有水位上涨,也就是向上平移 裁剪画布为圆形,在圆形区域绘制曲线 通过上面4步就可以实现了 二:现在就来实现第一步,绘制一个sin曲线:这里画了一张图来帮助理解,在PhotoShop中我们绘制一个贝塞尔曲线可以清楚的看到它的控制点如图

自定义控件三部曲之绘图篇(六)——Path之贝赛尔曲线和手势轨迹、水波纹效果

前言:好想义无反顾地追逐梦想 相关文章:<Android自定义控件三部曲文章索引> 从这篇开始,我将延续androidGraphics系列文章把图片相关的知识给大家讲完,这一篇先稍微进阶一下,给大家把<android Graphics(二):路径及文字>略去的quadTo(二阶贝塞尔)函数,给大家补充一下. 本篇最终将以两个例子给大家演示贝塞尔曲线的强大用途: 1.手势轨迹 利用贝塞尔曲线,我们能实现平滑的手势轨迹效果 2.水波纹效果 电池充电时,有些手机会显示水波纹效果,就是这样

Android特效专辑(十)——点击水波纹效果实现,逻辑清晰实现简单

Android特效专辑(十)--点击水波纹效果实现,逻辑清晰实现简单 这次做的东西呢,和上篇有点类似,就是用比较简单的逻辑思路去实现一些比较好玩的特效,最近也是比较忙,所以博客更新的速度还得看时间去推演,但是也能保证一周三更的样子,现在也还是以小功能,或者说是一些小入门级别的博客为主,我也不算是什么很厉害的人,很多细节的支持处理的仍然还是不到位,所以也是一直在弥补,话不多说,来看看今天的效果 实现起来很简单吧,那我们就来看一下他是怎么实现的咯! OnclickRuning package com

[转]Android自定义控件系列五:自定义绚丽水波纹效果

出处:http://www.2cto.com/kf/201411/353169.html 今天我们来利用Android自定义控件实现一个比较有趣的效果:滑动水波纹.先来看看最终效果图: 图一 效果还是很炫的:饭要一口口吃,路要一步步走,这里我们将整个过程分成几步来实现 一.实现单击出现水波纹单圈效果: 图二 照例来说,还是一个自定义控件,这里我们直接让这个控件撑满整个屏幕(对自定义控件不熟悉的可以参看我之前的一篇文章:Android自定义控件系列二:自定义开关按钮(一)).观察这个效果,发现应该