1.基本動畫使用方式
在包com.example.android.apis.view下面的Animation1～3有各種使用方式，分別來進行介紹。
Animation1.java
如下所示（原始代碼在包com.example.android.apis.view下面）
package
com.example.android.apis.view;
// Need the following import to
get access to the app resources, since this
// class is in a sub-package.
import
com.example.android.apis.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import
android.view.animation.Animation;
import
android.view.animation.AnimationUtils;
public class Animation1 extends
Activity implements View.OnClickListener {
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.animation_1);
View loginButton =
findViewById(R.id.login);
loginButton.setOnClickListener(this);
}
public void onClick(View v) {
Animation shake =
AnimationUtils.loadAnimation(this, R.anim.shake);
findViewById(R.id.pw).startAnimation(shake);
}
R.layout.animation_1對應(yīng)的XML文件為：
<?xml version="1.0"
encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dip"
android:text="@string/animation_1_instructions"
/>
<EditText
android:id="@+id/pw"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:singleLine="true"
android:password="true"
/>
<Button
android:id="@+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/googlelogin_login"
/>
</LinearLayout>
此XML文件為程序的主運行界面。如何實現(xiàn)動畫呢？
實際上實現(xiàn)動畫有兩種方式，一種是在代碼中構(gòu)造Animation對象，一種是在XML文件中定義相關(guān)的資源。
如果構(gòu)造對象，則應(yīng)該分別新建AlphaAnimation等對象，而如果是XML文件中，則應(yīng)該使用alpha等標簽。在本例中，使用的是XML文件來創(chuàng)建Animation對象。
|
XML
中
alpha
漸變透明度動畫效果
scale
漸變尺寸伸縮動畫效果
translate
畫面轉(zhuǎn)換位置移動動畫效果
rotate
畫面轉(zhuǎn)移旋轉(zhuǎn)動畫效果
|
|
JavaCode
中
AlphaAnimation
漸變透明度動畫效果
ScaleAnimation
漸變尺寸伸縮動畫效果
TranslateAnimation
畫面轉(zhuǎn)換位置移動動畫效果
RotateAnimation
畫面轉(zhuǎn)移旋轉(zhuǎn)動畫效果
|
在OnCreate函數(shù)中，通過綁定Button實現(xiàn)對按鈕事件的監(jiān)聽。
在onClick函數(shù)中，定義了點擊按鈕時候觸發(fā)的動作，這里面的代碼即實現(xiàn)相應(yīng)的特效的代碼。從代碼中可以看到，這里首先執(zhí)行下面的代碼：
Animation shake =
AnimationUtils.loadAnimation(this, R.anim.shake);
findViewById(R.id.pw).startAnimation(shake);
在這段代碼中，通過loadAnimation函數(shù)來載入動畫元素，而動畫資源則是在R.anim.shake中定義。找到該XML文件，內(nèi)容如下：
<?xml version="1.0"
encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="0"
android:toXDelta="10"
android:duration="1000"
android:interpolator="@anim/cycle_7"
/>
從中可以看到，該XML文件中，通過標簽tranlate來定義平移的動作，并且設(shè)定了相關(guān)的參數(shù)，另外，注意其中的interpolator參數(shù)，該參數(shù)的設(shè)定是通過另外一個XML文件cycle_7來設(shè)定的。內(nèi)容如下：
<?xml version="1.0"
encoding="utf-8"?>
<cycleInterpolator
xmlns:android="http://schemas.android.com/apk/res/android"
android:cycles="7" />
至此，完成了動畫的Animation，即參數(shù)的設(shè)定，最終就是調(diào)用AnimationUtils.loadAnimation來創(chuàng)建Animation對象shake，然后通過某個View的字函數(shù)startAnimation在該View上啟動該動畫。
比如這里：
findViewById(R.id.pw).startAnimation(shake);
首先獲得的是password的那個EditText的View，然后在該View上調(diào)用startAnimation方法，啟動shake這種動畫。效果就是點擊login登錄按鈕后，password的編輯框會出現(xiàn)來回抖動的效果。
既然弄清楚了Animation的兩種使用方法，并且在上面中通過剖析Android的API
Demo了解了使用XML來實現(xiàn)動畫效果的例子，那么下面我們自己動手，利用Java
Code的辦法，實現(xiàn)同樣的效果。
具體過程如下：
-
首先新建一個Android項目功能，然后編輯main.xml文件，添加一個Button和EditText控件，實現(xiàn)類似的原來那個例子那樣的控件效果。
-
編輯OnCreate函數(shù)，在代碼中實現(xiàn)前面的這些效果。
代碼如下：
import android.app.Activity;
import
android.app.SearchManager.OnCancelListener;
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.view.animation.CycleInterpolator;
import
android.view.animation.Interpolator;
import
android.view.animation.TranslateAnimation;
public class AnimationTest
extends Activity {
/** Called when the activity
is first created. */
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
View login =
findViewById(R.id.login);
login.setOnClickListener(new
OnClickListener() {
@Override
public void
onClick(View v) {
TranslateAnimation
ta = new TranslateAnimation(0, 10, 0, 0);
ta.setDuration(1000);
ta.setInterpolator(new
CycleInterpolator(7));
findViewById(R.id.passwd).startAnimation(ta);
}
});
}
}
-
運行該工程后，就能夠達到和Demo例子中同樣的效果。
-
代碼解讀：
其實功能很簡單，原始Demo是通過loadAnimation函數(shù)讀取XML文件，那么我們只需要新建對應(yīng)的Animation對象就行了。原始例子中使用的是Translate標簽，對應(yīng)的就是TranslateAnimation類，為此新建該對象，設(shè)定的參數(shù)就是原XML文件中的fromXDelta，toXDelta等等，由于原來的標簽沒有設(shè)定Y方向上的參數(shù)，所以使用默認的0，0.然后觀察發(fā)現(xiàn)原始還是用了一個cycleInterpolator的XML資源，其中定義了一個cycle值，為此同樣找到Java
Code對應(yīng)的類，new一個這樣的對象并設(shè)定參數(shù)。最終同樣的對密碼控件實現(xiàn)該特效效果，達到同樣的效果。
2.利用XML來定義動畫
在分析完上面這個最基本的動畫特效使用之后，下面繼續(xù)分析API
Demo中剩余的兩個例子，它們分別是位于com.example.android.apis.view包下面的Animation2.java和Animation3.java文件。
首先分析Animation2.java對應(yīng)的工程，原文件如下。
package
com.example.android.apis.view;
// Need the following import to
get access to the app resources, since this
// class is in a sub-package.
import
com.example.android.apis.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import
android.view.animation.AnimationUtils;
import
android.widget.AdapterView;
import
android.widget.ArrayAdapter;
import android.widget.Spinner;
import
android.widget.ViewFlipper;
public class Animation2 extends
Activity implements
AdapterView.OnItemSelectedListener
{
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.animation_2);
mFlipper = ((ViewFlipper)
this.findViewById(R.id.flipper));
mFlipper.startFlipping();
Spinner s = (Spinner)
findViewById(R.id.spinner);
ArrayAdapter<String>
adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item,
mStrings);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
s.setAdapter(adapter);
s.setOnItemSelectedListener(this);
}
public void
onItemSelected(AdapterView parent, View v, int position, long id) {
switch (position) {
case 0:
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_up_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_up_out));
break;
case 1:
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_left_out));
break;
case 2:
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
android.R.anim.fade_out));
break;
default:
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.hyperspace_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.hyperspace_out));
break;
}
}
public void
onNothingSelected(AdapterView parent) {
}
private String[] mStrings = {
"Push up",
"Push left", "Cross fade", "Hyperspace"};
private ViewFlipper mFlipper;
}
從代碼中可以看到，該類有一個ViewFlipper類型的成員變量，以及定義了菜單項的字符串?dāng)?shù)組。在OnCreate函數(shù)中，首先設(shè)定程序的主界面布局為animation_2.xml文件，該文件的內(nèi)容如下：
<?xml version="1.0"
encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ViewFlipper
android:id="@+id/flipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:flipInterval="2000"
android:layout_marginBottom="20dip"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="26sp"
android:text="@string/animation_2_text_1"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="26sp"
android:text="@string/animation_2_text_2"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="26sp"
android:text="@string/animation_2_text_3"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="26sp"
android:text="@string/animation_2_text_4"/>
</ViewFlipper>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:text="@string/animation_2_instructions"
/>
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
從該XML文件中可以看到主界面的組成，一個ViewFlipper控件，一個顯示提示信息的TextView，以及一個Spinner控件。所謂的ViewFlipper是一個多View的集合，但是每次都只能夠顯示出一個View，從最終的動畫效果可以看到，該ViewFlipper中的每一個TextView，都以事先定義的某種動畫形式不斷的切換，輪流的顯示出來。Spinner則是一個選擇菜單，點擊后出現(xiàn)下拉菜單，讓用戶選擇某個選項，在這里，每一個選項的內(nèi)容就是數(shù)組mStrings的內(nèi)容。
圖
2-1
Spinner
的效果
最終的效果就是，用戶通過點擊Spinner中的某個選項，可以選擇不同的效果。而上方的那個ViewFlipper則以該種動畫效果輪流顯示出每一個TextView，ViewFlipper的四個子TextView得以輪流動畫顯示，消失。
在OnCreate函數(shù)中，首先獲得ViewFlipper控件，然后通過調(diào)用startFlipping函數(shù)，開啟一個計時器來循環(huán)顯示出子View。此后，獲得Spinner控件，然后利用mString數(shù)組創(chuàng)建一個ArrayAdapter，并指定為該Spinner的Adapter，最后，調(diào)用setOnItemSelectedListener開啟一個監(jiān)聽選項的監(jiān)聽器，每當(dāng)選擇不同的選項時，進入不同的處理過程。
在分析完OnCreate函數(shù)后，整個工程就剩下選項被選中時候的函數(shù)實現(xiàn)了，即onItemSelected函數(shù)，當(dāng)程序啟動后OnCreate函數(shù)中添加了監(jiān)視器，開始監(jiān)聽。用戶一點點擊選擇了某個選項，就會根據(jù)這個position來進入不同的處理過程中。從代碼中可以看到，switch……case的結(jié)構(gòu)，分別針對用戶選擇
"Push
up", "Push left", "Cross fade", "Hyperspace"
這四個菜單時候的動作，在每個選項中的動作類似，因此只針對第一個進行介紹。
case 0:
mFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_up_in));
mFlipper.setOutAnimation(AnimationUtils.loadAnimation(this,
R.anim.push_up_out));
break;
在用戶選擇了第一個Push
Up菜單后，該ViewFlipper通過使用setInAnimation函數(shù)來設(shè)定一個進入到屏幕中的View的動畫（Specifies
the animation used to animate a View that enters the
screen.）通過使用setOutAnimation來指定一個離開屏幕時候的View的動畫（Specifies
the animation used to
animate a View that exit the
screen.）這兩個函數(shù)的參數(shù)都是一個Animation類型的對象，在前面第一部分的講解中知道，有兩種辦法可以得到該對象。
-
XML
文件中定義，利用AnimationUtils.loadAnimation來載入該動畫
-
利用Java
Code的Animation類來創(chuàng)建各種類型的對象。
在這里，使用的是第一種辦法。查看相應(yīng)的XML文件。
push_up_in.xml
文件
<?xml version="1.0"
encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromYDelta="100%p" android:toYDelta="0"
android:duration="300"/>
<alpha
android:fromAlpha="0.0" android:toAlpha="1.0"
android:duration="300" />
</set>
從代碼中可以看到，這是一個動畫集合，包括一個translate，即平移動畫，以及一個alpha，即透明度漸變的動畫。在標簽中分別設(shè)定了變化的參數(shù)，持續(xù)的時間等等。
從代碼以及最終的運行效果可以知道，該動畫特效就是，進入的時候從Y軸坐標100變化到0，即從下往上進入屏幕，透明度從0變?yōu)?font face="Courier New, monospace">1，即從開始的不可見，逐漸變的清晰可見。類似的，push_up_out則實現(xiàn)相反的效果，在XML文件中有相應(yīng)的表示。
同理，push_up_out.xml文件也可以采用類似的方法分析。
至此，我們分析完了第二個工程，對整個動畫如何實現(xiàn)，如何正確的調(diào)用Animation函數(shù)都有了一個更清晰的認識。
3.利用JavaCode來實現(xiàn)動畫
最后，我們簡單來分析下第三個工程，因為上面兩個工程的分析，最后一個的實現(xiàn)機制也是類似的。
Animation3.java
package
com.example.android.apis.view;
// Need the following import to
get access to the app resources, since this
// class is in a sub-package.
import
com.example.android.apis.R;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import
android.view.animation.AnimationUtils;
import
android.view.animation.Animation;
import
android.view.animation.TranslateAnimation;
import
android.widget.AdapterView;
import
android.widget.ArrayAdapter;
import android.widget.Spinner;
public class Animation3 extends
Activity implements AdapterView.OnItemSelectedListener {
private static final String[]
INTERPOLATORS = {
"Accelerate",
"Decelerate", "Accelerate/Decelerate",
"Anticipate",
"Overshoot", "Anticipate/Overshoot",
"Bounce"
};
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.animation_3);
Spinner s = (Spinner)
findViewById(R.id.spinner);
ArrayAdapter<String>
adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item,
INTERPOLATORS);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
s.setAdapter(adapter);
s.setOnItemSelectedListener(this);
}
public void
onItemSelected(AdapterView parent, View v, int position, long id) {
final View target =
findViewById(R.id.target);
final View targetParent =
(View) target.getParent();
Animation a = new
TranslateAnimation(0.0f,
targetParent.getWidth()
- target.getWidth() - targetParent.getPaddingLeft() -
targetParent.getPaddingRight(),
0.0f, 0.0f);
a.setDuration(1000);
a.setStartOffset(300);
a.setRepeatMode(Animation.RESTART);
a.setRepeatCount(Animation.INFINITE);
switch (position) {
case 0:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.accelerate_interpolator));
break;
case 1:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.decelerate_interpolator));
break;
case 2:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.accelerate_decelerate_interpolator));
break;
case 3:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.anticipate_interpolator));
break;
case 4:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.overshoot_interpolator));
break;
case 5:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.anticipate_overshoot_interpolator));
break;
case 6:
a.setInterpolator(AnimationUtils.loadInterpolator(this,
android.R.anim.bounce_interpolator));
break;
}
target.startAnimation(a);
}
public void
onNothingSelected(AdapterView parent) {
}
}
同工程2，在OnCreate函數(shù)中，設(shè)定了程序運行的主界面的layout，包括兩個TextView和一個Spinner，Spinner同樣是一個選擇菜單，兩個TextView中，一個是顯示的標簽，保持不變，另外一個實現(xiàn)動畫特效的View。
Animation3.xml文件：
<?xml version="1.0"
encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false">
<TextView
android:id="@+id/target"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="26sp"
android:text="@string/animation_3_text"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:layout_marginBottom="5dip"
android:text="@string/animation_2_instructions"
/>
<Spinner
android:id="@+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>
圖3-1 Spinner選項
回到代碼中，當(dāng)用戶選擇某個選項時，進入到onItemSelected函數(shù)，此時獲得帶顯示動畫特效的那個TextView的引用以及它的父View，然后新建一個Animatioin，注意此處沒有通過XML文件來定義，而是利用Java
Code來創(chuàng)建動畫特效。通過設(shè)置各種參數(shù)，定義特效的實現(xiàn)形式。其中下面的代碼需要注意：
Animation a = new
TranslateAnimation(0.0f,
targetParent.getWidth()-target.getWidth()-targetParent.getPaddingLeft()
-
targetParent.getPaddingRight(),0.0f,
0.0f);</LinearLayout>
為何要使用targetParent來計算長寬，而不是直接使用自己這個TextView呢？原因在于，該TextView是位于整個layout中的，而待實現(xiàn)的這個特效，實際上是要這個TextView在父layout上面左右移動（或者是其他運行形式），所以，運動的范圍要局限在父對象中，因此是使用targetParent而不是target來設(shè)定該Animation。
余下的工作就是設(shè)定各種參數(shù)，對于本函數(shù)中的Swtich……case，則只是起到了修改Interpolator的作用，用戶在選中不同的Interpolator后，該TextView將采用不同的形式來運動，那么，何為Interpolator對象呢？
SDK中的解釋再清楚不過了：
"
An
interpolator defines the rate of change of an animation. This allows
the basic animation effects (alpha, scale, translate, rotate) to be
accelerated, decelerated, repeated, etc."
也就是說Interpolator是一個定義了動畫變化的快慢速率的東西，它允許定義基本的動畫效果為加速，減速或者重復(fù)顯示等等效果。
最后，完成了上面的工作后，通過調(diào)用target.startAnimation(a);來使得target這個TextView按照設(shè)定的動畫效果a進行變換顯示。
最后做一個總結(jié)：實現(xiàn)動畫的方式有兩種：XML和JavaCode，還有，學(xué)習(xí)使用的最好辦法是看Sample，查SDK文檔，雖然初看Sample可能覺得有些困難，但是慢慢查文檔，遇到復(fù)雜的用法和控件就先查查文檔看看有沒有，或者Google之，慢慢就會明白了。還有，學(xué)習(xí)之余多進行變化，比如換種方式實現(xiàn)，或者注釋掉某行代碼，再查看效果，即可對關(guān)鍵點有一個更清晰的了解。
posted on 2011-10-22 10:27
deercoder 閱讀(4860)
評論(0) 編輯 收藏 引用 所屬分類:
Android