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

2019-12-12 03:18:18

字体：大中小

来源：转载

供稿：网友

上一篇实现了叶子飘动功能，《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;  }}

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

上一篇：android中RecyclerView自定义分割线实现

下一篇：Android自定义View实现多片叶子旋转滑动（五）