Android自定义View实现叶子飘动旋转效果（四）_网络技术

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

发布时间 - 2026-01-11 00:19:20 点击率：次

上一篇实现了叶子飘动功能，《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 # View # 飘动 # 旋转 # Android自定义View实现QQ运动积分转盘抽奖功能 # Android 自定View实现仿QQ运动步数圆弧及动画效果 # Android自定义View仿微博运动积分动画效果 # Android UI之ImageView实现图片旋转和缩放 # Android使用RotateImageView 旋转ImageView # Android UI设计系列之ImageView实现ProgressBar旋转效果（1） # Android自定义View叶子旋转完整版（六） # Android自定义View实现QQ音乐中圆形旋转碟子 # Android中imageView图片放大缩小及旋转功能示例代码 # Android自定义View图片按Path运动和旋转 # 计算出 # 再加 # 中心点 # 有很多 # 要在 # 自定义 # 大了 # 上一篇 # 大家多多 # 我这边 # 实现了 # 改小 # 在整个 # height # return # getHeight # math # mLeafHeight # width # sin

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：使用 YAML 路径扁平化映射简化动态解析

下一篇：如何在 Destoon 平台上添加和管理产品信息？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：使用 YAML 路径扁平化映射简化动态解析

下一篇：如何在 Destoon 平台上添加和管理产品信息？