溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Android自定義View實(shí)現(xiàn)葉子飄動(dòng)旋轉(zhuǎn)效果（四）

發(fā)布時(shí)間：2020-10-12 05:19:44 來(lái)源：腳本之家 閱讀：194 作者：罔少年 欄目：移動(dòng)開發(fā)

上一篇實(shí)現(xiàn)了葉子飄動(dòng)功能，《Android自定義葉子飄動(dòng)》 現(xiàn)在實(shí)現(xiàn)旋轉(zhuǎn)效果

Android自定義View實(shí)現(xiàn)葉子飄動(dòng)旋轉(zhuǎn)效果（四）

要實(shí)現(xiàn)這個(gè)效果，要在之前的功能上添加2個(gè)功能

1、通過(guò)matrix.postTranslate(int x, int y)在添加在Y軸上滑動(dòng)

2、通過(guò)matrix.postRotate(float degrees, float px, float py)實(shí)現(xiàn)葉子旋轉(zhuǎn)

代碼實(shí)現(xiàn)

1、獲取Y坐標(biāo)

 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之間。通過(guò)X坐標(biāo)在整個(gè)width的比例，獲取到Y(jié)坐標(biāo)的比例。

這里方法有很多，我這邊葉子Y坐標(biāo)默認(rèn)在Y軸中間，然后上下+-18px實(shí)現(xiàn)在Y軸的滑動(dòng)，18滑動(dòng)浮動(dòng)比較大了

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());
    //重復(fù)調(diào)用onDraw()
    postInvalidate();
  }

  long cycleTime = 5000;  //葉子滑動(dòng)一周的時(shí)間5秒
  long startTime = 0;   //葉子滑動(dòng)開始時(shí)間
  private float getMatriX() {
    float betweenTime = startTime - System.currentTimeMillis();
    //周期結(jié)束再加一個(gè)cycleTime
    if(betweenTime < 0) {
      startTime = System.currentTimeMillis() + cycleTime;
      betweenTime = cycleTime;
    }
    //通過(guò)時(shí)間差計(jì)算出葉子的坐標(biāo)
    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軸上實(shí)現(xiàn)上下浮動(dòng)，如果要浮動(dòng)小點(diǎn)，可以把18改小

Android自定義View實(shí)現(xiàn)葉子飄動(dòng)旋轉(zhuǎn)效果（四）

2、實(shí)現(xiàn)旋轉(zhuǎn)

主要通過(guò)matrix.postRotate(float degrees, float px, float py)

degrees就是角度（0~360），px，py就是圖片的中心點(diǎn)

  private int getRotate() {
    float scale = ((startTime - System.currentTimeMillis())%cycleTime)/ (float)cycleTime;
    int rotate = (int)(scale * 360);
    return rotate;
  }

同樣，通過(guò)當(dāng)前葉子在X軸的比例，來(lái)計(jì)算出旋轉(zhuǎn)的角度(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();
    //添加滑動(dòng)
    matrix.postTranslate(getMatrixX(), getMatrixY());
    //添加旋轉(zhuǎn)
    matrix.postRotate(getRotate(), getMatrixX() + mLeafWidth / 2, getMatrixY() + mLeafHeight / 2);
    canvas.drawBitmap(mLeafBitmap, matrix, new Paint());
    canvas.restore();
    postInvalidate();

  }
  long cycleTime = 5000;  //葉子滑動(dòng)一周的時(shí)間5秒
  long startTime = 0;
  private float getMatrixX() {
    float betweenTime = startTime - System.currentTimeMillis();
    //周期結(jié)束再加一個(gè)cycleTime
    if(betweenTime < 0) {
      startTime = System.currentTimeMillis() + cycleTime;
      betweenTime = cycleTime;
    }
    //通過(guò)時(shí)間差計(jì)算出葉子的坐標(biāo)
    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;
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手