首页 > 代码库 > 实现蝴蝶翩翩飞舞的效果
实现蝴蝶翩翩飞舞的效果
最近在做一个功能开发的时候,需要实现蝴蝶飞舞的效果!先看看效果图吧!
先问一个问题:要实现上面的蝴蝶纷飞的效果至少需要几个蝴蝶的图像? 答案是: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就表示当前这一帧蝴蝶摆动翅膀的强度!
实现蝴蝶翩翩飞舞的效果