android仿腾讯小火箭案例

效果展示

思路分析

首先要准备两张小火箭图片，通过帧动画来实现火箭喷火的效果

准备两张看似冒白烟的图片，在火箭的发射的时候通过渐变动画实现发射时的效果

熟悉view的onTouch事件处理，以及android基本动画的使用

当小火箭被拖动到发射区域时抬起时火箭发射，执行冒白烟的渐变动画，当火箭飞出屏幕时结束所有动画

具体实现步骤

一、在res/drawable目录下创建一个帧动画的xml文件，desktop_rocket_launch_1和desktop_rocket_launch_1分别是两张不同的小火箭状态的图片

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/selected"
android:oneshot="false" >

<item
android:drawable="@drawable/desktop_rocket_launch_1"
android:duration="50"/>
<item
android:drawable="@drawable/desktop_rocket_launch_2"
android:duration="50"/>

</animation-list>

二、在java文件中通过下面代码的实现小火箭的喷火效果

mImgAnim.setBackgroundResource(R.drawable.desktop_rocket_launch);
AnimationDrawable frameAnimation = (AnimationDrawable) mImgAnim
.getBackground();
frameAnimation.start();

三、触摸小火箭时随手指移动

mImgAnim.setOnTouchListener(new OnTouchListener() {
private int startX;
private int startY;

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) event.getRawX();
startY = (int) event.getRawY();
System.out.println("按下");
break;
case MotionEvent.ACTION_MOVE:
System.out.println("移动");
// 获取移动后的位置
int moveX = (int) event.getRawX();
int moveY = (int) event.getRawY();
// 计算偏移量
int vX = moveX - startX;
int vY = moveY - startY;
// 获取没有重绘前view离屏幕左边和上边的距离
int l = mImgAnim.getLeft();
int t = mImgAnim.getTop();
l += vX;
t += vY;
// 边界值处理
l = l < 0 ? 0
: (l > mScreeWidth - mImgAnim.getWidth() ? mScreeWidth
- mImgAnim.getWidth()
: l);
t = t < 0 ? 0
: (t > mScreeHeight - mImgAnim.getHeight() ? mScreeHeight
- mImgAnim.getHeight()
: t);
// r和b受到l和t的影响，所以不用做处理
int r = l + mImgAnim.getWidth();
int b = t + mImgAnim.getHeight();
// 重绘view
mImgAnim.layout(l, t, r, b);
// 修改起点坐标
startX = moveX;
startY = moveY;
break;
case MotionEvent.ACTION_UP:

int width = mImgAnim.getWidth();
// 发射火箭
// 判断是否在指定的位置
if (mImgAnim.getLeft() > mScreeWidth / 2 - width
&& mImgAnim.getLeft() < mScreeWidth / 2 + width
&& mImgAnim.getTop() > mScreeHeight
- mImgAnim.getHeight() - 20) {
System.out.println("发射火箭");
sendRocket();
mSmoke.startAnimation(alphaAnimation);
mSmoke_t.startAnimation(alphaAnimation);
}
break;

}
return true;
}
});

四、当手指抬起时如果火箭位于发射位置，则发射火箭，同时取消所有动画

new Thread() {
public void run() {

do {
SystemClock.sleep(10);
// 运行在ui线程操作
runOnUiThread(new Runnable() {
@Override
public void run() {
// 减小控件距离屏幕顶部的距离
int top = mImgAnim.getTop() - 8;
// 重新绘制控件
mImgAnim.layout(mImgAnim.getLeft(), top,
mImgAnim.getLeft() + mImgAnim.getWidth(),
top + mImgAnim.getHeight());
System.out.println("top=" + top);
}
});

} while (mImgAnim.getBottom() > 0);
// 关闭动画
runOnUiThread(new Runnable() {

@Override
public void run() {
mSmoke.clearAnimation();
mSmoke_t.clearAnimation();
}
});
};
}.start();

完整代码如下,布局自定义

/**
* @author rongtao
*  小火箭案例
*/
public class MainActivity extends Activity {

private MainActivity mContext;
private ImageView mImgAnim;
private ImageView mSmoke;
private int mScreeWidth;
private int mScreeHeight;
private AlphaAnimation alphaAnimation;
private ImageView mSmoke_t;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mContext = this;
getScreenInfo();
init();
}

/**
* 获取屏幕宽高
*/
private void getScreenInfo() {
// 获取手机屏幕信息
DisplayMetrics outMetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
;
mScreeWidth = outMetrics.widthPixels;
mScreeHeight = outMetrics.heightPixels;
}

private void init() {
mImgAnim = (ImageView) findViewById(R.id.img_anim);
mSmoke = (ImageView) findViewById(R.id.img_smoke);
mSmoke_t = (ImageView) findViewById(R.id.img_smoke_t);
loadAnimation();
touchRocket();
}

private void loadAnimation() {
mImgAnim.setBackgroundResource(R.drawable.desktop_rocket_launch);
AnimationDrawable frameAnimation = (AnimationDrawable) mImgAnim
.getBackground();
frameAnimation.start();
alphaAnimation = new AlphaAnimation(0, 1.0f);// 初始化渐变动画
alphaAnimation.setDuration(2000);
}

private void touchRocket() {

mImgAnim.setOnTouchListener(new OnTouchListener() {
private int startX;
private int startY;

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
startX = (int) event.getRawX();
startY = (int) event.getRawY();
System.out.println("按下");
break;
case MotionEvent.ACTION_MOVE:
System.out.println("移动");
// 获取移动后的位置
int moveX = (int) event.getRawX();
int moveY = (int) event.getRawY();
// 计算偏移量
int vX = moveX - startX;
int vY = moveY - startY;
// 获取没有重绘前view离屏幕左边和上边的距离
int l = mImgAnim.getLeft();
int t = mImgAnim.getTop();
l += vX;
t += vY;
// 边界值处理
l = l < 0 ? 0
: (l > mScreeWidth - mImgAnim.getWidth() ? mScreeWidth
- mImgAnim.getWidth()
: l);
t = t < 0 ? 0
: (t > mScreeHeight - mImgAnim.getHeight() ? mScreeHeight
- mImgAnim.getHeight()
: t);
// r和b受到l和t的影响，所以不用做处理
int r = l + mImgAnim.getWidth();
int b = t + mImgAnim.getHeight();
// 重绘view
mImgAnim.layout(l, t, r, b);
// 修改起点坐标
startX = moveX;
startY = moveY;
break;
case MotionEvent.ACTION_UP:

int width = mImgAnim.getWidth();
// 发射火箭
// 判断是否在指定的位置
if (mImgAnim.getLeft() > mScreeWidth / 2 - width
&& mImgAnim.getLeft() < mScreeWidth / 2 + width
&& mImgAnim.getTop() > mScreeHeight
- mImgAnim.getHeight() - 20) {
System.out.println("发射火箭");
sendRocket();
mSmoke.startAnimation(alphaAnimation);
mSmoke_t.startAnimation(alphaAnimation);
}
break;

}
return true;
}
});
}

/**
* 发送火箭效果
*
* 通过减少Top值得方法实现火箭的发射
*/
protected void sendRocket() {
new Thread() {
public void run() {

do {
SystemClock.sleep(10);
// 运行在ui线程操作
runOnUiThread(new Runnable() {
@Override
public void run() {
// 减小控件距离屏幕顶部的距离
int top = mImgAnim.getTop() - 8;
// 重新绘制控件
mImgAnim.layout(mImgAnim.getLeft(), top,
mImgAnim.getLeft() + mImgAnim.getWidth(),
top + mImgAnim.getHeight());
System.out.println("top=" + top);
}
});

} while (mImgAnim.getBottom() > 0);
// 关闭动画
runOnUiThread(new Runnable() {

@Override
public void run() {
mSmoke.clearAnimation();
mSmoke_t.clearAnimation();
}
});
};
}.start();
}
}

发射火箭可以通过其他的方式实现，有兴趣的自己研究。