自定义view 波浪效果
实现波浪效果view，可以自定义view，也可以自定义drawable，我个人比较喜欢重写drawable，因此这里是自定义drawable实现效果，费话少说，先看效果。
这里用了两种方式实现波浪效果，一种是通过正弦函数去画路径，一种是通过三阶贝塞尔曲线画出类似正弦曲线的效果
先看看实现波浪效果需要用到的一些参数，看注释大概就能了解
/**
* 画布的宽
*/
int mWidth;
/**
* 画布的高
*/
int mHeight;
/**
* 初始偏移量
*/
float offset = 0;
/**
* 线的宽度，当lineWidth>0时，是画线模式，否则是填充模式
*/
float lineWidth = 0;
/**
* 显示的周期数
*/
float period = 1;
/**
* 移动速度，每秒钟移动的周期数
*/
float speedPeriod = 0.5f;
/**
* 波浪的振幅，单位px
*/
float mSwing = 20;
再来看看正弦函数的实现方式
private class WaveSin extends Wave {
/**
* 初始偏移量
*/
float offRadian = 0;
/**
* 每个像素占的弧度
*/
double perRadian;
/**
* 每秒移动的弧度数
*/
float speedRadian;
@Override
public void onDraw(Canvas canvas, boolean isBottom) {
float y = mHeight;
mPath.reset();
//计算路径点的初始位置
if (lineWidth > 0) {
y = (float) (mSwing * Math.sin(offRadian) + mSwing);
mPath.moveTo(-lineWidth, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
} else {
mPath.moveTo(0, isBottom ? 0 : mHeight);
}
//步长越小越精细，当然越消耗cpu性能，过大则会有锯齿
int step = mWidth / 100 > 20 ? 20 : mWidth / 100;
//通过正弦函数计算路径点，放入mPath中
for (int x = 0; x <= mWidth + step; x += step) {
y = (float) (mSwing * Math.sin(perRadian * x + offRadian) + mSwing);
mPath.lineTo(x, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
}
//填充模式时，画完完整路径
if (lineWidth <= 0) {
mPath.lineTo(mWidth, isBottom ? mHeight - y : y);
mPath.lineTo(mWidth, isBottom ? 0 : mHeight);
mPath.lineTo(0, isBottom ? 0 : mHeight);
mPath.close();
}
canvas.drawPath(mPath, mPaint);
}
@Override
void init() {
perRadian = (float) (2 * Math.PI * period / mWidth);
speedRadian = (float) (speedPeriod * Math.PI * 2);
offRadian = (float) (offset * 2 * Math.PI);
}
@Override
public void move(float delta) {
offRadian += speedRadian * delta;
}
}
首先`init()`方法中，perRadian是计算每弧度所占的宽度，speedRadian计算每秒移动的弧度，offRadian是当前偏移弧度，在`move(float delta)`中可以看到delta是时间变化量，所以
`下一次的偏移量 = 当前偏移量+每秒移动的弧度*时间的变化量`，即`offRadian += speedRadian * delta;`
再来看看主要的onDraw方法，Canvas是画布，isBottom是指波浪是否在整个画布的底部。
下面是通过贝塞尔曲线实现波浪效果
private class WaveBezier extends Wave {
/**
* 根据贝塞尔曲线公式计算的一个常量值
*/
private static final double MAX_Y = 0.28867513459481287;
/**
* 一个周期的宽度
*/
float periodWidth;
/**
* 每秒钟移动的宽度
*/
float speedWidth;
/**
* 贝塞尔曲线控制点的Y轴坐标
*/
float conY;
/**
* 当前偏移量
*/
float currentOffset = 0;
@Override
public void onDraw(Canvas canvas, boolean isBottom) {
mPath.reset();
// 移动到第一个周期的起始点
mPath.moveTo(-currentOffset, 0);
float conX = periodWidth / 2;
int w = (int) -currentOffset;
for (int i = 0; i <= mWidth + currentOffset; i += periodWidth) {
mPath.rCubicTo(conX, conY, conX, -conY, periodWidth, 0);//注意，这里用的是相对坐标
w += periodWidth;
}
// 闭合路径
if (lineWidth <= 0) {
mPath.rLineTo(0, isBottom ? -mHeight : mHeight);
mPath.rLineTo(-w, 0);
mPath.close();
}
// 对Y轴整体偏移
mPath.offset(0, (isBottom ? mHeight - mSwing - lineWidth / 2 : mSwing + lineWidth / 2));
canvas.drawPath(mPath, mPaint);
}
@Override
void init() {
periodWidth = mWidth / period;
speedWidth = speedPeriod * periodWidth;
currentOffset = offset * periodWidth;
conY = (float) (mSwing / MAX_Y);
isReInit = false;
}
@Override
public void move(float delta) {
if (periodWidth <= 0) {
isReInit = true;
return;
}
currentOffset += speedWidth * delta;
if (currentOffset < 0) {
currentOffset += periodWidth;
} else {
if (currentOffset > periodWidth) {
currentOffset -= periodWidth;
}
}
}
}
在 `init()`方法中periodWidth为单个周期宽度，speedWidth为每秒移动的宽度，currentOffset为当前偏移量，conY为控制点的Y轴坐标。
最后贴上完整代码
package cn.sskbskdrin.wave; import android.animation.ValueAnimator;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.Drawable;
import android.view.animation.LinearInterpolator; import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.WeakHashMap; /**
* Created by sskbskdrin on 2018/4/4.
*
* @author sskbskdrin
*/
public class WaveDrawable extends Drawable implements Animatable { private final List<Wave> list; private int mWidth;
private int mHeight; private boolean animIsStart = false; private boolean isBottom = false; public WaveDrawable() {
this(1);
} public WaveDrawable(int count) {
this(count, false);
} public WaveDrawable(int count, boolean isSin) {
if (count <= 0) {
throw new IllegalArgumentException("Illegal count: " + count);
}
list = new ArrayList<>(count);
for (int i = 0; i < count; i++) {
list.add(isSin ? new WaveSin() : new WaveBezier());
}
} public void setBottom(boolean isBottom) {
this.isBottom = isBottom;
} /**
* 设置填充的颜色
*
* @param color
*/
public void setColor(int color) {
for (Wave wave : list) {
wave.setColor(color);
}
} /**
* 设置填充的颜色
*
* @param color
*/
public void setColor(int color, int index) {
if (index < list.size()) {
list.get(index).setColor(color);
}
} public void setOffset(float offset) {
for (Wave wave : list) {
wave.offset(offset);
}
} /**
* 设置初始相位
*
* @param offset
* @param index
*/
public void setOffset(float offset, int index) {
if (index < list.size()) {
list.get(index).offset(offset);
}
} /**
* 波浪的大小
*
* @param swing
*/
public void setSwing(int swing) {
for (Wave wave : list) {
wave.setSwing(swing);
}
} /**
* 波浪的大小
*
* @param swing
* @param index
*/
public void setSwing(int swing, int index) {
checkIndex(index);
list.get(index).setSwing(swing);
} /**
* 设置波浪流动的速度
*
* @param speed
*/
public void setSpeed(float speed) {
for (Wave wave : list) {
wave.setSpeed(speed);
}
} /**
* 设置波浪流动的速度
*
* @param speed
*/
public void setSpeed(float speed, int index) {
checkIndex(index);
list.get(index).setSpeed(speed);
} /**
* 设置波浪周期数
*
* @param period (0,--)
*/
public void setPeriod(float period) {
for (Wave wave : list) {
wave.setPeriod(period);
}
} public void setPeriod(float period, int index) {
checkIndex(index);
list.get(index).setPeriod(period);
} private void checkIndex(int index) {
if (index < 0 || index >= list.size()) {
throw new IllegalArgumentException("Illegal index. list size=" + list.size() + " index=" + index);
}
} public void setLineWidth(float width) {
for (Wave wave : list) {
wave.setLineWidth(width);
}
} public void setLineWidth(float width, int index) {
if (index >= 0 && index < list.size()) {
list.get(index).setLineWidth(width);
}
} @Override
protected void onBoundsChange(Rect bounds) {
mWidth = bounds.width();
mHeight = bounds.height();
for (Wave wave : list) {
wave.onSizeChange(mWidth, mHeight);
}
} @Override
public void draw(Canvas canvas) {
for (Wave wave : list) {
if (wave.isReInit) {
wave.init();
wave.isReInit = false;
}
wave.onDraw(canvas, isBottom);
}
} @Override
public int getIntrinsicWidth() {
return mWidth;
} @Override
public int getIntrinsicHeight() {
return mHeight;
} private void move(float delta) {
for (Wave wave : list) {
wave.move(delta);
}
} @Override
public void setAlpha(int alpha) {
for (Wave wave : list) {
wave.mPaint.setAlpha(alpha);
}
} @Override
public void setColorFilter(ColorFilter cf) {
for (Wave wave : list) {
wave.mPaint.setColorFilter(cf);
}
} @Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
} @Override
public boolean setVisible(boolean visible, boolean restart) {
if (visible) {
if (animIsStart) {
AnimateListener.start(this);
}
} else {
if (animIsStart) {
AnimateListener.start(this);
}
}
return super.setVisible(visible, restart);
} @Override
public void start() {
animIsStart = true;
AnimateListener.start(this);
} @Override
public void stop() {
AnimateListener.cancel(this);
animIsStart = false;
} @Override
public boolean isRunning() {
return AnimateListener.isRunning(this);
} private static class AnimateListener implements ValueAnimator.AnimatorUpdateListener {
private static WeakHashMap<WaveDrawable, Boolean> map = new WeakHashMap<>();
private static int lastTime = 0;
private static ValueAnimator valueAnimator; private static void initAnimation() {
valueAnimator = ValueAnimator.ofInt(0, 1000);
valueAnimator.setDuration(1000);
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new AnimateListener());
} private static void start(WaveDrawable drawable) {
if (!map.containsKey(drawable)) {
map.put(drawable, true);
}
if (valueAnimator == null) {
initAnimation();
}
if (!valueAnimator.isRunning()) {
valueAnimator.start();
}
} private static void cancel(WaveDrawable drawable) {
if (map.containsKey(drawable)) {
map.put(drawable, false);
}
} private static boolean isRunning(WaveDrawable drawable) {
return map.containsKey(drawable) && map.get(drawable);
} @Override
public void onAnimationUpdate(ValueAnimator animation) {
int current = (int) animation.getAnimatedValue();
int delta = current - lastTime;
if (delta < 0) {
delta = current + 1000 - lastTime;
}
float deltaF = delta / 1000f;
lastTime = current;
if (map.size() == 0) {
animation.cancel();
valueAnimator = null;
return;
}
for (Map.Entry<WaveDrawable, Boolean> wave : map.entrySet()) {
if (wave != null && wave.getValue()) {
WaveDrawable drawable = wave.getKey();
drawable.move(deltaF);
drawable.invalidateSelf();
}
}
}
} private abstract class Wave { /**
* 画布的宽
*/
int mWidth;
/**
* 画布的高
*/
int mHeight;
Path mPath = new Path();
Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
/**
* 初始偏移量
*/
float offset = 0;
/**
* 线的宽度，当lineWidth>0时，是画线模式，否则是填充模式
*/
float lineWidth = 0;
/**
* 显示的周期数
*/
float period = 1;
/**
* 移动速度，每秒钟移动的周期数
*/
float speedPeriod = 0.5f;
/**
* 波浪的振幅，单位px
*/
float mSwing = 20; boolean isReInit = true; /**
* drawable 大小改变
*
* @param width
* @param height
*/
void onSizeChange(int width, int height) {
mWidth = width;
mHeight = height;
isReInit = true;
} abstract void onDraw(Canvas canvas, boolean isBottom); abstract void init(); /**
* 移动的时间变化量
*
* @param delta
*/
abstract void move(float delta); /**
* 设置线的宽度
*
* @param width
*/
void setLineWidth(float width) {
lineWidth = width;
if (lineWidth > 0) {
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(lineWidth);
} else {
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
}
isReInit = true;
} void setColor(int color) {
mPaint.setColor(color);
} /**
* 每秒移动的像素数
*
* @param speedPeriod
*/
void setSpeed(float speedPeriod) {
this.speedPeriod = speedPeriod;
isReInit = true;
} /**
* 振幅大小
*
* @param swing
*/
void setSwing(float swing) {
if (swing <= 0) {
throw new IllegalArgumentException("Illegal swing: " + swing);
}
mSwing = swing;
isReInit = true;
} /**
* 显示周期数
*
* @param period
*/
void setPeriod(float period) {
if (period <= 0) {
throw new IllegalArgumentException("Illegal period: " + period);
}
this.period = period;
isReInit = true;
} /**
* 起始偏移量
*
* @param offPeriod
*/
void offset(float offPeriod) {
this.offset = offPeriod;
isReInit = true;
}
} private class WaveSin extends Wave { /**
* 初始偏移量
*/
float offRadian = 0;
/**
* 每个像素占的弧度
*/
double perRadian;
/**
* 每秒移动的弧度数
*/
float speedRadian; @Override
public void onDraw(Canvas canvas, boolean isBottom) {
float y = mHeight;
mPath.reset();
//计算路径点的初始位置
if (lineWidth > 0) {
y = (float) (mSwing * Math.sin(offRadian) + mSwing);
mPath.moveTo(-lineWidth, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
} else {
mPath.moveTo(0, isBottom ? 0 : mHeight);
} //步长越小越精细，当然越消耗cpu性能，过大则会有锯齿
int step = mWidth / 100 > 20 ? 20 : mWidth / 100; //通过正弦函数计算路径点，放入mPath中
for (int x = 0; x <= mWidth + step; x += step) {
y = (float) (mSwing * Math.sin(perRadian * x + offRadian) + mSwing);
mPath.lineTo(x, isBottom ? mHeight - y - lineWidth / 2 : y + lineWidth / 2);
} //填充模式时，画完完整路径
if (lineWidth <= 0) {
mPath.lineTo(mWidth, isBottom ? mHeight - y : y);
mPath.lineTo(mWidth, isBottom ? 0 : mHeight);
mPath.lineTo(0, isBottom ? 0 : mHeight);
mPath.close();
} canvas.drawPath(mPath, mPaint);
} @Override
void init() {
perRadian = (float) (2 * Math.PI * period / mWidth);
speedRadian = (float) (speedPeriod * Math.PI * 2);
offRadian = (float) (offset * 2 * Math.PI);
} @Override
public void move(float delta) {
offRadian += speedRadian * delta;
}
} private class WaveBezier extends Wave {
/**
* 根据贝塞尔曲线公式计算的一个常量值
*/
private static final double MAX_Y = 0.28867513459481287;
/**
* 一个周期的宽度
*/
float periodWidth;
/**
* 每秒钟移动的宽度
*/
float speedWidth;
/**
* 贝塞尔曲线控制点的Y轴坐标
*/
float conY;
/**
* 当前偏移量
*/
float currentOffset = 0; @Override
public void onDraw(Canvas canvas, boolean isBottom) {
mPath.reset();
// 移动到第一个周期的起始点
mPath.moveTo(-currentOffset, 0);
float conX = periodWidth / 2;
int w = (int) -currentOffset;
for (int i = 0; i <= mWidth + currentOffset; i += periodWidth) {
mPath.rCubicTo(conX, conY, conX, -conY, periodWidth, 0);//注意，这里用的是相对坐标
w += periodWidth;
} // 闭合路径
if (lineWidth <= 0) {
mPath.rLineTo(0, isBottom ? -mHeight : mHeight);
mPath.rLineTo(-w, 0);
mPath.close();
} // 对Y轴整体偏移
mPath.offset(0, (isBottom ? mHeight - mSwing - lineWidth / 2 : mSwing + lineWidth / 2)); canvas.drawPath(mPath, mPaint);
} @Override
void init() {
periodWidth = mWidth / period;
speedWidth = speedPeriod * periodWidth;
currentOffset = offset * periodWidth;
conY = (float) (mSwing / MAX_Y);
isReInit = false;
} @Override
public void move(float delta) {
if (periodWidth <= 0) {
isReInit = true;
return;
}
currentOffset += speedWidth * delta;
if (currentOffset < 0) {
currentOffset += periodWidth;
} else {
if (currentOffset > periodWidth) {
currentOffset -= periodWidth;
}
}
}
}
}
自定义view 波浪效果的更多相关文章
- Android -- 自定义view实现keep欢迎页倒计时效果
1,最近打开keep的app的时候,发现它的欢迎页面的倒计时效果还不错,所以打算自己来写写,然后就有了这篇文章. 2,还是老规矩,先看一下我们今天实现的效果 相较于我们常见的倒计时,这次实现的效果是多 ...
- 嵌套RecyclerView左右滑动替代自定义view
以前的左右滑动效果采用自定义scrollview或者linearlayout来实现,recyclerview可以很好的做这个功能,一般的需求就是要么一个独立的左右滑动效果,要么在一个列表里的中间部分一 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
- Android 自定义view实现水波纹效果
http://blog.csdn.net/tianjian4592/article/details/44222565 在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了 ...
- Android自定义View之圆环交替 等待效果
学习了前面两篇的知识,对于本篇实现的效果,相信大家都不会感觉太困难,我要实现的效果是什么样呢?下面请先看效果图: 看上去是不很炫的样子,它的实现上也不是很复杂,重点在与onDraw()方法的绘制. 首 ...
- Android自定义View 画弧形,文字,并增加动画效果
一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类 B ...
- 分析自定义view的实现过程-实现雪花飞舞效果（转载有改动）
声明:本文源码出自实现雪花飞舞效果(有改动)主要通过这篇文来分析自定义view的实现过程. 没事时,比较喜欢上网看看一些新的东西,泡在网上的日子就是一个很不错的网站. 下面开始了,哈哈.^_^ 大家都 ...
- Android 自定义View修炼-自定义弹幕效果View
一.概述 现在有个很流行的效果就是弹幕效果,满屏幕的文字从右到左飘来飘去.看的眼花缭乱,看起来还蛮cool的 现在就是来实现这一的一个效果,大部分的都是从右向左移动漂移,本文的效果中也支持从左向右的漂 ...
- Android 自定义View修炼-【2014年最后的分享啦】Android实现自定义刮刮卡效果View
一.简介: 今天是2014年最后一天啦,首先在这里,我祝福大家在新的2015年都一个个的新健康,新收入,新顺利,新如意!!! 上一偏,我介绍了用Xfermode实现自定义圆角和椭圆图片view的博文& ...
随机推荐
- Linux文本处理命令 -- awk
简介 awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再 ...
- jms中activemq事务探讨
http://blog.csdn.net/dly1580854879/article/details/68945997
- SSM-MyBatis-11：Mybatis中查询全部用resultmap
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 实体类很普通,四个字段,编号,名字,作者名,价格 在接口中的方法声明如下 //查全部 public List& ...
- 优雅的玩PHP多进程
proc_open (PHP 4 >= 4.3.0, PHP 5, PHP 7) proc_open — 执行一个命令,并且打开用来输入/输出的文件指针. 说明¶ resource proc_o ...
- JavaScript设计模式 Item 3 --封装
在JavaScript 中,并没有对抽象类和接口的支持.JavaScript 本身也是一门弱类型语言.在封装类型方面,JavaScript 没有能力,也没有必要做得更多.对于JavaScript 的设 ...
- Python定时任务框架APScheduler
http://blog.csdn.net/chosen0ne/article/details/7842421 APScheduler是基于Quartz的一个Python定时任务框架,实现了Quartz ...
- 吐槽一下--最近多次在腾讯以及万科的面试经历---Web前端与PHP后端开发
前端时间,由于职业发展等,想要换一份工作,于是投递了一些国内还算知名的公司,列如: 腾讯.万科之类的: (1)首先说一下这两家公司的反馈情况: 腾讯:投递到反馈,(初次人事打电话沟通)大约1周,三次不 ...
- C++使用类和对象
1. 内置函数 程序调用函数时需要一定的时间和空间开销,其执行过程一般如下: 而C++提供了一种高效率的方法,即在编译的时候将所调用函数的代码直接嵌入到主函数中,而不是将流程转出去,这样可以避免函数调 ...
- web项目部署到本地tomcat时，运行tomcat的startup.bat一闪而过
在eclipse里面启动tomcat时都是正常的,打成War包后,也无法自动解压,百度了好多方法均尝试失败,然后看到了下方的百度经验,配完环境变量后,tomcat可以正常启动了.如下为步骤: 1. 遇 ...
- rename_windows.go
{ if err != nil { return err } return syscall.EINVAL } r ...