实现蝴蝶翩翩飞舞的效果

最近在做一个功能开发的时候,需要实现蝴蝶飞舞的效果!先看看效果图吧!

先问一个问题:要实现上面的蝴蝶纷飞的效果至少需要几个蝴蝶的图像? 答案是: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就表示当前这一帧蝴蝶摆动翅膀的强度!

时间: 2024-08-05 00:06:31

实现蝴蝶翩翩飞舞的效果的相关文章

八、图形与图像处理(2)

8.逐帧(Frame)动画 要求开发者把动画过程的没涨静态图片都收集起来,然后由Android开控制依次显示这些静态图片,与放电影的原理一样. 9.AnimationDrawable与逐帧动画只要在<animation-list.../>元素中使用<item.../>子元素定义动画的全部帧,并指定各帧的持续时间即可.语法格式如下: <?xml version="1.0" encoding="utf-8"?><animatio

通过渲染器Shader实现图像变换效果

在上一篇文章中,一起学习了通过设定画笔风格来实现图形变换,没读过的朋友可以点击下面链接: http://www.cnblogs.com/fuly550871915/p/4886455.html 是不是觉得自己学到的知识更多了呢?那么再多学一点总没坏处.在本篇文章中,将会一起学习通过给画笔设定Shader属性,实现图形变换.并带领读者一起实现两个实际例子,图片渲染器和线性渲染器.有没有发现我们的画笔特别强大呢??确实,我们曾经给它设置过颜色矩阵属性,设置过xfermode风格属性,现在又来设定Sh

自绘ListBox的两种效果

本文利用Listbox自绘实现了两种特殊效果(见图),左边的风格是自己突然灵感触发想到的,右边的风格来自"C++ Builder 研究"的一个帖子,老妖用BCB实现了,这里则用Delphi实现它. 演示图片: //-------------------------------------------------------------------------- unit DrawListItem; interface uses  Windows, Messages, SysUtils, Vari

Android中的动画具体解释系列【2】——飞舞的蝴蝶

这一篇来使用逐帧动画和补间动画来实现一个小样例,首先我们来看看Android中的补间动画. Android中使用Animation代表抽象的动画类,该类包含以下几个子类: AlphaAnimation:透明改变动画. ScaleAnimation:大小缩放动画. TranslateAnimation:位移变化动画. RotateAnimation:旋转动画. 我们以下使用位移动画和逐帧动画来实现这个小样例.先看看执行效果: 蝴蝶挥动翅膀的逐帧动画文件: <?xml version="1.0

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

Android 从无到有打造一个炫酷的进度条效果

从无到有打造一个炫酷的进度条效果

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<

鼠标悬停图片移动的效果

当前很多购物网站,像京东,蘑菇街这些都有对展示的图片做这种鼠标悬停图片上移,下移,左移或者右移效果, 实现代码很简单,就用css3的transform便可实现. 下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置. css: <style> div{ margin-top: 100px; width: 100px; height: 100px; background: pink; transition:All 0.4s ease-in-out;//让移动效果变得平滑自