为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. */@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);}@Overrideprotected 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#

更多相关文章

随机推荐