Animation主要分为两类:一类是渐变动画tweened animation,一类是逐帧动画frame-by-frame animation。渐变动画就是用一帧图片产生四种效果:1、alpha,2、rotate,3、scale,4、translates,可以通过代码或者xml文件两种方法实现。而逐帧动画就是由一系列图片通过快速播放达到动的效果。另外还有一些Animationset、AnimationListener、LayoutAnimationController这些在实例中穿插着讲。
实例一:代码实现tweened animation
①新建一个布局文件:四个Button加一个ImageView
<span style="font-size:14px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageview" android:layout_width="50dp" android:layout_height="50dp" android:layout_marginTop="100dp" android:src="@drawable/arrow" /> </LinearLayout> <Button android:id="@+id/button_alpha" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/button_rotate" android:text="Alpha" /> <Button android:id="@+id/button_rotate" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/button_scale" android:text="rotate" /> <Button android:id="@+id/button_scale" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/button_translate" android:text="scale" /> <Button android:id="@+id/button_translate" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:text="translate" /> </RelativeLayout></span>
②Activity
<span style="font-size:14px;">package com.example.f_animation_tween; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.View.OnClickListener; 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.RotateAnimation; import android.view.animation.ScaleAnimation; import android.view.animation.TranslateAnimation; import android.widget.Button; import android.widget.ImageView; public class MainActivity extends ActionBarActivity { private Button button_alpha, button_rotate, button_scale, button_trans; private ImageView imageView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button_alpha = (Button) findViewById(R.id.button_alpha); button_rotate = (Button) findViewById(R.id.button_rotate); button_scale = (Button) findViewById(R.id.button_scale); button_trans = (Button) findViewById(R.id.button_translate); imageView = (ImageView) findViewById(R.id.imageview); button_alpha.setOnClickListener(new ButtonAlphaListerner()); button_rotate.setOnClickListener(new ButtonRotateListerner()); button_scale.setOnClickListener(new ButtonScaleListerner()); button_trans.setOnClickListener(new ButtonTransListerner()); } private class ButtonAlphaListerner implements OnClickListener { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // 新建一个AlphaAnimation,构造器参数代表从1到0的淡化 AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0); // 淡化时长为2秒 alphaAnimation.setDuration(2000); // 重复两次,加一次是三次 alphaAnimation.setRepeatCount(2); // 设置一个监听器 alphaAnimation.setAnimationListener(new AnimationListener() { @Override public void onAnimationStart(Animation arg0) { // TODO Auto-generated method stub System.out.println("--->start"); } @Override public void onAnimationRepeat(Animation arg0) { // TODO Auto-generated method stub System.out.println("--->repeat"); } @Override public void onAnimationEnd(Animation arg0) { // TODO Auto-generated method stub System.out.println("--->end"); } }); // 让图片产生淡化动画 imageView.startAnimation(alphaAnimation); // 也可以让其他控件产生动画 button_alpha.startAnimation(alphaAnimation); } } private class ButtonRotateListerner implements OnClickListener { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // 旋转动画,围绕的中心点由构造器的得出: // 第三四个参数代表X轴相对于自身最大,五六个参数Y轴同理,相当于图片的 // 右下角的点,Animation.RELATIVE_TO_PARENT是相对于父控件 RotateAnimation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 1); rotateAnimation.setDuration(2000); imageView.startAnimation(rotateAnimation); } } private class ButtonScaleListerner implements OnClickListener { @Override public void onClick(View arg0) { // TODO Auto-generated method stub // 横向纵向都缩小为原来的0.1,围绕的点和上面同理 ScaleAnimation scaleAnimation = new ScaleAnimation(1, 0.1f, 1, 0.1f, Animation.RELATIVE_TO_SELF, 1, Animation.RELATIVE_TO_SELF, 1); scaleAnimation.setDuration(2000); // 让其定格在最后 scaleAnimation.setFillAfter(true); imageView.startAnimation(scaleAnimation); } } private class ButtonTransListerner implements OnClickListener { @Override public void onClick(View arg0) { // TODO Auto-generated method stub AlphaAnimation alphaAnimation = new AlphaAnimation(1, 0); TranslateAnimation translateAnimation = new TranslateAnimation( Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 1, Animation.RELATIVE_TO_SELF, 0, Animation.RELATIVE_TO_SELF, 0); AnimationSet animationSet = new AnimationSet(true); // 可以通过一个AnimationSet添加多个动画效果,他是Animation的子类 animationSet.addAnimation(translateAnimation); animationSet.addAnimation(alphaAnimation); animationSet.setDuration(2000); imageView.startAnimation(animationSet); } } } </span>
实例二:用XML中实现渐变动画
①在res文件夹下新建一个anim文件夹,添加一个alpha.xml文件
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/linear_interpolator" > <alpha android:duration="2000" android:fromAlpha="1.0" android:toAlpha="0.0" /> </set></span>
②Activity主要代码
<span style="font-size:14px;">private class ButtonAlphaListerner implements OnClickListener { @Override public void onClick(View arg0) { // TODO Auto-generated method stub Animation alphaAnimation = AnimationUtils.loadAnimation( MainActivity.this, R.anim.alpha); imageView.startAnimation(alphaAnimation); } }</span>
对于批量修改来说xml的方法是更快的,当然也可以再xml文件中添加几个动画效果,具体的参数需要时就上网查,这里提供一个框架。
实例三:逐帧动画
①在drawable文件夹下放入几张图片然后新建一个anim.xml文件
<span style="font-size:14px;"><?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/up" android:duration="500"/> <item android:drawable="@drawable/right" android:duration="500"/> <item android:drawable="@drawable/down" android:duration="500"/> <item android:drawable="@drawable/left" android:duration="500"/> a </animation-list></span>
②Activity主要代码
<span style="font-size:14px;">private class ButtonListener implements OnClickListener { @Override public void onClick(View arg0) { // TODO Auto-generated method stub imageView.setBackgroundResource(R.drawable.anim); AnimationDrawable animationDrawable = (AnimationDrawable) imageView .getBackground(); //AnimationDrawable类就是用于实现逐帧动画 isStart = !isStart; if (isStart) animationDrawable.start(); else animationDrawable.stop(); } }</span>
实例四:LayoutAnimationController的使用
A layout animation controller is used to animated a layout‘s, or a view group‘s, children. Each child uses the same animation but for every one of them, the animation starts at a different time.
ListView也是继承ViewGroup的,所以以它为例写一个Demo。
①布局文件
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="test" /> </LinearLayout></span>
②res文件夹下新建一个anim文件夹,新建anim.xml和anim_layout.xml两个文件
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android" > <alpha android:duration="1000" android:fromAlpha="0" android:toAlpha="1" /> </set></span>
<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?> <layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" android:animation="@anim/anim" android:animationOrder="random" android:delay="200%" /> </span>
以上xml设置动画效果,执行顺序,和间隔时间
③Activity
package com.example.f_animation_layoutcon; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.view.animation.LayoutAnimationController; import android.widget.Adapter; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ListView; public class MainActivity extends ActionBarActivity { private Button button; private ListView listView; private ArrayAdapter<String> adapter; private List<String> list; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); button = (Button) findViewById(R.id.button); listView = (ListView) findViewById(R.id.listview); list = new ArrayList<String>(); list.add("北京"); list.add("上海"); list.add("广州"); adapter = new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, list); button.setOnClickListener(new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub Animation animation = AnimationUtils.loadAnimation( MainActivity.this, R.anim.anim); LayoutAnimationController lac = new LayoutAnimationController( animation); lac.setOrder(LayoutAnimationController.ORDER_RANDOM); lac.setDelay(1.0f); listView.setLayoutAnimation(lac); listView.setAdapter(adapter); // 也可以直接在listview里面指定layoutAnimation // 在ListView中添加属性android:layoutAnimation="@anim/anim_layout" } }); } }
执行效果,点击Button后,ListView的项目一个一个显示,而不是一下就全部显示。
小结:1、tween animation的两种实现方式、XML对批量修改更有用,事件监听器。2、frame-by-frame animation。3、LayoutAnimationController也是有两种实现方式。