android 小船在 水波上移动
最近有这么个需求看图如下：
要求船动 ，波动，船随波动
实际实现效果如下，勉强通过
分析解决方案：
1：做成帧动画，发现切了200多张图，我也是醉了，为了避免OOM,崩溃的原因，舍弃，再说图片将近40M
2：做成MP4，播放视频发现，小了许多8M,呵呵，但是依旧很大，再尝试的过程中，避免不了视频初始化加载会黑一下，或闪一下的问题，舍弃
3：最后只能采用绘制
于是网上各种搜索，各种学习开始了：
1：先实现一条波，并让其波动
package test.vko.cn.ttapplication.weight;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
import test.vko.cn.ttapplication.R;
/**
* Created by JiaRH on 2015/11/19.
*/
public class ShipWaveView extends View {
Paint mPaint;
private int color = Color.parseColor("#50378DCC");
private int viewWidth;
private int viewHeight;
private int WAVE_HEIGHT = 40;
private List<PointF> mPointsList;
private int mWaveWidth = 350;
private int mLevelLine;
private Path mWavePath;
private boolean isMeasured;
/**
* 记录当前运动点的位置
*/
private float[] mCurrentPosition = new float[2];
private PathMeasure mPathMeature;
Bitmap boat;
ValueAnimator valueAnimator;
private int speed = 3;
private int moveLen = 0;
public ShipWaveView(Context context) {
this(context, null);
}
public ShipWaveView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShipWaveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initData(context);
initPaint();
}
private void initData(Context context) {
mPointsList = new ArrayList<>();
boat = BitmapFactory.decodeResource(getResources(), R.drawable.boat1);
}
private void initPaint() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStrokeWidth(1.5f);
mPaint.setStyle(Paint.Style.FILL);
mWavePath = new Path();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// int withSize = MeasureSpec.getSize(widthMeasureSpec);
// int heightSize = MeasureSpec.getSize(heightMeasureSpec);
// int withMode = MeasureSpec.getMode(widthMeasureSpec);
// int heightMode = MeasureSpec.getMode(heightMeasureSpec);
// if(withMode==MeasureSpec.AT_MOST&&heightMode==MeasureSpec.AT_MOST){
// withSize = getMeasuredWidth();
// }
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mWavePath.reset();
mWavePath.moveTo(mPointsList.get(0).x, mPointsList.get(0).y);
for (int i = 0; i < mPointsList.size() - 2; i = i + 2) {
mWavePath.quadTo(mPointsList.get(i + 1).x,
mPointsList.get(i + 1).y, mPointsList.get(i + 2)
.x, mPointsList.get(i + 2).y);
}
mWavePath.lineTo(viewWidth, 0);
mWavePath.lineTo(0, 0);
mWavePath.close();
mPathMeature = new PathMeasure(mWavePath, true);
drawPath(canvas);
}
private void drawPath(Canvas canvas) {
mPaint.setColor(color);
// mPaint.setColor(Color.TRANSPARENT);
// mPaint的Style是FILL，会填充整个Path区域
canvas.drawPath(mWavePath, mPaint);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
viewWidth = getWidth();
viewHeight = getHeight();
mLevelLine = viewHeight/2;
if (!isMeasured) {
isMeasured = true;
int n = (int) Math.round(viewWidth / mWaveWidth + 0.5);
// n=1;
// n个波形需要4n+1个点，但是我们要预留一个波形在左边隐藏区域，所以需要4n+5个点
for (int i = 0; i < (4 * n + 5 + 4); i++) {
// 从P0开始初始化到P4n+4，总共4n+5个点
float x = i * mWaveWidth / 4 - mWaveWidth;
// float x = i * mWaveWidth / 4;
float y = 0;
switch (i % 4) {
case 0:
case 2:
// 零点位于水位线上
y = mLevelLine;
break;
case 1:
// 往下波动的控制点
y = mLevelLine + WAVE_HEIGHT;
break;
case 3:
// 往上波动的控制点
y = mLevelLine - WAVE_HEIGHT;
break;
}
mPointsList.add(new PointF(x, y));
}
}
}
public void startMove() {
ValueAnimator moveValue = ValueAnimator.ofInt(0, mWaveWidth);
moveValue.setDuration(10000);
moveValue.setRepeatCount(-1);
moveValue.setRepeatMode(ValueAnimator.RESTART);
moveValue.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
moveLen += speed;
if (Math.abs(moveLen) >= mWaveWidth - 1) {
resetPoints();
}
movePoints();
invalidate();
}
private void movePoints() {
for (int i = 0; i < mPointsList.size(); i++) {
mPointsList.get(i).x += speed;
}
}
private void resetPoints() {
moveLen = 0;
for (int i = 0; i < mPointsList.size(); i++) {
mPointsList.get(i).x = (i * mWaveWidth / 4 - mWaveWidth);
}
}
});
moveValue.start();
}
public void setColor(int color) {
this.color = color;
}
public void setmWaveWidth(int mWaveWidth) {
this.mWaveWidth = mWaveWidth;
}
public void setSpeed(int speed) {
this.speed = speed;
}
public void setWAVE_HEIGHT(int WAVE_HEIGHT) {
this.WAVE_HEIGHT = WAVE_HEIGHT;
}
}
2：更具需要添加不同数量的波进来，可以设置波速，振幅，波长，颜色
package test.vko.cn.ttapplication.weight;
import android.content.Context;
import android.graphics.Color;
import android.util.AttributeSet;
import android.widget.FrameLayout;
import java.util.ArrayList;
import java.util.List;
/**
* Created by JiaRH on 2015/11/23.
*/
public class WaveMoveView extends FrameLayout {
private List<ShipWaveView> shipWaveViews;
private ShipWaveView swv0,swv1,swv2;
private ShipWaveViewSecond boatView;
public WaveMoveView(Context context) {
super(context);
init(context);
}
public WaveMoveView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public WaveMoveView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
shipWaveViews = new ArrayList<>();
swv0 = new ShipWaveView(context);
swv1 = new ShipWaveView(context);
swv2 = new ShipWaveView(context);
boatView = new ShipWaveViewSecond(context);
swv0.setSpeed(3);
swv1.setSpeed(5);
swv2.setSpeed(7);
swv0.setColor(Color.parseColor("#8800a9ff"));
swv1.setColor(Color.parseColor("#8800a9ff"));
swv2.setColor(Color.parseColor("#10a1ea"));
swv0.setWAVE_HEIGHT(40);
swv1.setWAVE_HEIGHT(35);
swv2.setWAVE_HEIGHT(50);
swv0.setmWaveWidth(550);
swv1.setmWaveWidth(600);
swv2.setmWaveWidth(700);
// swv0.startBallAni();
shipWaveViews.add(swv0);
shipWaveViews.add(swv1);
shipWaveViews.add(swv2);
for(ShipWaveView swv : shipWaveViews){
this.addView(swv);
swv.startMove();
}
this.addView(boatView);
}
}
3：绘制小船的路径
4：让小船动起来
package test.vko.cn.ttapplication.weight;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;
import java.util.ArrayList;
import java.util.List;
import test.vko.cn.ttapplication.R;
/**
* Created by JiaRH on 2015/11/19.
*/
public class ShipWaveViewSecond extends View {
Paint mPaint;
private int color = Color.parseColor("#378DCC");
private int viewWidth;
private int viewHeight;
private final int WAVE_HEIGHT = 20;
private List<PointF> mPointsList;
private int mWaveWidth = 300;
private int mLevelLine;
private Path mWavePath;
private boolean isMeasured;
/**
* 记录当前运动点的位置
*/
private float[] mCurrentPosition = new float[2];
private PathMeasure mPathMeature;
Bitmap boat;
ValueAnimator valueAnimator;
private int speed = 2;
private int moveLen = 0;
private float currentCircleX, currentCircleY;
private float radius = 5;
ValueAnimator circleValue;
public ShipWaveViewSecond(Context context) {
this(context, null);
}
public ShipWaveViewSecond(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShipWaveViewSecond(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initData(context);
initPaint();
postDelayed(new Runnable() {
@Override
public void run() {
startBallAni();
}
}, 300);
}
private void initData(Context context) {
mPointsList = new ArrayList<>();
boat = BitmapFactory.decodeResource(getResources(), R.drawable.boat2);
}
private void initPaint() {
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setStrokeWidth(1.5f);
mPaint.setStyle(Paint.Style.STROKE);
mWavePath = new Path();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mWavePath.reset();
mWavePath.moveTo(mPointsList.get(0).x, mPointsList.get(0).y);
for (int i = 0; i < mPointsList.size() - 2; i = i + 2) {
mWavePath.quadTo(mPointsList.get(i + 1).x,
mPointsList.get(i + 1).y, mPointsList.get(i + 2)
.x, mPointsList.get(i + 2).y);
}
// mWavePath.lineTo(viewWidth, 0);
// mWavePath.lineTo(0, 0);
// mWavePath.close();
mPathMeature = new PathMeasure(mWavePath, true);
drawPath(canvas);
drawBoat(canvas);
}
private void drawPath(Canvas canvas) {
mPaint.setColor(Color.TRANSPARENT);
// mPaint的Style是FILL，会填充整个Path区域
canvas.drawPath(mWavePath, mPaint);
}
private void drawBoat(Canvas canvas) {
mPaint.setColor(Color.BLUE);
if (mCurrentPosition[0] > viewWidth) {
mCurrentPosition[0] = viewWidth;
resetAni();
}
canvas.drawBitmap(boat, mCurrentPosition[0], mCurrentPosition[1], mPaint);
}
private void resetAni() {
//
if (valueAnimator==null)return;
if (valueAnimator.isRunning()) {
valueAnimator.cancel();
startBallAni();
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
viewWidth = getWidth();
viewHeight = getHeight();
mLevelLine = viewHeight/2 - 110;
currentCircleX = (float) Math.floor(Math.random() * viewWidth);
currentCircleY = mLevelLine;
if (!isMeasured) {
isMeasured = true;
int n = (int) Math.round(viewWidth / mWaveWidth + 0.5);
// n=1;
// n个波形需要4n+1个点，
for (int i = 0; i < (4 * n)+5; i++) {
// 从P0开始初始化到P4n+4，总共4n+5个点
// float x = i * mWaveWidth / 4 - mWaveWidth;
float x = i * mWaveWidth / 4-boat.getWidth();
float y = 0;
switch (i % 4) {
case 0:
case 2:
// 零点位于水位线上
y = mLevelLine;
break;
case 1:
// 往下波动的控制点
y = mLevelLine + WAVE_HEIGHT;
break;
case 3:
// 往上波动的控制点
y = mLevelLine - WAVE_HEIGHT;
break;
}
mPointsList.add(new PointF(x, y));
/**
* 初始化小球的位置
*/
mCurrentPosition[0] = mPointsList.get(0).x;
mCurrentPosition[1] = mPointsList.get(0).y;
}
}
}
/**
* 开始小球的运动
*/
private void startBallAni() {
if (mPathMeature==null)return;
valueAnimator = ValueAnimator.ofFloat(0, mPathMeature.getLength());
valueAnimator.setDuration(25000);
valueAnimator.setRepeatMode(ValueAnimator.RESTART);
valueAnimator.setRepeatCount(-1);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mPathMeature.getPosTan(value, mCurrentPosition, null);
postInvalidate();
}
});
valueAnimator.start();
}
}
5：使用方法：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="test.vko.cn.ttapplication.activitys.ShipWaveActivity">
<ImageView
android:id="@+id/bgg"
android:layout_alignParentTop="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:background="@drawable/bgg"/>
<test.vko.cn.ttapplication.weight.WaveMoveView
android:id="@+id/waveView"
android:layout_alignBottom="@+id/bgg"
android:layout_width="fill_parent"
android:layout_height="90dp" />
</LinearLayout>
感谢如下文章及其作者：
参考文章：
http://blog.csdn.net/zhongkejingwang/article/details/38556891（分析的很NB）
http://blog.csdn.net/tianjian4592/article/details/44222565