2014-11-6Android学习------苹果切水果游戏手指滑动效果实现--------动画Animation学习篇

wust小吴

发布于 2022-03-07 14:20:28

35500

代码可运行

文章被收录于专栏：风吹杨柳风吹杨柳

运行总次数：0

代码可运行

我学习Android都是结合源代码去学习，这样比较直观，非常清楚的看清效果，觉得很好，今天的学习源码是网上找的源码百度搜就知道很多下载的地方网上源码的名字叫：水果忍者点击屏幕效果.zip 我的博客写的比较乱，如果本篇文章没有看懂，

请先看上篇文章，地址：http://blog.csdn.net/u014737138/article/details/40859913

实现的原理就是一个视图，在视图上用手指画，主要的就是坐标处理，

继承Android.view.View，构造函数，重载onDraw(),手指触摸屏幕引发的坐标变换处理

主要是上面的几个步骤。接下来一步一步解析：

1.继承类

public class GestureView extends View {

2.主要的变量定义

	private Paint paint;

	private float startX = Float.NaN;// 手指开始画的坐标
	private float startY = Float.NaN;
	private float endX = Float.NaN;// 手指结束的坐标
	private float endY = Float.NaN;

	// 下层view
	// private View viewer;
	private static final int gestureColor = Color.rgb(153, 153, 153);// 手指画的颜色
	private static final int alpha = 220;// 透明度
	private static final int alpha_full = 255;
	// 刀锋长度
	private static final int shape_length = 80;
	// 刀锋截短时间
	private static final int shape_cut_time = 150;

关于final关键词可以看我前面的一篇java文章， http://blog.csdn.net/u014737138/article/details/40748485

3.构造函数

	public GestureView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		paint = new Paint();//画笔初始化
		paint.setStyle(Paint.Style.FILL);//设置画笔样式
	}

4.重载onDraw（Canvas canvas)

	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		// NaN，是Not a Number的缩写 NaN 用于处理计算中出现的错误情况，比如 0.0 除以 0.0 或者求负数的平方根
		if (!Float.isNaN(startX) && !Float.isNaN(endY)) {
			float gap = getGap(startX, startY, endX, endY);
			float w = gap / 10;
			// 背景shape外侧点高度
			float h = w > 7 ? 7 : w;
			// 填充shape外侧点高度
			float h2 = h * 2 / 3;

			double length = Math.pow(Math.pow(w, 2) + Math.pow((h), 2), 0.5);
			double length2 = Math.pow(Math.pow(w, 2) + Math.pow((h2), 2), 0.5);

			double ang1_1 = Math.atan((endY - startY) / (endX - startX));
			double ang1_2 = Math.atan(h / w);
			double angle1_1 = ang1_1 + ang1_2;
			double angle1_2 = ang1_1 - ang1_2;

			double ang2_2 = Math.atan(h2 / w);
			double angle2_1 = ang1_1 + ang2_2;
			double angle2_2 = ang1_1 - ang2_2;
			if (endX > startX) {
				float xx1 = endX - (float) (length * Math.cos(angle1_1));
				float yy1 = endY - (float) (length * Math.sin(angle1_1));
				float xx2 = endX - (float) (length * Math.cos(angle1_2));
				float yy2 = endY - (float) (length * Math.sin(angle1_2));

				float xx12 = endX - (float) (length2 * Math.cos(angle2_1));
				float yy12 = endY - (float) (length2 * Math.sin(angle2_1));
				float xx22 = endX - (float) (length2 * Math.cos(angle2_2));
				float yy22 = endY - (float) (length2 * Math.sin(angle2_2));

				Path backPath = new Path();
				backPath.moveTo(startX, startY);
				backPath.lineTo(xx1, yy1);
				backPath.lineTo(endX, endY);
				backPath.lineTo(xx2, yy2);
				backPath.close();

				Path fillPath = new Path();
				fillPath.moveTo(startX, startY);
				fillPath.lineTo(xx12, yy12);
				fillPath.lineTo(endX, endY);
				fillPath.lineTo(xx22, yy22);
				fillPath.close();

				paint.setColor(Color.RED);
				paint.setAlpha(alpha);
				canvas.drawPath(backPath, paint);

				paint.setColor(Color.RED);
				paint.setAlpha(alpha_full);
				canvas.drawPath(fillPath, paint);
			} else {
				float xx1 = endX + (float) (length * Math.cos(angle1_1));
				float yy1 = endY + (float) (length * Math.sin(angle1_1));
				float xx2 = endX + (float) (length * Math.cos(angle1_2));
				float yy2 = endY + (float) (length * Math.sin(angle1_2));

				float xx12 = endX + (float) (length2 * Math.cos(angle2_1));
				float yy12 = endY + (float) (length2 * Math.sin(angle2_1));
				float xx22 = endX + (float) (length2 * Math.cos(angle2_2));
				float yy22 = endY + (float) (length2 * Math.sin(angle2_2));

				Path backPath = new Path();
				backPath.moveTo(startX, startY);
				backPath.lineTo(xx1, yy1);
				backPath.lineTo(endX, endY);
				backPath.lineTo(xx2, yy2);
				backPath.close();

				Path fillPath = new Path();
				fillPath.moveTo(startX, startY);
				fillPath.lineTo(xx12, yy12);
				fillPath.lineTo(endX, endY);
				fillPath.lineTo(xx22, yy22);
				fillPath.close();

				paint.setColor(Color.WHITE);
				paint.setAlpha(alpha);
				canvas.drawPath(backPath, paint);

				paint.setColor(Color.WHITE);
				paint.setAlpha(alpha_full);
				canvas.drawPath(fillPath, paint);
			}
		}
	}

看下有些数学方法的意义：

1）.Java.lang.Float.isNaN()方法用法实例教程 - 此方法如果此对象所表示的值是NaN，返回true，否则返回false

什么叫做NaN? ------------not a number

NaN 用于处理计算中出现的错误情况，比如 0.0 除以 0.0 或者求负数的平方根。由上面的表中可以看出，对于单精度浮点数，NaN 表示为指数为 emax + 1 = 128（指数域全为 1），且尾数域不等于零的浮点数。IEEE 标准没有要求具体的尾数域，所以 NaN 实际上不是一个，而是一族。

有个例子说明这个问题：

实例

下面的例子说明了如何使用java.lang.Float.isNaN()方法。

package com.yiibai;

import java.lang.*;

public class FloatDemo {

   public static void main(String[] args) {

     Float f1 = new Float(-1.0/0.0);
     Float f2 = new Float(0.0/0.0);
  
     // returns true if this Float value is a Not-a-Number(NaN), else false
     System.out.println(f1 + " = " + f1.isNaN());
  
     System.out.println(f2 + " = " + f2.isNaN());
   }
}

让我们来编译和运行上面的程序，这将产生以下结果：

-Infinity = false
NaN = true

2）.java.lang.Math.pow(double a, double b) 返回的第一个参数的值提高到第二个参数的幂

下面的例子说明了如何使用lang.Math.pow()方法。

package com.yiibai;

import java.lang.*;

public class MathDemo {

   public static void main(String[] args) {

      // get two double numbers
      double x = 2.0;
      double y = 5.4;

      // print x raised by y and then y raised by x
      System.out.println("Math.pow(" + x + "," + y + ")=" + Math.pow(x, y));
      System.out.println("Math.pow(" + y + "," + x + ")=" + Math.pow(y, x));

   }
}

让我们来编译和运行上面的程序，这将产生以下结果：

Math.pow(2.0, 5.4)=42.22425314473263
Math.pow(5.4, 2.0)=29.160000000000004

在这个例子中用到这样的一个方法：

	public static final float getGap(float x0, float y0, float x1, float y1) {
		return (float) Math.pow(
				Math.pow((x0 - x1), 2) + Math.pow((y0 - y1), 2), 0.5);
	}

这个方法就是计算两个点之间的直线距离：

3）

java.lang.Math.atan(double a) 返回一个角的反正切，在到pi / 2，-π/ 2的范围内。特殊情况:

如果参数是NaN，那么结果为NaN.
如果参数是零，那么结果是零的同号作为参数.

因此，必须正确舍入的结果的1 ulp范围内。结果必须是半单调性.

下面的示例演示使用的lang.Math.atan()方法.

package com.yiibai;

import java.lang.*;

public class MathDemo {

   public static void main(String[] args) {

      // get a variable x which is equal to PI/2
      double x = Math.PI / 2;

      // convert x to radians
      x = Math.toRadians(x);

      // get the arc tangent of x
      System.out.println("Math.atan(" + x + ")" + Math.atan(x));
   }
}

让我们来编译和运行上面的程序，这将产生以下结果：

Math.atan(0.027415567780803774)0.0274087022410345

本例子中有该函数的应用：

double ang1_1 = Math.atan((endY - startY) / (endX - startX));

这个函数的结果就是你手指向上滑动的方向与x轴的夹角

其他的函数就不介绍了，求cos sin 等等

这里的坐标处理就是求出路径，以便画笔paint按照这条路径去画出你手指的移动方向

5.手指触摸事务处理

	// 屏幕触摸事务处理
	@Override
	public boolean onTouchEvent(android.view.MotionEvent event) {
		if (event.getPointerCount() == 1) {
			int action = event.getAction();
			if (MotionEvent.ACTION_DOWN == action) {
				startX = event.getX();
				startY = event.getY();
			} else if (MotionEvent.ACTION_MOVE == action) {
				endX = event.getX();
				endY = event.getY();

				// 刀锋截短时间，则截短至一半
				if ((event.getEventTime() - event.getDownTime()) > shape_cut_time) {
					if (Math.abs(endX - startX) > shape_length
							&& Math.abs(endY - startY) > shape_length) {
						startX = (float) (startX + (endX - startX) * 0.5);
						startY = (float) (startY + (endY - startY) * 0.5);
					}
				}

				invalidate();
			} else if (MotionEvent.ACTION_UP == action) {
				startX = Float.NaN;
				startY = Float.NaN;
				endX = Float.NaN;
				endY = Float.NaN;
				invalidate();
			}
		}
		// 该view消费了event，所以下层的view必须dispatchTouchEvent才能获得事件
		// MotionEvent newEvent = MotionEvent.obtain(event);
		// viewer.dispatchTouchEvent(newEvent);
		return true;
	}

主要是处理拖动过程中坐标的变化：通过时间来判断

如果我手指移动的距离超过刀锋规定的长度：80，那么就需要把刀锋的效果缩小，游戏中没有可以从左下加拖动右上角把，

也就是说你手指滑动的过程只有一定的距离可以有效的切开水果。这里设置的距离是减半

如果当你手指松开的时候，所有的坐标都失效了，让他变成一个NaN，然后更新视图

如果手指按下了，必须马上获取你手指的坐标

这里有个形状，是在你拖动的过程中如果距离跨度很大，有个箭头的形状，大部分的计算都是为了这个形状去服务。代码应该很好懂

整个技术实现很简单，就是用画笔上画布上面画，没有太多的技巧

看看运行的效果：