android 自定义旋转动画效果,Android自定义View实现叶子飘动旋转效果（四）

上一篇实现了叶子飘动功能，《Android自定义叶子飘动》 现在实现旋转效果

要实现这个效果，要在之前的功能上添加2个功能

1、通过matrix.postTranslate(int x, int y)在添加在Y轴上滑动

2、通过matrix.postRotate(float degrees, float px, float py)实现叶子旋转

代码实现

1、获取Y坐标

private float getMatrixY() {

float w = (float) ((float) 2 * Math.PI / width);

int y = (int) (18 * Math.sin(w * getMatrixX())) + (height-mLeafHeight)/2;

return y;

}

math.sin(Math.PI....)的取值范围貌似是-1~1之间。通过X坐标在整个width的比例，获取到Y坐标的比例。

这里方法有很多，我这边叶子Y坐标默认在Y轴中间，然后上下+-18px实现在Y轴的滑动，18滑动浮动比较大了

public LeafView(Context context, AttributeSet attrs) {

super(context, attrs);

mResources = getResources();

bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();

leafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null))).getBitmap();

mLeafHeight = leafBitmap.getWidht();

bgPaint = new Paint();

bgPaint.setColor(mResources.getColor(R.color.bg_color));

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

width = w;

height = h;

bgDestRect = new Rect(0, 0 , width, height);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

bgRect = new RectF(0, 0 , width, height);

//添加黄色背景

canvas.drawRect(bgRect, bgPaint);

//添加背景图片

canvas.drawBitmap(bgBitmap, null, bgDestRect, null);

//添加叶子

Matrix matrix = new Matrix();

matrix.postTranslate(getMatriX(), getMatrixY);

canvas.drawBitmap(leafBitmap, new Matrix(), new Paint());

//重复调用onDraw()

postInvalidate();

}

long cycleTime = 5000; //叶子滑动一周的时间5秒

long startTime = 0; //叶子滑动开始时间

private float getMatriX() {

float betweenTime = startTime - System.currentTimeMillis();

//周期结束再加一个cycleTime

if(betweenTime < 0) {

startTime = System.currentTimeMillis() + cycleTime;

betweenTime = cycleTime;

}

//通过时间差计算出叶子的坐标

float fraction = (float) betweenTime / cycleTime;

float x = (int)(width * fraction);

return x;

}

private float getMatrixY() {

float w = (float) ((float) 2 * Math.PI / width);

int y = (int) (18 * Math.sin(w * getMatrixX())) + (height-mLeafHeight)/2;

return y;

}

看下效果就这样，在Y轴上实现上下浮动，如果要浮动小点，可以把18改小

2、实现旋转

主要通过matrix.postRotate(float degrees, float px, float py)

degrees就是角度(0~360)，px，py就是图片的中心点

private int getRotate() {

float scale = ((startTime - System.currentTimeMillis())%cycleTime)/ (float)cycleTime;

int rotate = (int)(scale * 360);

return rotate;

}

同样，通过当前叶子在X轴的比例，来计算出旋转的角度(0~360)

完整代码：

public class LeafView extends View {

private Resources mResources;

private Bitmap mLeafBitmap, bgBitmap;

private int width, height;

private int mLeafWidth,mLeafHeight;

private Paint bgPaint;

private RectF bgRect;

private Rect bgDestRect;

public LeafView(Context context, AttributeSet attrs) {

super(context, attrs);

mResources = getResources();

mLeafBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf, null)).getBitmap();

mLeafWidth = mLeafBitmap.getWidht();

mLeafHeight = mLeafBitmap.getHeight();

bgBitmap = ((BitmapDrawable) mResources.getDrawable(R.drawable.leaf_kuang, null)).getBitmap();

bgPaint = new Paint();

bgPaint.setColor(mResources.getColor(R.color.bg_color));

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

width = w;

height = h;

bgDestRect = new Rect(0, 0 , width, height);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

bgRect = new RectF(0, 0 , width, height);

//添加黄色白金

canvas.drawRect(bgRect, bgPaint);

//添加背景图片

canvas.drawBitmap(bgBitmap, null, bgDestRect, null);

canvas.save();

Matrix matrix = new Matrix();

//添加滑动

matrix.postTranslate(getMatrixX(), getMatrixY());

//添加旋转

matrix.postRotate(getRotate(), getMatrixX() + mLeafWidth / 2, getMatrixY() + mLeafHeight / 2);

canvas.drawBitmap(mLeafBitmap, matrix, new Paint());

canvas.restore();

postInvalidate();

}

long cycleTime = 5000; //叶子滑动一周的时间5秒

long startTime = 0;

private float getMatrixX() {

float betweenTime = startTime - System.currentTimeMillis();

//周期结束再加一个cycleTime

if(betweenTime < 0) {

startTime = System.currentTimeMillis() + cycleTime;

betweenTime = cycleTime;

}

//通过时间差计算出叶子的坐标

float fraction = (float) betweenTime / cycleTime;

float x = (int)(width * fraction);

return x;

}

private float getMatrixY() {

float w = (float) ((float) 2 * Math.PI / width);

int y = (int) (18 * Math.sin(w * getMatrixX())) + (height-mLeafHeight)/2;

return y;

}

private int getRotate() {

float scale = ((startTime - System.currentTimeMillis())%cycleTime)/ (float)cycleTime;

int rotate = (int)(scale * 360);

return rotate;

}

}

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