java实现水波纹扩散效果

一、原理

模拟水波纹效果,最常见的是sine或者cosn的函数,周期性变化,贴近自然。

当水波纹中中间开始向四周扩散的时候,一般都是慢慢的失去能量,振幅也是越来越小,所以程序要模拟这个过程时候,要加上一个能量递减因子。然后用公式 y = a*sine(bx + c)来表示波纹公式。

二、程序实现

最重要的一步是计算水波纹的振幅。在任意一点确定水波的中心位置,可以是鼠标随机选取,对半径范围内的像素位置实现水波生成,然后转换为位置,对位置实现浮点数取整,然后使用适当的插值算法,本例使用双线性插值。

三、程序效果

四、滤镜完全源代码

这次我写了些中文注解,不给源代码的博文不是好博文

package com.gloomyfish.filter.study;

import java.awt.image.BufferedImage;

public class WaterFilter extends AbstractBufferedImageOp {
 private float wavelength = 16;
 private float amplitude = 10;
 private float phase = 0;
 private float centreX = 0.5f;
 private float centreY = 0.5f;
 private float radius = 50;

 private float radius2 = 0;
 private float icentreX;
 private float icentreY;

 public WaterFilter() {

 }

 @Override
 public BufferedImage filter(BufferedImage src, BufferedImage dest) {
 int width = src.getWidth();
  int height = src.getHeight();

  if ( dest == null )
   dest = createCompatibleDestImage( src, null );

  int[] inPixels = new int[width*height];
  int[] outPixels = new int[width*height];
  getRGB( src, 0, 0, width, height, inPixels );
 icentreX = width * centreX;
 icentreY = height * centreY;
 if ( radius == 0 )
 radius = Math.min(icentreX, icentreY);
 radius2 = radius*radius;
  int index = 0;
  float[] out = new float[2];
  for(int row=0; row<height; row++) {
   for(int col=0; col<width; col++) {
   index = row * width + col;

   // 获取水波的扩散位置,最重要的一步
   generateWaterRipples(col, row, out);
 int srcX = (int)Math.floor( out[0] );
 int srcY = (int)Math.floor( out[1] );
 float xWeight = out[0]-srcX;
 float yWeight = out[1]-srcY;
 int nw, ne, sw, se;

 // 获取周围四个像素,插值用,
 if ( srcX >= 0 && srcX < width-1 && srcY >= 0 && srcY < height-1) {
  // Easy case, all corners are in the image
  int i = width*srcY + srcX;
  nw = inPixels[i];
  ne = inPixels[i+1];
  sw = inPixels[i+width];
  se = inPixels[i+width+1];
 } else {
  // Some of the corners are off the image
  nw = getPixel( inPixels, srcX, srcY, width, height );
  ne = getPixel( inPixels, srcX+1, srcY, width, height );
  sw = getPixel( inPixels, srcX, srcY+1, width, height );
  se = getPixel( inPixels, srcX+1, srcY+1, width, height );
 }

 // 取得对应的振幅位置P(x, y)的像素,使用双线性插值
 /*if(xWeight >=0 || yWeight >= 0)
 {
  outPixels[index] = ImageMath.bilinearInterpolate(xWeight, yWeight, nw, ne, sw, se);
 }
 else
 {
  outPixels[index] = inPixels[index];
 }*/
 outPixels[index] = ImageMath.bilinearInterpolate(xWeight, yWeight, nw, ne, sw, se);
   }
  }

  setRGB( dest, 0, 0, width, height, outPixels );
  return dest;
 }

 private int getPixel(int[] pixels, int x, int y, int width, int height) {
 if (x < 0 || x >= width || y < 0 || y >= height) {
 return 0; // 有点暴力啦,懒得管啦
 }
 return pixels[ y*width+x ];
 }

 protected void generateWaterRipples(int x, int y, float[] out) {
 float dx = x-icentreX;
 float dy = y-icentreY;
 float distance2 = dx*dx + dy*dy;
 // 确定 water ripple的半径,如果在半径之外,就直接获取原来位置,不用计算迁移量
 if (distance2 > radius2) {
 out[0] = x;
 out[1] = y;
 } else {
 // 如果在radius半径之内,计算出来
 float distance = (float)Math.sqrt(distance2);
 // 计算改点振幅
 float amount = amplitude * (float)Math.sin(distance / wavelength * ImageMath.TWO_PI - phase);
 // 计算能量损失,
 amount *= (radius-distance)/radius; // 计算能量损失,
 if ( distance != 0 )
 amount *= wavelength/distance;
 // 得到water ripple 最终迁移位置
 out[0] = x + dx*amount;
 out[1] = y + dy*amount;
 }
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android特效之水波纹的实现

    前言 水波纹特效,想必大家或多或少见过,在我的印象中,大致有如下几种: 支付宝 "咻咻咻" 式 流量球 "荡漾" 式 真实的水波纹效果,基于Bitmap处理式 话不多说,先来看看效果: 填充式水波纹,间距相等 非填充式水波纹,间距相等 非填充式水波纹,间距不断变大 填充式水波纹,间距不断变小 想必大家已经知道基本的原理了,就是用Canvas来画嘛,但可不是简单的画哦,请往下看. 分析 这种类型的水波纹,其实无非就是画圆而已,在给定的矩形中,一个个圆由最小半径扩大到最

  • Android实现水波纹效果

    一.效果 点击开始: 点击停止: 二.在MainActivity中 import android.graphics.Paint; import android.os.Bundle; import android.support.v4.view.animation.LinearOutSlowInInterpolator; import android.support.v7.app.AppCompatActivity; import android.view.View; import android

  • Android 自定义view实现水波纹动画效果

    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她: 在这样的关键时候,身子板就一定得硬了,可千万别说不行,爷们儿怎么能说不行呢: 好了,为了让大家都能给妹纸们想要的,后面会逐渐分享一些比较比较不错的效果,目的只有一个,通过自定义view实现我们所能实现的动效: 今天主要分享水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个

  • Android实现自定义华丽的水波纹效果

    先来看看效果 实现效果 模拟水波纹的效果:点击屏幕就有圆环出现,半径从小到大,透明度从大到小(0为透明) 实现思路 1.自定义类继承View. 2.定义每个圆环的实体类 Wave,并初始化绘制圆环的画笔的数据. 3.重写onTouchEvent方法,down时,获得坐标点,做为圆环圆心. 4.发送handler信息,对数据进行修改,刷新页面. 5.重写onDraw方法,绘制一个圆环. 1. 自定义类继承View 新建WaterWaveView2类继承View public class Water

  • Android项目实战手把手教你画圆形水波纹loadingview

    本文实例讲解的是如何画一个满满圆形水波纹loadingview,这类效果应用场景很多,比如内存占用百分比之类的,分享给大家供大家参考,具体内容如下 效果图如下: 预备的知识: 1.贝塞尔曲线    如果你不了解,可以来这里进行基础知识储备:神奇的贝塞尔曲线 2.Paint.setXfermode()  以及PorterDuffXfermode 千万不要被这个b的名字吓到,不熟悉看到可能会认为很难记,其实 只要站在巨人的丁丁上 还是很简单的. 好了 废话不多说 ,跟我一步步来做一个炫酷的view吧

  • Android仿水波纹流量球进度条控制器

    仿水波纹流球进度条控制器,Android实现高端大气的主流特效,供大家参考,具体内容如下 效果图: CircleView 这里主要是实现中心圆以及水波特效 package com.lgl.circleview; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.gra

  • Android自定义View 实现水波纹动画引导效果

    一.实现效果图 二.实现代码 1.自定义view package com.czhappy.showintroduce.view; import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Pat

  • Android实现点击Button产生水波纹效果

    先上图,看看接下来我要向大家介绍的是个什么东西,如下图: 接下来要介绍的就是如何实现上述图中的波纹效果,这种效果如果大家没有体验过的话,可以看看百度手机卫士或者360手机卫士,里面的按钮点击效果都是这样的,另外Android 5.0以上的版本也出现了这种效果.不多说,下面聊聊具体的怎么实现. 首先大家看到的是三个button,水波纹的出现给我们的错觉是直接将波纹绘制在button上面的,但是这样能做到吗?首先button自己有background和src,如果把半透明的水波纹当作backgrou

  • Android实现兼容的水波纹效果

    先看看效果图 其实,要实现这一效果很简单,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的selector: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@c

  • Android自定义view实现水波纹进度球效果

    今天我们要实现的这个view没有太多交互性的view,所以就继承view. 自定义view的套路,套路很深 1.获取我们自定义属性attrs(可省略) 2.重写onMeasure方法,计算控件的宽和高 3.重写onDraw方法,绘制我们的控件 这么看来,自定义view的套路很清晰嘛. 我们看下今天的效果图,其中一个是放慢的效果(时间调的长) 我们按照套路来. 一.自定义属性 <declare-styleable name="WaveProgressView"> <at

随机推荐