为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)

补充：移动开发 , Android ,