为Android的界面设计增加跳跃效果

先贴出动画效果图（GIF截图比较业余，见谅见谅）

设计的思路是，为一个View增加跳起和落下的动画效果，然后为这个View加一个背景View作为运动的影子，进行同步运动。

首先，根据期望的效果，确定Activity的主题色调，比如我这里的背景色用的是透明渐变的灰黑色，自然就不能再使用黑色的显示主题，我选用的是Light（android:theme="@android:style/Theme.Light"）

接着设计一个布局，因为阴影和前景是重叠关系，布局我选用RelativeLayout，下面是我的布局代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >



    <ImageView
        android:id="@+id/imageViewShadow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignBottom="@+id/imageViewItem"
        android:layout_marginBottom="-5px"
        android:src="@drawable/shadow" />


    <ImageView
        android:id="@+id/imageViewItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/test" />

</RelativeLayout>

为了确保显示的顺序，需要在布局文件中先放置背景View，然后再放置前景View，确保显示时背景总是被前景View所覆盖。背景View的位置设计为底部和前景View对齐，并向下缩进几个像素，这样在落地时可以显示几个像素的阴影。

下面是跳跃效果的实现代码：

package com.noodies.jumper;

import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;

/** 实现跳跃并落下的动画 */
public class Jumper {
	private Animation mAniDown;
	private Animation mAniUp;
	private AnimationSet mAniShadowDown;
	private AnimationSet mAniShadowUp;
	private SwitchAnimationListener mSwitchListener;

	private View mView;
	private View mShadow;

	/**
	 * 跳跃动画的构造函数
	 * @param duration 每次跳跃和落下的动画持续时间
	 * @param offset 动画跳起的高度(像素)
	 */
	public Jumper(int duration, int offset) {
		mAniDown = new TranslateAnimation(0, 0, -offset, 0);
		mAniUp = new TranslateAnimation(0, 0, 0, -offset);

		mAniDown.setInterpolator(new AccelerateInterpolator());
		mAniUp.setInterpolator(new DecelerateInterpolator());

		mAniDown.setDuration(duration);
		mAniUp.setDuration(duration);

		Animation aniToRight = new TranslateAnimation(0, offset, 0, -offset / 2);
		Animation aniToLeft = new TranslateAnimation(offset, 0, -offset / 2, 0);

		Animation aniToSmall = new ScaleAnimation(1.0f, 0.7f, 1.0f, 0.7f);
		Animation aniToBig = new ScaleAnimation(0.7f, 1.0f, 0.7f, 1.0f);

		mAniShadowDown = new AnimationSet(false);
		mAniShadowDown.addAnimation(aniToLeft);
		mAniShadowDown.addAnimation(aniToBig);
		mAniShadowDown.setDuration(duration);

		mAniShadowUp = new AnimationSet(false);
		mAniShadowUp.addAnimation(aniToRight);
		mAniShadowUp.addAnimation(aniToSmall);
		mAniShadowUp.setDuration(duration);

		mSwitchListener = new SwitchAnimationListener();

		mAniDown.setAnimationListener(mSwitchListener);
		mAniUp.setAnimationListener(mSwitchListener);
		mAniShadowDown.setAnimationListener(mSwitchListener);
		mAniShadowUp.setAnimationListener(mSwitchListener);
	}

	/**
	 * 将跳跃动画附到一个View
	 * 
	 * @param view 准备显示跳跃动画的View(一般是ImageView)
	 * @param shadow 动画阴影(一般是半透明阴影图像的ImageView)，因为需要将阴影放于动画后面，因此View的上级Layout类型应选用允许相互覆盖的如RelativeLayout
	 */
	public void attachToView(View view, View shadow) {
		mView = view;
		mShadow = shadow;

		if (mView != null)
			mView.startAnimation(mAniDown);

		if (mShadow != null)
			mShadow.startAnimation(mAniShadowDown);
	}

	/** 动画切换侦听器 */
	private class SwitchAnimationListener implements Animation.AnimationListener {

		public void onAnimationStart(Animation animation) {
		}

		public void onAnimationEnd(Animation animation) {
			if (mView == null)
				return;

			if (animation == mAniUp) {
				if (mView != null)
					mView.startAnimation(mAniDown);
			} else if (animation == mAniDown) {
				if (mView != null)
					mView.startAnimation(mAniUp);
			} else if (animation == mAniShadowUp) {
				if (mShadow != null)
					mShadow.startAnimation(mAniShadowDown);
			} else if (animation == mAniShadowDown) {
				if (mShadow != null)
					mShadow.startAnimation(mAniShadowUp);
			}
		}

		public void onAnimationRepeat(Animation animation) {
		}
	}
}

前景View有两个动画效果，跳起和落下，落下时使用加速度插值，跳起时使用减速度插值。背景View使用了4个动画效果，当前景View向上跳起时，背景向右上移动并且变小；前景落下时，背景向左下移动并且逐渐变大。本来打算使用AnimationSet，但重复有点问题，因此自己写了个侦听器来处理动画的切换和循环。

最后就是在程序启动时为View加上动画效果了

package com.noodies.jumper;

import com.noodies.jumper.R;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

public class TestAniActivity extends Activity {

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
	}

	@Override
	protected void onStart() {
		super.onStart();

		ImageView img = (ImageView) findViewById(R.id.imageViewItem);
		ImageView shadow = (ImageView) findViewById(R.id.imageViewShadow);

		Jumper jumper = new Jumper(1000, 30);

		jumper.attachToView(img, shadow);
	}
}

跳起和落下时间设为1000毫秒，运动范围为30像素。

这里是例子的下载地址：http://115.com/file/clj55tuq#