实现蝴蝶翩翩飞舞的效果

Posted 2020-09-28 cynchanpin

      近期在做一个功能开发的时候，须要实现蝴蝶飞舞的效果。先看看效果图吧！

      先问一个问题：要实现上面的蝴蝶纷飞的效果至少须要几个蝴蝶的图像？ 答案是：4。不同颜色种类的蝴蝶须要一张就足够。

要实现这个效果仅仅须要一行关键代码：

      canvas.drawBitmap(img_to_draw, view_player_matrix, mPaint);

这里我们之关注这个參数：view_player_matrix。这是一个Matrix，通过设置这个Matrix，就能让蝴蝶有位移，大小。拍动翅膀的效果变化！当中通过mPaint来配置蝴蝶的透明度能够达到蝴蝶慢慢消失的效果！

位移能够通过Matrix的setTranslate（）来设置；大小能够用postScale（）来配置。那么拍动翅膀呢？这就是我要说的重点。

要实现如上面效果图的拍动翅膀。你须要细致观察上面的蝴蝶！

事实上拍动翅膀的时候，从上往下看蝴蝶是不是变窄了。就像是被压缩了。这就是我实现的办法！

首先记住蝴蝶飞的方向！

用一个方向向量来表示，通过变化这个方向量来达到改变蝴蝶的飞行的方向！

最重要的是要计算出蝴蝶旋转的角度。以下给出通过方向向量来计算其角度的方法：

	private static int get_vector_Radian (float vector_x, float vector_y){
		float lenth = (float) lineDis(0, 0, vector_x, vector_y);
		int degree = 0;
			

		if(vector_x > 0 && vector_y >= 0)
		{
			degree =  (int) (Math.asin(vector_y/lenth) * (TO_DEGREES));
		}
		else if(vector_x <= 0 && vector_y > 0)
		{
			degree = (int) (Math.asin(vector_y/lenth) * (TO_DEGREES));
			degree = 180 - degree;
		} 
		else if(vector_x < 0 && vector_y <= 0)
		{
			degree = (int) (Math.asin((-vector_y)/lenth) * (TO_DEGREES));
			degree += 180;
		}
		else
		{
			degree = (int) (Math.asin((-vector_y)/lenth) * (TO_DEGREES));
			degree = 360 - degree;
		}

		return degree;
	} 

代码里面的TO_DEGREES定义例如以下：

                               private static final float TO_DEGREES = ((180/(float)Math.PI));

这样在Matrix的配置时候通过postScale（）这种方法去改变蝴蝶宽度。也就是改变蝴蝶图片y的大小，这样就实现了。例如以下是关键代码：

view_player_matrix.postScale(temp_parameters_float, temp_parameters_float+curr_player.img_player_scal_incre_y, curr_player.img_player_x, curr_player.img_player_y);

当中temp_parameters_float表示了这个蝴蝶的大小。curr_player.img_player_scal_incre_y就表示当前这一帧蝴蝶摆动翅膀的强度！