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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 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运动和旋转
相关文章
Android Filterable实现Recyclerview筛选功能的示例代码
这篇文章主要介绍了Android Filterable实现Recyclerview筛选功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2021-02-02解决Android自定义view获取attr中自定义颜色的问题
这篇文章主要介绍了Android自定义view获取attr中自定义颜色的问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12
最新评论