一、渐变动画, Tweened Animation
Tweened Animation 表示的是一些基本的动画元素操作,所有的 Animation 操作的方法都在 android.view.animation.Animation 类中定义。
对于 Tweened Animation 的动画操作有四个主要的类型:
alpha(android.view.animation.AlphaAnimation) :定义渐变透明度动画效果,例如:图片的淡入淡出。
scale(android.view.animation.ScaleAnimation) :定义动画的伸缩效果;
translate(android.view.animation.TranslateAnimation) :定义动画的转换位置移动效果;
rotate(android.view.animation.RotateAnimation) :定义图片旋转效果的移动动画。
如果希望可以在一个组件上设置动画效果的话,那么必须这些效果进行叠加,所有的动画的叠加都要使用 AnimationSet 完成。其常用方法有:
No. |
方法 |
描述 |
1 |
Public Animation(Boolean shareInterpolator) |
如果设置为 ture ,则表示所有 AnimationSet 所提供的 Interpolator (速率),如果为 false ,则使用各个动画效果自己的 Interpolator |
2 |
Public void addAnimation(Animation a) |
增加一个 Animation 组件 |
3 |
Public List<Animation> getAnimations() |
取得所有的 Animation 组件 |
4 |
Public long getDuration() |
取得动画的持续时间 |
5 |
Public long getStartTime() |
取得动画的开始时间 |
6 |
Public void reset() |
重置动画 |
7 |
Public void setDuration(long durationMills) |
设置动画的持续时间 |
8 |
Public void setStartTime(long startTimeMills) |
设置动画的开始时间 |
通过程序实现渐变缩放移动旋转动画
Animation01_Activity.java
package com.iflytek.demo; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; public class Animation01_Activity extends Activity { private ImageView image = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.image = (ImageView) super.findViewById(R.id.image); this.image.setOnClickListener(new OnClickListenerImpl()); } private class OnClickListenerImpl implements OnClickListener { @Override public void onClick(View v) { AnimationSet set = new AnimationSet(true); // -------------1、渐变效果------------------ AlphaAnimation alpha = new AlphaAnimation(1, 0); // 由完全显示 --> 完全透明 alpha.setDuration(3000); // 3秒完成动画 // -------------2、缩放效果------------------ ScaleAnimation scale = new ScaleAnimation(1, 0.0f, 1, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);// xy轴从完全开始都不显示,xy轴以自身的0.5进行缩放 scale.setDuration(3000); // 3秒完成动画 // -------------3、平移效果------------------ TranslateAnimation tran = new TranslateAnimation( Animation.RELATIVE_TO_SELF,0.0f , // X轴开始位置 Animation.RELATIVE_TO_SELF,0.5f , // X轴移动的结束位置 Animation.RELATIVE_TO_SELF,0.0f , // Y轴开始位置 Animation.RELATIVE_TO_SELF,1.5f ); // Y轴移动位置 tran.setDuration(3000); // 3秒完成动画 // -------------4、旋转效果------------------ RotateAnimation rotate = new RotateAnimation( 0,360 , // 0~360度 Animation.RELATIVE_TO_PARENT,0.5f , // Y轴开始位置 Animation.RELATIVE_TO_PARENT,0.0f ); // Y轴移动位置 rotate.setDuration(3000); // 3秒完成动画 set.addAnimation(rotate); // 增加动画 set.addAnimation(tran); // 增加动画 set.addAnimation(scale); // 增加动画 set.addAnimation(alpha); // 增加动画 Animation01_Activity.this.image.startAnimation(set); // 启动动画 } } }
动画速率, Interpolator :每当实例化 AnimationSet 类对象的时候都会定义如下的一个构造方法 AnimationSet set = new AnimationSet(true);// 定义一个动画集
在这个构造方法之中要传递一个 boolean 型的数据,而且值的设置为 true ,实际上这个 boolean 型的数据就是定义的 Interpolator ,即:动画执行速率,而此时设置为 true 表示所有的速率将交给 AnimationSet 对象统一设置,而各个不同的动画中的速率效果不起作用,反之则为 false 。在 Android 之中使用 andorid.view.animation.Interpolator 接口表示,在 Interpolator 接口中定义了动画的变化速度,可以实现匀速,正加速,负加速,无规则变加速等。这些由不同的子类所实现。其常用的子类有:
No. |
子类 |
描述 |
1 |
AccelerateDecelerateInterpolator |
加速 - 减速,动画在开始与结束的地方执行速度慢,而中间部门时加速 |
2 |
AccelerateInterpolator |
加速,动画在开始的时候执行速度慢,然后开始加速 |
3 |
DecelerateInterpolator |
减速,动画在开始的时候执行速度快,然后开始减速 |
4 |
CycleInterpolator |
动画循环播放特定的次数,速率改变沿着正选曲线变化 |
5 |
LinearInterpolator |
动画以匀速的方式运行 |
Animation02_Activity.java
package com.iflytek.demo; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.AccelerateInterpolator; import android.view.animation.Animation; import android.view.animation.AnimationSet; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.ImageView; public class Animation02_Activity extends Activity { private ImageView image = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.image = (ImageView) super.findViewById(R.id.image); this.image.setOnClickListener(new OnClickListenerImpl()); } private class OnClickListenerImpl implements OnClickListener { @Override public void onClick(View v) { AnimationSet set = new AnimationSet(true); TranslateAnimation tran = new TranslateAnimation( Animation.RELATIVE_TO_SELF, 0.0f, // X轴开始位置 Animation.RELATIVE_TO_SELF, 0.5f, // X轴移动的结束位置 Animation.RELATIVE_TO_SELF, 0.0f, // Y轴开始位置 Animation.RELATIVE_TO_SELF, 1.5f); // Y轴移动位置 ScaleAnimation scale = new ScaleAnimation(1, 0.0f, 1, 0.0f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scale.setRepeatCount(30);//重复 set.addAnimation(tran); // 增加动画 set.addAnimation(scale); // 增加动画 set.setInterpolator(new AccelerateInterpolator()); // 加速度 set.setDuration(6000); // 6秒完成动画 Animation02_Activity.this.image.startAnimation(set); // 启动动画 } } }
动画监听器, AnimationListener :在进行动画的操作过程之中,也可以对动画的一些操作状态进行监听,例如:动画启动、动画重复执行、动画结束,在 Android 中专门提供了一个 android.view.animation.Animation.AnimationListener 接口,用于完成动画的监听操作,在此接口中定义了三个监听动画的操作方法:
动画开始时触发: public void onAnimationStart(Animation animation)
动画重复时触发: public void onAnimationRepeat(Animation animation)
动画结束时触发: public void onAnimationEnd(Animation animation)
Animation03_Activity.java
package com.iflytek.demo; import android.app.Activity; import android.os.Bundle; import android.view.ViewGroup; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.animation.Animation.AnimationListener; import android.view.animation.AnimationSet; import android.view.animation.TranslateAnimation; import android.widget.ImageView; public class Animation03_Activity extends Activity { private ImageView image = null; private ViewGroup group = null ; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.image = (ImageView) super.findViewById(R.id.image); this.group = (ViewGroup) super.findViewById(R.id.group); AnimationSet set = new AnimationSet(true); TranslateAnimation tran = new TranslateAnimation( Animation.RELATIVE_TO_SELF,0.0f , // X轴开始位置 Animation.RELATIVE_TO_SELF,0.5f , // X轴移动的结束位置 Animation.RELATIVE_TO_SELF,0.0f , // Y轴开始位置 Animation.RELATIVE_TO_SELF,1.5f ); // Y轴移动位置 tran.setDuration(6000); // 6秒完成动画 set.addAnimation(tran); // 增加动画 set.setAnimationListener(new AnimationListenerImpl()) ; this.image.startAnimation(set); // 启动动画 } private class AnimationListenerImpl implements AnimationListener { @Override public void onAnimationEnd(Animation animation) { Animation03_Activity.this.group.removeView(Animation03_Activity.this.image) ; } @Override public void onAnimationRepeat(Animation animation) { } @Override public void onAnimationStart(Animation animation) { if(animation instanceof AnimationSet) { AnimationSet set = (AnimationSet) animation ; AlphaAnimation alpha = new AlphaAnimation(1, 0); alpha.setDuration(3000) ; set.addAnimation(alpha) ; } } } }
main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/group" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:id="@+id/image" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" /> </LinearLayout>
通过 XML 配置渐变缩放移动旋转动画
这里首选配置实现,这样用户在不修改程序的情况下实现对动画的控制,以达到有效的程序与配置相分离,在 Android 中所有定义好的 XML 文件都要求保存在 res/anim 文件夹之中,在定义动画的 XML 文件之中,可以使用下面定义的动画效果元素进行配置。
No. |
可配置的元素 |
描述 |
1 |
<set> |
为根节点,定义全部的动画元素 |
2 |
<alpha> |
定义渐变动画效果 |
3 |
<scale> |
定义缩放动画效果 |
4 |
<translate> |
定义平移动画效果 |
5 |
<rotate> |
定义旋转动画效果 |
可配置的公共属性:
No. |
可配置属性 |
描述 |
1 |
android:duration |
定义动画的持续时间 |
2 |
android:fillAfter |
设置为 true 表示该动画转化在动画结束后应用 |
3 |
android::fillBefore |
设置为 true 表示该动画转化在动画开始前应用 |
4 |
android:Interpolator |
指定动画的执行速率 |
5 |
android:repeatCount |
动画重复执行的次数 |
6 |
android:repeatMode |
动画重复执行的模式( restart 、 reverse ) |
7 |
android:startOffset |
动画之间的间隔 |
8 |
android:zAdjustment |
动画的 ZOrder 配置: 0 (保持 ZOrder 不变)、 1 (保持在最上层)、 -1 (保持在最下层) |
Animation04_Activity.java
package com.iflytek.demo; import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; public class Animation04_Activity extends Activity { private ImageView image = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.image = (ImageView) super.findViewById(R.id.image); this.image.setOnClickListener(new OnClickListenerImpl()); } private class OnClickListenerImpl implements OnClickListener { @Override public void onClick(View v) { Animation anim = AnimationUtils.loadAnimation( Animation04_Activity.this, R.anim.all); Animation04_Activity.this.image.startAnimation(anim); // 启动动画 } } }
all.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="true"> <translate android:fromXDelta="0.0" android:toXDelta="50%" android:fromYDelta="0.0" android:toYDelta="150%" android:duration="3000" /> <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="100" android:repeatCount="3" android:duration="3000" /> </set>
alpha.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="3000" /> </set>
rotate.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <rotate android:fromDegrees="0.0" android:toDegrees="+360.0" android:pivotX="50%p" android:pivotY="0%p" android:duration="3000" /> </set>
scale.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="100" android:repeatCount="3" android:duration="3000" /> </set>
translate.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <translate android:fromXDelta="0.0" android:toXDelta="50%" android:fromYDelta="0.0" android:toYDelta="150%" android:duration="3000" /> </set>
二、帧动画, Frame Animation
Frame Animation 的主要功能是采用帧的方式进行动画效果的编排,所有的动画会按照事先定义好的顺序执行,而后就像电影那样展现给用户,如果要想使用这种动画则需要使用 android.graphics.drawable.AnimationDrawable 类进行处理。
AnimationDrawable 类的常用方法:
启动动画: public void start()
设置动画执行次数: public void setOneShot(Boolean oneShot) , true 表示一次, false 表示多次;
Animation05_Activity.java
package com.iflytek.demo; import android.app.Activity; import android.graphics.drawable.AnimationDrawable; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; public class Animation05_Activity extends Activity { private ImageView dingqiu = null; private Button start = null; private AnimationDrawable draw = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.dingqiu = (ImageView) super.findViewById(R.id.dingqiu); this.start = (Button) super.findViewById(R.id.start); this.start.setOnClickListener(new OnClickListenerImpl()); } private class OnClickListenerImpl implements OnClickListener { @Override public void onClick(View v) { Animation05_Activity.this.dingqiu .setBackgroundResource(R.anim.dingqiu); Animation05_Activity.this.draw = (AnimationDrawable) Animation05_Activity.this.dingqiu .getBackground(); Animation05_Activity.this.draw.setOneShot(false); Animation05_Activity.this.draw.start(); } } }
dingqiu.xml
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="true"> <item android:drawable="@drawable/dingqiu0001" android:duration="200" /> <item android:drawable="@drawable/dingqiu0002" android:duration="200" /> <item android:drawable="@drawable/dingqiu0003" android:duration="200" /> <item android:drawable="@drawable/dingqiu0004" android:duration="200" /> <item android:drawable="@drawable/dingqiu0005" android:duration="200" /> <item android:drawable="@drawable/dingqiu0006" android:duration="200" /> <item android:drawable="@drawable/dingqiu0007" android:duration="200" /> <item android:drawable="@drawable/dingqiu0008" android:duration="200" /> <item android:drawable="@drawable/dingqiu0009" android:duration="200" /> </animation-list>
LayoutAnimationController 组件,表示的是在 Layout 组件上使用动画的操作效果,例如,进行图片列表显示的时候增加一些动画效果,或者是使用 ListView 增加一些动画效果等,而所增加的动画效果就是之前所使用的渐变、缩放、旋转、平移。与之前的操作一样, LayoutAnimationController 可以通过配置完成,也可以使用程序代码完成。
GridView 上使用动画
Animation06_Activity.java
package com.iflytek.demo; import android.app.Activity; import android.os.Bundle; import android.widget.GridView; public class Animation06_Activity extends Activity { private GridView myGridView = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.myGridView = (GridView) super.findViewById(R.id.myGridView); this.myGridView.setAdapter(new ImageAdapter(this)); } }
ImageAdapter.java
package com.iflytek.demo; import java.lang.reflect.Field; import java.util.ArrayList; import java.util.List; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.view.ViewGroup.LayoutParams; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageView; public class ImageAdapter extends BaseAdapter { private Context context = null; private List<Integer> picRes = new ArrayList<Integer>(); public ImageAdapter(Context context) { this.context = context; this.initPic(); } @Override public int getCount() { return this.picRes.size(); } @Override public Object getItem(int position) { return this.picRes.get(position); } @Override public long getItemId(int position) { return this.picRes.get(position).intValue(); } @Override public View getView(int position, View convertView, ViewGroup parent) { ImageView img = new ImageView(this.context); img.setBackgroundColor(0xFF000000); img.setImageResource(this.picRes.get(position)); img.setScaleType(ImageView.ScaleType.CENTER); img.setLayoutParams(new GridView.LayoutParams( LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT)); img.setPadding(3, 3, 3, 3); return img; } private void initPic() { // 利用反射加载所有的图片 Field[] fields = R.drawable.class.getDeclaredFields(); for (int x = 0; x < fields.length; x++) { if (fields[x].getName().startsWith("dingqiu00")) { try { this.picRes.add(fields[x].getInt(R.drawable.class)); } catch (IllegalArgumentException e) { } catch (IllegalAccessException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } } }
anim_set.xml
<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="3000" /> <scale android:fromXScale="1.0" android:toXScale="0.0" android:fromYScale="1.0" android:toYScale="0.0" android:pivotX="50%" android:pivotY="50%" android:startOffset="100" android:repeatCount="3" android:duration="3000" /> </set>
layout_animation.xml
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="0.5" android:animationOrder="random" android:animation="@anim/anim_set"/>
main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <GridView android:id="@+id/myGridView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layoutAnimation="@anim/layout_animation" android:numColumns="3" android:stretchMode="columnWidth" /> </LinearLayout>
ListView使用动画,通过配置文件
Animation07_Activity.java
package com.iflytek.demo; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; import android.widget.SimpleAdapter; public class Animation07_Activity extends Activity { private ListView myListView = null; private String idData[] = new String[] { "xdwang", "java", "Android", "IBM" }; private String titleData[] = new String[] { "王旭东", "java语言", "Android语言", "国外" }; private SimpleAdapter simple = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.myListView = (ListView) super.findViewById(R.id.myListView); List<Map<String, Object>> all = new ArrayList<Map<String, Object>>(); Map<String, Object> map = null; for (int x = 0; x < this.idData.length; x++) { map = new HashMap<String, Object>(); map.put("id", this.idData[x]); map.put("title", this.titleData[x]); all.add(map); } this.simple = new SimpleAdapter(this, all, R.layout.info, new String[] { "id", "data" }, new int[] { R.id.id, R.id.title }); this.myListView.setAdapter(this.simple); } }
info.xml
<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow> <TextView android:id="@+id/id" android:textSize="16px" android:layout_height="wrap_content" android:layout_width="100px" /> <TextView android:id="@+id/title" android:textSize="16px" android:layout_height="wrap_content" android:layout_width="200px" /> </TableRow> </TableLayout>
main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/myListView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layoutAnimation="@anim/layout_animation"/> </LinearLayout>
ListView使用动画, 程序实现LayoutAnimationController
Animation08_Activity.java
package com.iflytek.demo; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import android.os.Bundle; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.LayoutAnimationController; import android.widget.ListView; import android.widget.SimpleAdapter; public class Animation08_Activity extends Activity { private ListView myListView = null; private String idData[] = new String[] { "xdwang", "java", "Android", "IBM" }; private String titleData[] = new String[] { "王旭东", "java语言", "Android语言", "国外" }; private SimpleAdapter simple = null; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); this.myListView = (ListView) super.findViewById(R.id.myListView); List<Map<String, Object>> all = new ArrayList<Map<String, Object>>(); Map<String, Object> map = null; for (int x = 0; x < this.idData.length; x++) { map = new HashMap<String, Object>(); map.put("id", this.idData[x]); map.put("title", this.titleData[x]); all.add(map); } this.simple = new SimpleAdapter(this, all, R.layout.info, new String[] { "id", "data" }, new int[] { R.id.id, R.id.title }); this.myListView.setAdapter(this.simple); Animation anim = AnimationUtils.loadAnimation(this, R.anim.anim_set); LayoutAnimationController control = new LayoutAnimationController(anim); control.setDelay(0.5f); control.setOrder(LayoutAnimationController.ORDER_RANDOM); this.myListView.setLayoutAnimation(control); } }
将上面的main.xml中的添加动画取消
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/myListView" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>