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

MadeinCode 2011-11-17

先贴出动画效果图(GIF截图比较业余,见谅见谅)

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

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

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

为Android的界面设计增加跳跃效果源码下载:

具体下载目录在 /pub/Android源码集锦/2011年/11月/为Android的界面设计增加跳跃效果/

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

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.   
  8.   
  9.     <ImageView  
  10.         android:id="@+id/imageViewShadow"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:layout_centerHorizontal="true"  
  14.         android:layout_alignBottom="@+id/imageViewItem"  
  15.         android:layout_marginBottom="-5px"  
  16.         android:src="@drawable/shadow" />  
  17.   
  18.   
  19.     <ImageView  
  20.         android:id="@+id/imageViewItem"  
  21.         android:layout_width="wrap_content"  
  22.         android:layout_height="wrap_content"  
  23.         android:layout_centerHorizontal="true"  
  24.         android:layout_centerVertical="true"  
  25.         android:src="@drawable/test" />  
  26.   
  27. </RelativeLayout>  
为了确保显示的顺序,需要在布局文件中先放置背景View,然后再放置前景View,确保显示时背景总是被前景View所覆盖。背景View的位置设计为底部和前景View对齐,并向下缩进几个像素,这样在落地时可以显示几个像素的阴影。

相关推荐