HackSeven Canvas上的动画

当自定义View的时候，可以利用Canvas给View添加一些动画效果。

下面的例子，是在屏幕上绘制一个红色的小方块，这个小方块会在屏幕上面“乱跳”。

知识点

使用到的知识点：

(1) 在View的子类的draw()中调用invalidate()，可以让View对象一直保持重绘状态，从而可以使Canvas一直处于绘画过程中。

(2) Canvas的绘制功能，例如绘制Rect、Circle、Path等。

(3) 小方块碰撞屏幕边缘的算法。

实现

小方块视图。

继承View类，重写onDraw()方法，并提供一些setter和getter方法，用于设置小方块的属性。判断碰撞事件的逻辑在moveTo()方法中。代码如下：

 public class Rectangle extends View {
     public static final int MAX_SIZE = 40;
     private static final int ALPHA = 255;
     private int mCoordX = 0;
     private int mCoordY = 0;
     private int mRealSize = 40;
     private int mSpeedX = 3;
     private int mSpeedY = 3;
 
     private boolean goRight = true;
     private boolean goDown = true;
     private DrawView mDrawView;
 
     private Paint mInnerPaint;
     private RectF mDrawRect;
 
     public Rectangle(Context context, DrawView drawView) {
         super(context);
         mDrawView = drawView;
 
         mInnerPaint = new Paint();
 
         mDrawRect = new RectF();
 
         /* Red is default */
         mInnerPaint.setARGB(ALPHA, 255, 0, 0);
         mInnerPaint.setAntiAlias(true);
     }
 
     public void setARGB(int a, int r, int g, int b) {
         mInnerPaint.setARGB(a, r, g, b);
     }
 
     public void setX(int newValue) {
         mCoordX = newValue;
     }
 
     public float getX() {
         return mCoordX;
     }
 
     public void setY(int newValue) {
         mCoordY = newValue;
     }
 
     public float getY() {
         return mCoordY;
     }
 
     public void move() {
         moveTo(mSpeedX, mSpeedY);
     }
 
     private void moveTo(int goX, int goY) {
 
         // check the borders, and set the direction if a border has reached
         if (mCoordX > (mDrawView.width - MAX_SIZE)) {
             goRight = false;
         }
 
         if (mCoordX < 0) {
             goRight = true;
         }
 
         if (mCoordY > (mDrawView.height - MAX_SIZE)) {
             goDown = false;
         }
         if (mCoordY < 0) {
             goDown = true;
         }
 
         // move the x and y
         if (goRight) {
             mCoordX += goX;
         } else {
             mCoordX -= goX;
         }
         if (goDown) {
             mCoordY += goY;
         } else {
             mCoordY -= goY;
         }
 
     }
 
     public int getSpeedX() {
         return mSpeedX;
     }
 
     public void setSpeedX(int speedX) {
         mSpeedX = speedX;
     }
 
     public int getmSpeedY() {
         return mSpeedY;
     }
 
     public void setSpeedY(int speedY) {
         mSpeedY = speedY;
     }
 
     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
 
         mDrawRect.set(mCoordX, mCoordY, mCoordX + mRealSize, mCoordY
                 + mRealSize);
         canvas.drawRoundRect(mDrawRect, 0, 0, mInnerPaint);
 
     }
 
     public void setSize(int newSize) {
         mRealSize = newSize;
     }
 
     public int getSize() {
         return mRealSize;
     }
 }

外层视图。

小方块是一个独立的视图，这里不直接把小方块显示在Actiity中，在它的外面又“包”了一层。代码如下：

 public class DrawView extends View {
     private Rectangle mRectangle;
 
     public int width;
 
     public int height;
 
     public DrawView(Context context) {
         super(context);
         mRectangle = new Rectangle(context, this);
         mRectangle.setARGB(255, 255, 0, 0);
         mRectangle.setSpeedX(3);
         mRectangle.setSpeedY(3);
 
     }
 
     @SuppressLint("WrongCall")
     @Override
     protected void onDraw(Canvas canvas) {
         super.onDraw(canvas);
         invalidate();
 
         mRectangle.move();
         mRectangle.onDraw(canvas);
 
     }
 
 }

主界面。

获取屏幕的尺寸，并把相应的尺寸赋值给DrawView对象。最后，显示DrawView对象。代码如下：

 public class MainActivity extends Activity {
 
     private DrawView mDrawView;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
 
         Display display = getWindowManager().getDefaultDisplay();
         mDrawView = new DrawView(this);
         mDrawView.height = display.getHeight();
         mDrawView.width = display.getWidth();
         setContentView(mDrawView);
     }
 
 }

源码下载：