我们不得不饮食、睡眠、游玩、恋爱,也就是说,我们不得不接触生活中最甜蜜的事情,不过我们必须不屈服于这些事物。—— 居里夫人


本讲内容:Android基础动画


一、动画分类

1、Tween Animation 变换动画
2、Frame Animation 帧动画
3、Layout Animation 布局动画
4、Property Animation 属性动画


二、Tween Animation 变换动画

a、Alpha:    渐变透明度动画(0.0表示完全透明  1.0表示完全不透明)

1、fromAlpha:动画起始时的透明度
2、toAlpha:动画终止时的透明度

b、Scale:  渐变尺寸缩放动画
1、fromX,toX分别是起始和结束时x坐标上的伸缩尺寸
2、fromY,toY分别是起始和结束时y坐标上的伸缩尺寸
3、pivotX,pivotY分别为伸缩动画相对于x,y坐标开始的位置

c、Translate:位置移动动画
1、fromXDelta,fromYDelta分别是起始时X,Y的坐标
2、toXDelta,toYDelta分别是结束时X,Y的坐标

d、Rotate:       旋转动画

1、fromDegrees 起始的角度
2、toDegrees 终止的角度
3、pivotX,pivotY分别是旋转动画相对于x,y的坐标开始位置


Tween Animation 变换动画共同属性

1、Duration:         动画持续时间(单位:毫秒)
2、fillAfter:           动画结束后,就停留在结束状态
3、fillBefore:        动画结束后,要回到开始时状态
4、interpolator:    动画插入器(加速、减速插入器)
5、repeatCount:  动画重复次数
6、repateMode:   顺序重复/倒序重复
7、startOffset:     动画之间的时间间隔(相当于动画延时,动画集中用到)


三、Tween Animation 实现方式

1、配置文件(/res/anim)--alpha、scale、translate、rotate
//加载配置文件
Animation scale=AnimationUtils.loadAnimation(this,R.anim.scale);
//开始播放
img.startAnimation(scale);

2、Java代码实现  --AlphaAnimation、ScaleAnimation、TranslateAnimation、RotateAnimation(AnimationSet动画集)      
//创建Alpha动画
Animation alpha=new AlphaAnimation(0.1f,1.0f);透明度从10%到100%
//设置动画时间为5秒
alhpa.setDuration(5000);
//开始播放
img.startAnimation(alpha);


示例一:

android 缩放动画objectAnimator android 伸缩动画_android

下面是res/layout/activity_main.xml 布局文件:



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/id_image"
        android:layout_width="200dp"
        android:layout_height="250dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/pic" />

    <Button
        android:id="@+id/id_alpha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="透明度动画" />

    <Button
        android:id="@+id/id_scale"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="缩放动画" />

    <Button
        android:id="@+id/id_translate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="移位动画" />

    <Button
        android:id="@+id/id_rotate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转动画" />

    <Button
        android:id="@+id/id_rotate_and_alpha"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="旋转和透明动画" />

</LinearLayout>


下面是res/anim/alpha动画文件:


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" >
    </alpha>

</set>



下面是res/anim/scale动画文件:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="2000"
        android:fillAfter="false"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

</set>



下面是res/anim/translate动画文件:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="1000"
        android:fromXDelta="10"
        android:fromYDelta="10"
        android:toXDelta="100"
        android:toYDelta="100" />

</set>



下面是res/anim/rotate动画文件:



<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360" />

</set>


下面是res/anim/rotate_alpha动画文件:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <rotate
        android:duration="1000"
        android:fromDegrees="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="+360" />

    <alpha
        android:duration="1000"
        android:fromAlpha="0.1"
        android:toAlpha="1.0" >
    </alpha>

</set>
下面是MainActivity.java主界面文件:
public class MainActivity extends Activity implements OnClickListener {
	private ImageView image;
	private Button alpha;
	private Button scale;
	private Button translate;
	private Button rotate;
	private Button rotate_alpha;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initViews();
	}

	/**
	 * 初始化控件
	 */
	private void initViews() {
		image = (ImageView) findViewById(R.id.id_image);
		alpha = (Button) findViewById(R.id.id_alpha);
		scale = (Button) findViewById(R.id.id_scale);
		translate = (Button) findViewById(R.id.id_translate);
		rotate = (Button) findViewById(R.id.id_rotate);
		rotate_alpha = (Button) findViewById(R.id.id_rotate_and_alpha);
		alpha.setOnClickListener(this);
		scale.setOnClickListener(this);
		translate.setOnClickListener(this);
		rotate.setOnClickListener(this);
		rotate_alpha.setOnClickListener(this);
	}

	/**
	 * 按钮点击事件
	 */
	public void onClick(View v) {
		Animation loadAnimation;
		switch (v.getId()) {
		case R.id.id_alpha:
			loadAnimation = AnimationUtils.loadAnimation(this, R.anim.alpha);
			image.startAnimation(loadAnimation);
			break;
		case R.id.id_scale:
			loadAnimation = AnimationUtils.loadAnimation(this, R.anim.scale);
			image.startAnimation(loadAnimation);
			break;
		case R.id.id_translate:
			loadAnimation = AnimationUtils
					.loadAnimation(this, R.anim.translate);
			image.startAnimation(loadAnimation);
			break;
		case R.id.id_rotate:
			loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate);
			image.startAnimation(loadAnimation);
			break;
		case R.id.id_rotate_and_alpha:
			loadAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_alpha);
			image.startAnimation(loadAnimation);
			break;
		}
	}
}



示例二:

下面是res/layout/activity_main.xml 布局文件:



<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/id_image"
        android:layout_width="200dp"
        android:layout_height="250dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/pic" />

    <Button
        android:id="@+id/id_btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="组合一" />

    <Button
        android:id="@+id/id_btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="组合二" />

    <Button
        android:id="@+id/id_btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="组合三" />

</LinearLayout>

下面是res/anim/activity_in动画文件:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator" >
  
  <scale
        android:duration="3000"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />
  <alpha
        android:duration="3000"
        android:fromAlpha="0"
        android:toAlpha="1.0" />
</set>



下面是res/anim/activity_out动画文件:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top" >

    <scale
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="0.1"
        android:toYScale="0.1" />

    <alpha
        android:duration="@android:integer/config_mediumAnimTime"
        android:fromAlpha="1.0"
        android:toAlpha="0" />

</set>

下面是MainActivity.java主界面文件:



public class MainActivity extends Activity implements OnClickListener {
	private ImageView image;
	private Button b1;
	private Button b2;
	private Button b3;
	private Button b4;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initViews();
	}

	/**
	 * 初始化控件
	 */
	private void initViews() {
		image = (ImageView) findViewById(R.id.id_image);
		b1 = (Button) findViewById(R.id.id_btn1);
		b2 = (Button) findViewById(R.id.id_btn2);
		b3 = (Button) findViewById(R.id.id_btn3);
		b1.setOnClickListener(this);
		b2.setOnClickListener(this);
		b3.setOnClickListener(this);
	}

	/**
	 * 按钮点击事件
	 */
	public void onClick(View v) {
		Animation loadAnimation;
		switch (v.getId()) {
		case R.id.id_btn1:
			//先播放A动画,结束后再播放B动画
			loadAnimation = AnimationUtils.loadAnimation(this, R.anim.translate);
			final Animation loadAnimation2 = AnimationUtils.loadAnimation(this, R.anim.rotate);
			image.startAnimation(loadAnimation);
			loadAnimation.setAnimationListener(new AnimationListener() {
				/**
				 * 动画开始时调用
				 */
				public void onAnimationStart(Animation animation) {
					
				}
				
				/**
				 * 动画重复时调用
				 */
				public void onAnimationRepeat(Animation animation) {
					
				}
				
				/**
				 * 动画结束时调用
				 */
				public void onAnimationEnd(Animation animation) {
					image.startAnimation(loadAnimation2);
				}
			});
			break;
		case R.id.id_btn2:
			//重复某个动画
			Animation alpha=new AlphaAnimation(0.1f, 1.0f);
			alpha.setDuration(1000);
			alpha.setRepeatCount(10);
			//倒序重复REVERSE  正序重复RESTART
			alpha.setRepeatMode(Animation.REVERSE);
			image.startAnimation(alpha);
			break;
		case R.id.id_btn3:
			/**
			 * Activity切换动画使用overridePendingTransition()方法
			 * 参数:第二个activity进入时的动画
			 * 		第一个activity退出时的动画
			 */
			Intent intent=new Intent(MainActivity.this,MainActivity2.class);
			startActivity(intent);
			overridePendingTransition(R.anim.activity_in, R.anim.activity_out);
			break;
		}
	}
}

示例三:

android 缩放动画objectAnimator android 伸缩动画_android_02

  

android 缩放动画objectAnimator android 伸缩动画_旋转动画_03

下面是res/layout/activity_main.xml 布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/id_image"
        android:layout_width="200dp"
        android:layout_height="250dp"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/b4" />

    <Button
        android:id="@+id/id_btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="布局动画" />

    <Button
        android:id="@+id/id_btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="逐帧动画" />

</LinearLayout>

下面是res/layout/list_layout.xml 布局文件:


<?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/id_listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>


下面是res/drawable/frame.xml 布局文件:


<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/b1"
        android:duration="500"/>
    <item
        android:drawable="@drawable/b2"
        android:duration="500"/>
    <item
        android:drawable="@drawable/b3"
        android:duration="500"/>
    <item
        android:drawable="@drawable/b4"
        android:duration="500"/>

</animation-list>
下面是ListActivity.java文件:
public class ListActivity extends Activity{
	private ListView listView;
	private List<String> dataList;
	
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.list_layout);
		listView=(ListView) findViewById(R.id.id_listView);
		ArrayAdapter<String> adapter=new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, getData());
		listView.setAdapter(adapter);
		
		//布局动画
		Animation loadAnimation = AnimationUtils.loadAnimation(this, R.anim.activity_in);
		LayoutAnimationController control=new LayoutAnimationController(loadAnimation);
		control.setOrder(LayoutAnimationController.ORDER_RANDOM);//播放的顺序
		listView.setLayoutAnimation(control);
		listView.startLayoutAnimation();
	}

	private List<String> getData() {
		dataList=new ArrayList<String>();
		for(int i=0;i<20;i++){
			dataList.add("黎国劲"+i);
		}
		return dataList;
	}
}



下面是MainActivity.java主界面文件:


public class MainActivity extends Activity implements OnClickListener {
	private ImageView image;
	private Button b1;
	private Button b2;
	private Button b3;
	private Button b4;

	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initViews();
	}

	/**
	 * 初始化控件
	 */
	private void initViews() {
		image = (ImageView) findViewById(R.id.id_image);
		b1 = (Button) findViewById(R.id.id_btn1);
		b2 = (Button) findViewById(R.id.id_btn2);
		b1.setOnClickListener(this);
		b2.setOnClickListener(this);
	}

	/**
	 * 按钮点击事件
	 */
	public void onClick(View v) {
		Animation loadAnimation;
		switch (v.getId()) {
		case R.id.id_btn1:
			Intent intent=new Intent(MainActivity.this,ListActivity.class);
			startActivity(intent);
			break;
		case R.id.id_btn2:
			image.setImageResource(R.drawable.frame);
			break;
		}
	}
}








Take your time and enjoy it