也可看Android自绘控件开发与性能优化实践——以录音波浪动画为例
直接上代码
基类：
public abstract class RenderView extends SurfaceView implements SurfaceHolder.Callback {
private static final String TAG = "RenderView";
//是否正在绘制动画
private boolean isStartAnim = false;
private final static Object surfaceLock = new Object();
private RenderThread renderThread;
/**
* 绘制背景，防止开始时黑屏
* 子View可以执行此方法
* @param canvas
*/
protected abstract void doDrawBackground(Canvas canvas);
/**
* 渲染surfaceView的回调方法。
*
* @param canvas 画布
*/
protected abstract void onRender(Canvas canvas, long millisPassed);
public RenderView(Context context) {
this(context, null);
}
public RenderView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RenderView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
getHolder().addCallback(this);
}
/*回调/线程*/
private static class RenderThread extends Thread {
private static final long SLEEP_TIME = 16;
private WeakReference<RenderView> renderView;
private boolean running = false;
private boolean destoryed = false;
private boolean isPause = false;
public RenderThread(RenderView renderView) {
super("RenderThread");
Log.e(TAG, "RenderThread: " );
this.renderView = new WeakReference<>(renderView);
}
private SurfaceHolder getSurfaceHolder(){
if (getRenderView() != null ){
return getRenderView().getHolder();
}
return null;
}
private RenderView getRenderView(){
return renderView.get();
}
@Override
public void run() {
long startAt = System.currentTimeMillis();
while (!destoryed) {
// Log.e("whileThread","RenderView动画线程222");
synchronized (surfaceLock) {
//这里并没有真正的结束Thread，防止部分手机连续调用同一Thread出错
while (isPause){
try {
surfaceLock.wait();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
if (running) {
if (getSurfaceHolder() != null && getRenderView() != null) {
Canvas canvas = getSurfaceHolder().lockCanvas();
if (canvas != null) {
getRenderView().doDrawBackground(canvas);
if (getRenderView().isStartAnim) {
//这里做真正绘制的事情
getRenderView().render(canvas, System.currentTimeMillis() - startAt);
}
if(getSurfaceHolder().getSurface().isValid()){
getSurfaceHolder().unlockCanvasAndPost(canvas);
}
}
}else {
running = false;
}
}
}
try {
Thread.sleep(SLEEP_TIME);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
public void setRun(boolean isRun) {
this.running = isRun;
}
}
@Override
public void surfaceCreated(SurfaceHolder holder) {
renderer = onCreateRenderer();
if (renderer != null && renderer.isEmpty()) {
throw new IllegalStateException();
}
renderThread = new RenderThread(this);
}
/**
* 解锁暂停，继续执行绘制任务
* 默认当Resume时不自动启动动画
*/
public void onResume(){
synchronized (surfaceLock){
if (renderThread != null) {
renderThread.isPause = false;
surfaceLock.notifyAll();
}
}
}
//假暂停，并没有结束Thread
public void onPause(){
synchronized (surfaceLock){
if (renderThread != null) {
renderThread.isPause = true;
}
}
}
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
//这里可以获取SurfaceView的宽高等信息
}
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
synchronized (surfaceLock) { //这里需要加锁，否则doDraw中有可能会crash
renderThread.setRun(false);
renderThread.destoryed = true;
}
}
@Override
public void onWindowFocusChanged(boolean hasFocus) {
if (hasFocus && isStartAnim){
startAnim();
}else {
startThread();
}
}
/*绘图*/
public interface IRenderer {
void onRender(Canvas canvas, long millisPassed);
}
private List<IRenderer> renderer;
protected List<IRenderer> onCreateRenderer() {
return null;
}
private void render(Canvas canvas, long millisPassed) {
if (renderer != null) {
for (int i = 0, size = renderer.size(); i < size; i++) {
renderer.get(i).onRender(canvas, millisPassed);
}
} else {
onRender(canvas, millisPassed);
}
}
public void startAnim(){
isStartAnim = true;
startThread();
}
private void startThread(){
if (renderThread != null && !renderThread.running) {
renderThread.setRun(true);
try {
if (renderThread.getState() == Thread.State.NEW) {
renderThread.start();
}
}catch (RuntimeException e){
e.printStackTrace();
}
}
}
public void stopAnim(){
isStartAnim = false;
if (renderThread != null && renderThread.running) {
renderThread.setRun(false);
renderThread.interrupt();
}
}
public boolean isRunning(){
if (renderThread != null) {
return renderThread.running;
}
return false;
}
//释放相关资源，防止内存泄漏
public void release(){
if (getHolder() != null && getHolder().getSurface() != null) {
getHolder().getSurface().release();
getHolder().removeCallback(this);
}
}
}真正的基于surfaceView的波浪动画view来了：
public class FakeVoiceViewWithSurface extends RenderView {
private static final String TAG = "FakeVoiceViewWithSurface";
private int mWidth;
private int mHeight;
private int lineColor = DEFAULT_LINE_COLOR;
private float maxLineHeight;
private int lineWidth = DEFAULT_LINE_WIDTH;
private int lineGap = DEFAULT_LINE_GAP;
//根据最后宽度来确定有几条跳动的线条
private int lineCount;
private float padding;
private static final int DEFAULT_LINE_WIDTH = SizeUtils.dp2px(2);
private static final int DEFAULT_LINE_COLOR = 0xFF38ABF3;
private static final int DEFAULT_LINE_GAP = 10;
final float DEFAULT_WIDTH = getContext().getResources().getDimension(R.dimen.qb_px_230);
final float DEFAULT_HEIGHT = getContext().getResources().getDimension(R.dimen.qb_px_80);
private Paint linePaint;
private Paint rectPaint;
private List<LineParamBean> lineList = new ArrayList<>();
private RectF rectF;
private boolean status;
private Random random;
private SurfaceHolder surfaceHolder;
// private boolean hadMeasured = false;
private boolean isTransparentMode = false;
//控制向右偏移速度，越小偏移速度越快
private float offsetSpeed = 250F;
private boolean isTrans = false;
//背景色
private int backGroundColor = Color.TRANSPARENT;
public FakeVoiceViewWithSurface(Context context) {
super(context);
}
public FakeVoiceViewWithSurface(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public FakeVoiceViewWithSurface(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void doDrawBackground(Canvas canvas) {
//绘制背景
if(isTransparentMode) {
//启用CLEAR模式，所绘制内容不会提交到画布上。
canvas.drawColor(backGroundColor, PorterDuff.Mode.CLEAR);
} else {
canvas.drawColor(backGroundColor);
}
}
@Override
protected void onRender(Canvas canvas, long millisPassed) {
if (isTrans) {
canvas.drawColor(Color.WHITE);
canvas.drawColor(backGroundColor, PorterDuff.Mode.SRC);
}
if(rectF == null || lineList.isEmpty()) {
initDraw();
}
for(int i = 0; i < lineList.size(); i++) {
LineParamBean bean = lineList.get(i);
float offset = (millisPassed % bean.randomTime) / bean.randomTime;
if(offset < 0.5f) {
bean.height = 2 * offset * maxLineHeight;
} else if(offset <= 1.0f) {
bean.height = 2 * (1 - offset) * maxLineHeight;
}
bean.y = (mHeight - bean.height) / 2;
if(!status) {
bean.x = lineGap * (i + 1) + lineWidth * ((float) i + (1 / 2)) + padding;
}
}
status = true;
if (isTrans) rectPaint.setColor(backGroundColor);
canvas.drawRoundRect(rectF, mHeight / 4, mHeight / 4, rectPaint);
for(LineParamBean bean : lineList) {
canvas.drawLine(bean.x, bean.y, bean.x, bean.y + bean.height, linePaint);
}
}
public void setTrans(boolean trans) {
isTrans = trans;
}
public boolean isStart() {
return status;
}
private void initDraw() {
this.mWidth = getMeasuredWidth();
this.mHeight = getMeasuredHeight();
Log.e(TAG, "width:" + mWidth);
Log.e(TAG, "height:" + mHeight);
padding = mWidth / 5;
maxLineHeight = mHeight * 2 / 3;
lineCount = (int) ((this.mWidth - lineGap - padding * 2) / (lineWidth + lineGap));
lineList.clear();
for(int i = 0; i < lineCount; i++) {
LineParamBean bean = new LineParamBean();
lineList.add(bean);
}
if(rectF == null) {
rectF = new RectF();
}
rectF.set(0, 0, this.mWidth, this.mHeight);
}
private void init() {
linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
linePaint.setDither(true);
linePaint.setStrokeCap(Paint.Cap.ROUND);
linePaint.setStrokeJoin(Paint.Join.ROUND);
linePaint.setColor(lineColor);
linePaint.setStrokeWidth(lineWidth);
rectPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
rectPaint.setColor(0xFF2B2A32);
rectPaint.setStyle(Paint.Style.FILL);
random = new Random();
initView();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = resolveSize((int) DEFAULT_WIDTH, widthMeasureSpec);
int height = resolveSize((int) DEFAULT_HEIGHT, heightMeasureSpec);
setMeasuredDimension(width, height);
}
private void stopAllAnim() {
status = false;
}
public void releaseAnimator() {
stopAllAnim();
// clearAll();
}
private void clearAll() {
//防止内存泄漏
lineList.clear();
}
@Override
public void startAnim() {
super.startAnim();
}
@Override
public void stopAnim() {
super.stopAnim();
stopAllAnim();
clearDraw();
}
//清空画布所有内容
private void clearDraw() {
Canvas canvas = null;
try {
canvas = getHolder().lockCanvas(null);
canvas.drawColor(backGroundColor);
clearAll();
} catch(Exception e) {
} finally {
if(canvas != null) {
getHolder().unlockCanvasAndPost(canvas);
}
}
}
/**
* 初始化View
*/
private void initView() {
surfaceHolder = getHolder();
surfaceHolder.addCallback(this);
setZOrderOnTop(true);
surfaceHolder.setFormat(PixelFormat.TRANSLUCENT);
setFocusable(true);
setKeepScreenOn(true);
setFocusableInTouchMode(true);
}
}使用也简单，直接在布局xml使用即可。
然后在对应的Fragment或Activity，需要启动动画的地方，调用接口方法startAnim()，在需要停止动画的地方调用接口方法stopAnim()即可。
以下是另一种的波浪动画：
public class WaveLineView extends RenderView {
private final int DEFAULT_SAMPLING_SIZE = 64;
private final float DEFAULT_OFFSET_SPEED = 250F;
private final int DEFAULT_SENSIBILITY = 5;
//采样点的数量，越高越精细，但是高于一定限度肉眼很难分辨，越高绘制效率越低
private int samplingSize;
//控制向右偏移速度，越小偏移速度越快
private float offsetSpeed;
//平滑改变的音量值
private float volume = 0;
//用户设置的音量，[0,100]
private int targetVolume = 50;
//每次平滑改变的音量单元
private float perVolume;
//灵敏度，越大越灵敏[1,10]
private int sensibility;
//背景色
private int backGroundColor = Color.WHITE;
//波浪线颜色
private int lineColor;
//粗线宽度
private int thickLineWidth;
//细线宽度
private int fineLineWidth;
private final Paint paint = new Paint();
private RectF rectF;
private Paint bgPaint;
{
//防抖动
paint.setDither(true);
//抗锯齿，降低分辨率，提高绘制效率
paint.setAntiAlias(true);
}
private List<Path> paths = new ArrayList<>();
{
for(int i = 0; i < 4; i++) {
paths.add(new Path());
}
}
//不同函数曲线系数
private float[] pathFuncs = {0.6f, 0.35f, 0.1f, -0.1f};
//采样点X坐标
private float[] samplingX;
//采样点位置映射到[-2,2]之间
private float[] mapX;
//画布宽高
private int width, height;
//画布中心的高度
private int centerHeight;
//振幅
private float amplitude;
//存储衰变系数
private SparseArray<Double> recessionFuncs = new SparseArray<>();
//连线动画结束标记
private boolean isPrepareLineAnimEnd = false;
//连线动画位移
private int lineAnimX = 0;
//渐入动画结束标记
private boolean isPrepareAlphaAnimEnd = false;
//渐入动画百分比值[0,1f]
private float prepareAlpha = 0f;
//是否开启准备动画
private boolean isOpenPrepareAnim = false;
private boolean isTransparentMode = false;
public WaveLineView(Context context) {
this(context, null);
}
public WaveLineView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public WaveLineView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttr(attrs);
}
private void initAttr(AttributeSet attrs) {
TypedArray t = getContext().obtainStyledAttributes(attrs, R.styleable.WaveLineView);
backGroundColor = t.getColor(R.styleable.WaveLineView_wlvBackgroundColor, Color.WHITE);
samplingSize = t.getInt(R.styleable.WaveLineView_wlvSamplingSize, DEFAULT_SAMPLING_SIZE);
lineColor = t.getColor(R.styleable.WaveLineView_wlvLineColor, Color.parseColor("#2ED184"));
thickLineWidth = (int) t.getDimension(R.styleable.WaveLineView_wlvThickLineWidth, 6);
fineLineWidth = (int) t.getDimension(R.styleable.WaveLineView_wlvFineLineWidth, 2);
offsetSpeed = t.getFloat(R.styleable.WaveLineView_wlvMoveSpeed, DEFAULT_OFFSET_SPEED);
sensibility = t.getInt(R.styleable.WaveLineView_wlvSensibility, DEFAULT_SENSIBILITY);
isTransparentMode = backGroundColor == Color.TRANSPARENT;
t.recycle();
checkVolumeValue();
checkSensibilityValue();
//将RenderView放到最顶层
setZOrderOnTop(true);
if(getHolder() != null) {
//使窗口支持透明度
getHolder().setFormat(PixelFormat.TRANSLUCENT);
}
rectF = new RectF();
bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
@Override
protected void doDrawBackground(Canvas canvas) {
//绘制背景
if(isTransparentMode) {
//启用CLEAR模式，所绘制内容不会提交到画布上。
canvas.drawColor(backGroundColor, PorterDuff.Mode.CLEAR);
} else {
bgPaint.setColor(backGroundColor);
rectF.set(0, 0, getMeasuredWidth(), getMeasuredHeight());
canvas.drawRoundRect(rectF, getMeasuredHeight() / 4, getMeasuredHeight() / 4, bgPaint);
}
}
@Override
public void release() {
super.release();
}
@Override
protected void onRender(Canvas canvas, long millisPassed) {
float offset = millisPassed / offsetSpeed;
if(null == samplingX || null == mapX || null == pathFuncs) {
initDraw(canvas);
}
if(lineAnim(canvas)) {
resetPaths();
softerChangeVolume();
//波形函数的值
float curY;
for(int i = 0; i <= samplingSize; i++) {
float x = samplingX[i];
curY = (float) (amplitude * calcValue(mapX[i], offset));
for(int n = 0; n < paths.size(); n++) {
//四条线分别乘以不同的函数系数
float realY = curY * pathFuncs[n] * volume * 0.01f;
paths.get(n).lineTo(x, centerHeight + realY);
}
}
//连线至终点
for(int i = 0; i < paths.size(); i++) {
paths.get(i).moveTo(width, centerHeight);
}
//绘制曲线
for(int n = 0; n < paths.size(); n++) {
if(n == 0) {
paint.setStrokeWidth(thickLineWidth);
paint.setAlpha((int) (255 * alphaInAnim()));
} else {
paint.setStrokeWidth(fineLineWidth);
paint.setAlpha((int) (100 * alphaInAnim()));
}
canvas.drawPath(paths.get(n), paint);
}
}
}
//检查音量是否合法
private void checkVolumeValue() {
if(targetVolume > 100) {
targetVolume = 100;
}
}
//检查灵敏度值是否合法
private void checkSensibilityValue() {
if(sensibility > 10) {
sensibility = 10;
}
if(sensibility < 1) {
sensibility = 1;
}
}
/**
* 使曲线振幅有较大改变时动画过渡自然
*/
private void softerChangeVolume() {
//这里减去perVolume是为了防止volume频繁在targetVolume上下抖动
if(volume < targetVolume - perVolume) {
volume += perVolume;
} else if(volume > targetVolume + perVolume) {
if(volume < perVolume * 2) {
volume = perVolume * 2;
} else {
volume -= perVolume;
}
} else {
volume = targetVolume;
}
}
/**
* 渐入动画
*
* @return progress of animation
*/
private float alphaInAnim() {
if(!isOpenPrepareAnim) {
return 1;
}
if(prepareAlpha < 1f) {
prepareAlpha += 0.02f;
} else {
prepareAlpha = 1;
}
return prepareAlpha;
}
/**
* 连线动画
*
* @param canvas
* @return whether animation is end
*/
private boolean lineAnim(Canvas canvas) {
if(isPrepareLineAnimEnd || !isOpenPrepareAnim) {
return true;
}
paths.get(0).moveTo(0, centerHeight);
paths.get(1).moveTo(width, centerHeight);
for(int i = 1; i <= samplingSize; i++) {
float x = i * lineAnimX / samplingSize;
paths.get(0).lineTo(x, centerHeight);
paths.get(1).lineTo(width - x, centerHeight);
}
paths.get(0).moveTo(width / 2, centerHeight);
paths.get(1).moveTo(width / 2, centerHeight);
lineAnimX += width / 60;
canvas.drawPath(paths.get(0), paint);
canvas.drawPath(paths.get(1), paint);
if(lineAnimX > width / 2) {
isPrepareLineAnimEnd = true;
return true;
}
return false;
}
/**
* 重置path
*/
private void resetPaths() {
for(int i = 0; i < paths.size(); i++) {
paths.get(i).rewind();
paths.get(i).moveTo(0, centerHeight);
}
}
//初始化参数
private void initParameters() {
lineAnimX = 0;
prepareAlpha = 0f;
isPrepareLineAnimEnd = false;
isPrepareAlphaAnimEnd = false;
samplingX = null;
}
@Override
public void startAnim() {
initParameters();
super.startAnim();
}
@Override
public void stopAnim() {
super.stopAnim();
clearDraw();
}
//清空画布所有内容
public void clearDraw() {
Canvas canvas = null;
try {
canvas = getHolder().lockCanvas(null);
canvas.drawColor(backGroundColor);
resetPaths();
for(int i = 0; i < paths.size(); i++) {
canvas.drawPath(paths.get(i), paint);
}
} catch(Exception e) {
} finally {
if(canvas != null) {
getHolder().unlockCanvasAndPost(canvas);
}
}
}
//初始化绘制参数
private void initDraw(Canvas canvas) {
width = canvas.getWidth();
height = canvas.getHeight();
centerHeight = height >> 1;
//振幅为高度的1/4
amplitude = height / 3.0f;
//适合View的理论最大音量值，和音量不属于同一概念
perVolume = sensibility * 0.35f;
//初始化采样点及映射
//这里因为包括起点和终点，所以需要+1
samplingX = new float[samplingSize + 1];
mapX = new float[samplingSize + 1];
//确定采样点之间的间距
float gap = width / (float) samplingSize;
//采样点的位置
float x;
for(int i = 0; i <= samplingSize; i++) {
x = i * gap;
samplingX[i] = x;
//将采样点映射到[-2，2]
mapX[i] = (x / (float) width) * 4 - 2;
}
paint.setStyle(Paint.Style.STROKE);
paint.setColor(lineColor);
paint.setStrokeWidth(thickLineWidth);
}
/**
* 计算波形函数中x对应的y值
* <p>
* 使用稀疏矩阵进行暂存计算好的衰减系数值，下次使用时直接查找，减少计算量
*
* @param mapX 换算到[-2,2]之间的x值
* @param offset 偏移量
* @return [-1, 1]
*/
private double calcValue(float mapX, float offset) {
int keyX = (int) (mapX * 1000);
offset %= 2;
double sinFunc = Math.sin(Math.PI * mapX - offset * Math.PI);
double recessionFunc;
if(recessionFuncs.indexOfKey(keyX) >= 0) {
recessionFunc = recessionFuncs.get(keyX);
} else {
recessionFunc = 4 / (4 + Math.pow(mapX, 4));
recessionFuncs.put(keyX, recessionFunc);
}
return sinFunc * recessionFunc;
}
/**
* the wave line animation move speed from left to right
* you can use negative number to make the animation from right to left
* the default value is 290F,the smaller, the faster
*
* @param moveSpeed
*/
public void setMoveSpeed(float moveSpeed) {
this.offsetSpeed = moveSpeed;
}
/**
* User set volume, [0,100]
*
* @param volume
*/
public void setVolume(int volume) {
if(Math.abs(targetVolume - volume) > perVolume) {
this.targetVolume = volume;
checkVolumeValue();
}
}
public void setBackGroundColor(int backGroundColor) {
this.backGroundColor = backGroundColor;
}
public void setLineColor(int lineColor) {
this.lineColor = lineColor;
}
/**
* Sensitivity, the bigger the more sensitive [1,10]
* the default value is 5
*
* @param sensibility
*/
public void setSensibility(int sensibility) {
this.sensibility = sensibility;
checkSensibilityValue();
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
