Android实现随触摸移动而变化的效果

• Android可以做很多有意思的事情，而这正是我喜欢她的原因。
  今天会做一个在屏幕上随着手指移动而变化的效果。

步骤如下

首先，我们要自定义一个View组件，而这个组件就是在之后会用到的屏幕上移动的小组件。然后我们在一个布局上添加这个View，并且给此View添加onTouch触摸事件。
此外，此组件内也要重写onDraw方法，对此组件进行绘制。

• 废话不说，代码见真章：
  class GirlView extends View{
  public float bitmapX;

      public float bitmapY;
  
      public Bitmap bitmap= BitmapFactory.decodeResource(getResources(), R.drawable.s_1);
  
      public GirlView(Context context) {
          super(context);
          this.bitmapX = 0;
          this.bitmapY = 60;
      }
  
  
      @Override
      protected void onDraw(Canvas canvas) {
          super.onDraw(canvas);
  
          Paint paint = new Paint();//画笔
  
          canvas.drawBitmap(bitmap,bitmapX,bitmapY,paint);//作画
  
          if (bitmap.isRecycled()) {
              bitmap.recycle();//回收
          }
      }
  }
  

绘制三步骤：
1. 准备画板，也就是：Canvas canvas对象
2. 准备画布，
bitmap=BitmapFactory.decodeResource(getResources(), R.drawable.s_1);
3. 画笔准备，Paint paint = new Paint();
4. 然后开始绘制就行了。

• 接着，再奉上Activity内的代码：
  public class FrameActivity extends AppCompatActivity {

      private FrameLayout frameLayout;
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_frame);
  
          frameLayout = (FrameLayout) findViewById(R.id.main_frame);
          final GirlView girlView = new GirlView(this);
  
          girlView.setOnTouchListener(new View.OnTouchListener() {
              float startX;
              float startY;
              float moveX;
              float moveY;
  
              int i=0;
              @Override
              public boolean onTouch(View v, MotionEvent event) {
                  switch (event.getAction()) {
                      case MotionEvent.ACTION_DOWN:
                          startX = event.getX()-200;
                          startY = event.getY()-250;
                          girlView.bitmapX = startX;
                          girlView.bitmapY = startY;
  
  
                          girlView.invalidate();
                          break;
                      case MotionEvent.ACTION_MOVE:
                          moveX = event.getX();
                          moveY = event.getY();
  
                          /*减去的200和250分别指代图片本来的宽和高。
                          * Touch事件的时候，手指的落点会在此View的左上角，做减法的原因
                          * 就是要让手指落点到View的中心*/
                          if (Math.abs(moveX-startX)>50|| Math.abs(moveY-startY)>50) {
                              girlView.bitmapX = moveX-200;
                              girlView.bitmapY = moveY-250;
  
                              i++;
                              girlView.bitmap = getMove(i % 8);
                              girlView.invalidate();//重新绘制
  
                              startX=moveX;
                              startY = moveY;
                          }
  
                  }
                  return true;
              }
          });
  
          frameLayout.addView(girlView);
      }
  
      /*得到不同的画布*/
      public Bitmap getMove(int i) {
          Bitmap bitmap = BitmapFactory.decodeResource(getResources(), getDrawID(i));
          return bitmap;
      }
  
      public int getDrawID(int i) {
          int drawID = R.drawable.s_1;
          switch (i) {
              case 0:
                  drawID =R.drawable.s_1;
                  break;
              case 1:
                  drawID =R.drawable.s_2;
                  break;
              case 2:
                  drawID =R.drawable.s_3;
                  break;
              case 3:
                  drawID =R.drawable.s_4;
                  break;
              case 4:
                  drawID =R.drawable.s_5;
                  break;
              case 5:
                  drawID =R.drawable.s_6;
                  break;
              case 6:
                  drawID =R.drawable.s_7;
                  break;
              case 7:
                  drawID =R.drawable.s_8;
                  break;
          }
          return drawID;
      }
  

  分析如下：
  这里我们首先准备八张图，这八张图连起来就会形成一个动画效果。
  在oTouch的方法内，我们设定了这样一个条件，只要手指移动的距离，在X轴和Y轴上不管哪一个超过50的话，就会让GrilView切换一张画布。
  同时，为了保证手指落下的点在组件内部，要减去相应地距离。因为如果直接让moveX和moveY的值等于GrilView的x和y的值的话，这样手指的落点就会在此组件的左上角，那样效果不是很好。
  最后，切记onTouch方法要返回true。

以上