Android：Animation動畫

標籤：android   animation   

    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;@Overrideprotected 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 {@Overridepublic 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() {@Overridepublic void onAnimationStart(Animation arg0) {// TODO Auto-generated method stubSystem.out.println("--->start");}@Overridepublic void onAnimationRepeat(Animation arg0) {// TODO Auto-generated method stubSystem.out.println("--->repeat");}@Overridepublic void onAnimationEnd(Animation arg0) {// TODO Auto-generated method stubSystem.out.println("--->end");}});// 讓圖片產生淡化動畫imageView.startAnimation(alphaAnimation);// 也可以讓其他控制項產生動畫button_alpha.startAnimation(alphaAnimation);}}private class ButtonRotateListerner implements OnClickListener {@Overridepublic 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 {@Overridepublic 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 {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubAlphaAnimation 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 {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubAnimation 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 {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubimageView.setBackgroundResource(R.drawable.anim);AnimationDrawable animationDrawable = (AnimationDrawable) imageView.getBackground();                 //AnimationDrawable類就是用於實現逐幀動畫isStart = !isStart;if (isStart)animationDrawable.start();elseanimationDrawable.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;@Overrideprotected 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() {@Overridepublic void onClick(View arg0) {// TODO Auto-generated method stubAnimation 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也是有兩種實現方式。

          

Android：Animation動畫