canvas教程

Canvas与ValueAnimator(2)

字号+ 作者:H5之家 来源:H5之家 2017-04-28 18:00 我要评论( )

平移,同时使用new Rect方法设置矩形 [代码]java代码:canvas.translate(200,200);mPaint.setColor(Color.BLUE);canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint); 缩放 [代码]java代

矩形


平移,同时使用new Rect方法设置矩形

[代码]java代码: canvas.translate(200,200); mPaint.setColor(Color.BLUE); canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);


平移

缩放

[代码]java代码: canvas.scale(0.5f,0.5f); mPaint.setColor(Color.BLUE); canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);


缩放

旋转

[代码]java代码: canvas.rotate(90); mPaint.setColor(Color.BLUE); canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);


旋转

错切

[代码]java代码: canvas.skew(1,0.5f); mPaint.setColor(Color.BLUE); canvas.drawRect(new RectF(-mWidth/8,-mHeight/8,mWidth/8,mHeight/8),mPaint);


错切

4、画布的保存和恢复

save():用于保存canvas的状态,之后可以调用canvas的平移、旋转、缩放、错切、裁剪等操作。
restore():在save之后调用,用于恢复之前保存的画布状态,从而在之后的操作中忽略save与restore之间的画布变化。

[代码]java代码: float point = Math.min(mWidth,mHeight)*0.06f/2; float r = point*(float) Math.sqrt(2); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(Color.BLACK); canvas.save(); canvas.rotate(90); canvas.drawCircle(200,0,r,mPaint);//圆心(200,0) canvas.restore(); mPaint.setColor(Color.BLUE); canvas.drawCircle(200,0,r,mPaint);//圆心(200,0)


圆

保存画布,旋转90°,绘制一个圆,之后恢复画布,使用相同参数再绘制一个圆。可以看到在恢复画布前后,相同参数绘制的圆,分别显示在了坐标系的不同位置。

二、豆瓣加载动画

绘制2个点和一个半圆弧

[代码]java代码: mPaint.setStyle(Paint.Style.STROKE);//设置画笔样式为描边,如果已经设置,可以忽略 mPaint.setColor(Color.GREEN); mPaint.setStrokeWidth(10); float point = Math.min(mWidth,mHeight)*0.2f/2; float r = point*(float) Math.sqrt(2); RectF rectF = new RectF(-r,-r,r,r); canvas.drawArc(rectF,0,180,false,mPaint); canvas.drawPoints(new float[]{ point,-point ,-point,-point },mPaint);


笑脸

但是豆瓣表情在旋转的过程中,是一个链接着两个点的270°的圆弧

[代码]java代码: mPaint.setColor(Color.GREEN); mPaint.setStrokeWidth(10); float point = Math.min(mWidth,mHeight)*0.2f/2; float r = point*(float) Math.sqrt(2); RectF rectF = new RectF(-r,-r,r,r); canvas.drawArc(rectF,-180,270,false,mPaint);


圆弧

这里使用ValueAnimator类,来进行演示(实际上应该是根据touch以及网络情况来进行加载的变化)

简单说下ValueAnimator类:

API 简介

ofFloat(float… values) 构建ValueAnimator,设置动画的浮点值,需要设置2个以上的值

setDuration(long duration) 设置动画时长,默认的持续时间为300毫秒。

setInterpolator(TimeInterpolator value) 设置动画的线性非线性运动,默认AccelerateDecelerateInterpolator

addUpdateListener(ValueAnimator.AnimatorUpdateListener listener) 监听动画属性每一帧的变化

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 21天学习android开发教程之SurfaceView与多线程的混搭

    21天学习android开发教程之SurfaceView与多线程的混搭

    2017-04-27 12:00

  • Android开发基本常识及技巧

    Android开发基本常识及技巧

    2017-04-13 16:02

  • H5拍照应用开发经历的那些坑儿

    H5拍照应用开发经历的那些坑儿

    2017-04-09 18:05

  • Android开发学习之ImageView手势拖拽、缩放、旋转

    Android开发学习之ImageView手势拖拽、缩放、旋转

    2017-03-27 11:00

网友点评
=