Animation的4个基本动画效果
1、AlphaAnimation:淡入淡出效果
在代码中实现动画效果的方法:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
AlphaAnimation alphaAnimation = new AlphaAnimation(0, 1);
alphaAnimation.setDuration(1000);
alphaAnimation.setStartOffset(10000);
animationSet.addAnimation(alphaAnimation);
//animationSet.setStartOffset(10000);
animationSet.setFillBefore(false);
animationSet.setFillAfter(true);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res目录下创建一个anim文件夹,在里面添加一个alpha.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:fillAfter="true"
android:fillBefore="false">
<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:startOffset="1000"
android:duration="1000" />
</set>
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha);
imageView.startAnimation(animation);
2、ScaleAnimation:缩放效果
在代码中实现动画效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.5f, 1, 0.5f,
Animation.RELATIVE_TO_SELF, 1f,
Animation.RELATIVE_TO_SELF, 1f);
animationSet.addAnimation(scaleAnimation);
animationSet.setDuration(1000);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res的anim文件夹下,创建一个scale.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<scale android:fromXScale="1.0"
android:toXScale="0.0"
android:fromYScale="1.0"
android:toYScale="0.0"
android:pivotX="50%"
android:pivotY="50%"
android:duration="2000" />
</set>
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.scale);
imageView.startAnimation(animation);
3、Rotate:旋转效果
在代码中实现动画效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
RotateAnimation rotateAnimation = new RotateAnimation(0, 360,
Animation.RELATIVE_TO_PARENT, 0.5f,
Animation.RELATIVE_TO_PARENT, 0.5f);
rotateAnimation.setDuration(1000);
animationSet.addAnimation(rotateAnimation);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res的anim文件夹下,创建一个rotate.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<rotate android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="1000" />
</set>
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.rotate);
imageView.startAnimation(animation);
4、 Translate:移动效果
在代码中实现动画效果:
ImageView imageView = (ImageView) findViewById(R.id.imageView1);
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 1.0f,
Animation.RELATIVE_TO_SELF, 0f,
Animation.RELATIVE_TO_SELF, 1.0f);
translateAnimation.setDuration(1000);
animationSet.addAnimation(translateAnimation);
imageView.startAnimation(animationSet);
在XML文件中实现动画效果的方法:
① 在res的anim文件夹下,创建一个translate.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate
android:fromXDelta="0%p"
android:toXDelta="100%p"
android:fromYDelta="0%p"
android:toYDelta="100%p"
android:duration="1000" />
</set>
其中100%p表示相对于父空间的位置
② 在Activity中使用AnimationUtils获取Animation并进行设置:
Animation animation = (Animation) AnimationUtils.loadAnimation(MainActivity.this, R.anim.translate);
imageView.startAnimation(animation);
AnimationSet animationSet = new AnimationSet(false); AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f); ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animationSet.addAnimation(alpha); animationSet.addAnimation(scale); animationSet.setDuration(2000); animationSet.setStartOffset(1000); animationSet.setFillAfter(true); imageView.startAnimation(animationSet);
alpha.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" android:fillAfter="true"> <alpha android:fromAlpha="1.0" android:toAlpha="0.0" android:startOffset="1000" android:fillAfter="true" android:duration="2000" /> <scale android:fromXScale="1.0" android:toXScale="0.5" android:fromYScale="1.0" android:toYScale="0.5" android:pivotX="50%" android:pivotY="50%" android:startOffset="1000" android:duration="2000" /> </set>
Activity中的代码:
Animation animation = AnimationUtils.loadAnimation(MainActivity.this, R.anim.alpha); imageView.startAnimation(animation);
Interpolator的使用
什么是Interpolator
Interpolator
extends Object
AccelerateDecelerateInterpolator:
AccelerateDecelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts and ends slowly but accelerates through the middle.
AccelerateInterpolater:
AccelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts out slowly and and then accelerates.
CycleInterpolator:
CycleInterpolator
extends Object
implements Interpolator
Repeats the animation for a specified number of cycles. The rate of change follows a sinusoidal pattern.
DecelerateInterpolator:
DecelerateInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change starts out quickly and and then decelerates.
LinearInterpolator:
LinearInterpolator
extends Object
implements Interpolator
An interpolator where the rate of change is constant.
XML文件定义在set标签里或每个动画标签
set标签中定义:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="true" android:fillAfter="true">
每个动画标签中定义:
<set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:shareInterpolator="false" android:fillAfter="true"> <alpha android:interpolator="@android:anim/accelerate_interpolator" android:fromAlpha="1.0" android:toAlpha="0.0" android:startOffset="1000" android:fillAfter="true" android:duration="2000" /> <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:fromXScale="1.0" android:toXScale="0.5" android:fromYScale="1.0" android:toYScale="0.5" android:pivotX="50%" android:pivotY="50%" android:startOffset="1000" android:duration="2000" /> </set>
在代码中设置:
AnimationSet animationSet = new AnimationSet(true); animationSet.setInterpolator(new AccelerateInterpolator());
或者分别为每个动画设置:
AnimationSet animationSet = new AnimationSet(false); AlphaAnimation alpha = new AlphaAnimation(1.0f, 0.0f); alpha.setInterpolator(new AccelerateInterpolator()); ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); scale.setInterpolator(new AccelerateDecelerateInterpolator());
① 准备4张图片run1.png,run2.png,run3.png,run4.png分别放到res的三个drawable文件夹中
② 在res的drawable-ldpi目录下创建一个anim_run.xml文件:
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/run1" android:duration="100" /> <item android:drawable="@drawable/run2" android:duration="100" /> <item android:drawable="@drawable/run3" android:duration="100" /> <item android:drawable="@drawable/run4" android:duration="100" /> </animation-list>
③ 在Activity中使用xml文件设置ImageView控件imageView的背景源,并获取AnimationDrawable进行显示动画:
imageView.setBackgroundResource(R.drawable.anim_run); AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getBackground(); animationDrawable.start();
使用LayoutAnimationController设置ListView的动画
在使用LayoutAnimationController控制ListView控件的样式效果的方法:
① 在res的anim文件夹中创建一个list_anim.xml文件用于控制ListView控件的动画:
<?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"> <scale android:fromXScale="0.0" android:toXScale="1.0" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%" android:pivotY="50%" android:duration="1000" /> </set>
② 创建一个布局文件item.xml用于设置ListView的item的样式:
<?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="horizontal" android:paddingLeft="10dip" android:paddingRight="10dip" android:paddingTop="1dip" android:paddingBottom="1dip"> <TextView android:id="@+id/user_name" android:layout_width="180dip" android:layout_height="30dip" android:textSize="10pt" android:singleLine="true" /> <TextView android:id="@+id/user_id" android:layout_width="fill_parent" android:layout_height="fill_parent" android:textSize="10pt" android:singleLine="true"/> </LinearLayout>
③ 在主Activity的布局文件main.xml中添加一个ListView
<ListView android:id="@id/android:list" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scrollbars="vertical" android:layoutAnimation="@anim/anim_layout" />
④ 创建一个MainActivity继承ListActivity,并在onCreate方法中添加如下代码:
ListView listView = getListView(); List<HashMap<String, String>> list = new ArrayList<HashMap<String, String>>(); HashMap<String, String> hm1 = new HashMap<String, String>(); hm1.put("user_name", "arthinking"); hm1.put("user_id", "001"); HashMap<String, String> hm2 = new HashMap<String, String>(); hm2.put("user_name", "Jason"); hm2.put("user_id", "002"); list.add(hm1); list.add(hm2); SimpleAdapter simpleAdapter = new SimpleAdapter(this, list, R.layout.item, new String[] { "user_name", "user_id" }, new int[] { R.id.user_name, R.id.user_id }); listView.setAdapter(simpleAdapter); //通过Animation获取LayoutAnimationController对ListView进行设置 Animation animation = (Animation)AnimationUtils.loadAnimation(MainActivity.this, R.anim.list_anim); LayoutAnimationController lac = new LayoutAnimationController(animation); lac.setOrder(LayoutAnimationController.ORDER_NORMAL); lac.setDelay(0.5f); listView.setLayoutAnimation(lac);
这样,运行程序,显示的ListView就会按照xml文件中预置的动画效果显示了。
也可以通过xml文件进行设置动画:
① 在以上步骤的基础之上,在res/anim文件夹下创建一个anim_layout.xml文件:
<?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:delay="1" android:animationOrder="normal" android:animation="@anim/list_anim" />
② main在布局文件的的ListView添加如下属性:
android:layoutAnimation="@anim/anim_layout"
这样就在把MainActivity的onCreate()方法中的
//通过Animation获取LayoutAnimationController对ListView进行设置
注释后的代码删除了,直接使用xml进行动画的控制。
AnimationListener的使用
① 可以为一个Button添加一个事件:
button.setOnClickListener(new TestAnimationListener());
② 接下来是编写这个TestAnimationListener类,继承AnimationListener,并覆盖里面的三个方法:
//这里获取控件组,R.id.layoutId为main.xml的整体布局标签的id属性值 ViewGroup viewGroup = (ViewGroup)findViewById(R.id.layoutId); private class RemoveAnimationListener implements AnimationListener{ //该方法在淡出效果执行结束之后被调用 @Override public void onAnimationEnd(Animation animation) { //假设这里要在动画执行完之后删除一个TextView viewGroup.removeView(textView); } @Override public void onAnimationRepeat(Animation animation) { System.out.println("onAnimationRepeat"); } @Override public void onAnimationStart(Animation animation) { System.out.println("onAnimationStart"); } }
③ 同样的,在动画效果中添加控件可以按照如下实现
ScaleAnimation scale = new ScaleAnimation(1, 0.5f, 1, 0.5f, scale.setDuration(1000); scale.setStartOffset(100); TextView textView = new TextView(MainActivity.this); textView.setText("add"); viewGroup.addView(textView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT)); textView.startAnimation(scale);