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;
  }
}

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