Android基礎(chǔ)知識(shí)之tween動(dòng)畫(huà)效果

更新時(shí)間：2016年06月08日 08:51:45 作者：_江南一點(diǎn)雨

Android基礎(chǔ)知識(shí)之tween動(dòng)畫(huà)效果,Android一共提供了兩種動(dòng)畫(huà),這篇文章主要介紹了Android動(dòng)畫(huà)效果之tween動(dòng)畫(huà)，感興趣的小伙伴們可以參考一下

Android中一共提供了兩種動(dòng)畫(huà)，其一便是tween動(dòng)畫(huà)，tween動(dòng)畫(huà)通過(guò)對(duì)view的內(nèi)容進(jìn)行一系列的圖像變換（包括平移，縮放，旋轉(zhuǎn)，改變透明度）來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果，動(dòng)畫(huà)效果的定義可以使用xml，也可以使用編碼來(lái)實(shí)現(xiàn)。下面我們逐一查看tween能夠?qū)崿F(xiàn)的動(dòng)畫(huà)效果。
先看看工程的整體結(jié)構(gòu)吧：

這里寫(xiě)圖片描述

我們要實(shí)現(xiàn)的效果圖如圖

這里寫(xiě)圖片描述

點(diǎn)擊按鈕則執(zhí)行相應(yīng)的動(dòng)畫(huà)操作。

布局文件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:orientation="vertical"
 tools:context="com.example.tweentest.MainActivity" >

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:orientation="vertical" >

 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="horizontal" >

  <Button
  android:id="@+id/alpha"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:onClick="doanim"
  android:text="透明" />

  <Button
  android:id="@+id/scale"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:onClick="doanim"
  android:text="縮放" />

  <Button
  android:id="@+id/rotate"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:onClick="doanim"
  android:text="旋轉(zhuǎn)" />

  <Button
  android:id="@+id/translate"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:onClick="doanim"
  android:text="移動(dòng)" />

  <Button
  android:id="@+id/combo"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:onClick="doanim"
  android:text="組合" />
 </LinearLayout>

 <Button
  android:id="@+id/go_other_activity"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:onClick="doanim"
  android:text="GO！" />
 </LinearLayout>

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal" >

 <ImageView
  android:id="@+id/image1"
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:src="@drawable/jiafeimao" />
 </LinearLayout>

</LinearLayout>

好了，先來(lái)看第一個(gè)動(dòng)畫(huà)效果。
要實(shí)現(xiàn)讓圖片變成透明的動(dòng)畫(huà)效果，先在anim文件夾中新建一個(gè)名為alpha的xml文件，關(guān)于透明的動(dòng)畫(huà)效果都寫(xiě)在這個(gè)文件中：

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

 <!-- 花1000毫秒，從不透明（1）變?yōu)橥该鳎?） -->
 <!--
 repeatCount表示重復(fù)次數(shù)
 repeatMode表示開(kāi)始的模式，restart表示每次重新開(kāi)始，reverse表示接著來(lái)，即不透明->透明->不透明
 -->
 <alpha
 android:duration="2000"
 android:fromAlpha="1"
 android:repeatCount="5"
 android:repeatMode="reverse"
 android:toAlpha="0" />

</set>

duration屬性表示動(dòng)畫(huà)執(zhí)行的時(shí)間，以毫秒為單位，repeatCount表示動(dòng)畫(huà)重復(fù)的次數(shù)，repeatMode屬性有兩個(gè)值，一個(gè)是restart，表示動(dòng)畫(huà)每次執(zhí)行完之后都重新開(kāi)始執(zhí)行（不透明->透明，不透明->透明….），reverse表示動(dòng)畫(huà)每次執(zhí)行完之后不重新開(kāi)始而是接著反向執(zhí)行（不透明->透明->不透明->透明….），換句話說(shuō)，如果是reverse，則表示動(dòng)畫(huà)從不透明變?yōu)橥该骱笤俾兓夭煌该?，如果是restart則表示動(dòng)畫(huà)從不透明變?yōu)橥该骱?，然后快速恢?fù)原狀。以上這三個(gè)屬性在所有的tween動(dòng)畫(huà)中都有，也是最常用的屬性。fromAlpha表示初始透明度，1表示不透明，0表示完全透明；toAlpha表示動(dòng)畫(huà)結(jié)束時(shí)的透明度。

這是動(dòng)畫(huà)的xml文件，再看看Java代碼是怎樣的。

public class MainActivity extends Activity {

 private ImageView iv = null;
 private Animation animation = null;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 this.iv = (ImageView) this.findViewById(R.id.image1);
 }
 public void doanim(View v){
 switch (v.getId()) {
 case R.id.alpha:
  //讀取動(dòng)畫(huà)文件
  animation = AnimationUtils.loadAnimation(this, R.anim.alpha);
  //動(dòng)畫(huà)結(jié)束之后使用什么頁(yè)面填充
  //使用動(dòng)畫(huà)結(jié)束后的樣子填充，即保持結(jié)束時(shí)的畫(huà)面
  animation.setFillAfter(true);
  //應(yīng)用動(dòng)畫(huà)特效
  iv.startAnimation(animation);
  break;
 case R.id.scale:
  animation = AnimationUtils.loadAnimation(this, R.anim.scale);
  iv.startAnimation(animation);
  break;
 case R.id.rotate:
  animation = AnimationUtils.loadAnimation(this, R.anim.rotate);
  iv.startAnimation(animation);
  break;
 case R.id.translate:
  animation = AnimationUtils.loadAnimation(this, R.anim.translate);
  iv.startAnimation(animation);
  break;
 case R.id.combo:
  animation = AnimationUtils.loadAnimation(this, R.anim.combo);
  iv.startAnimation(animation);
  break;
 case R.id.go_other_activity:
  Intent intent = new Intent(MainActivity.this,SecondActivity.class);
  startActivity(intent);
  //設(shè)置讓MainActivity從左邊出，SecondActivity從右邊進(jìn)
  overridePendingTransition(R.anim.enter_anim, R.anim.exit_anim);
  break;
 }
 }
}

先拿到ImageView，然后在點(diǎn)擊按鈕時(shí)讀取動(dòng)畫(huà)文件，并給imageview設(shè)置動(dòng)畫(huà)效果。

縮放動(dòng)畫(huà)：

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

 <!--
 兩個(gè)1表示開(kāi)始時(shí)圖像大小不變，兩個(gè)2表示圖像放大一倍，
 如果小于1則表示圖像縮小。兩個(gè)0表示基于左上角進(jìn)行放大
 pivotX如果是50%，表示基于圖像中心放大
 pivotX如果是50%p，表示基于父級(jí)中心放大 
 infinite如它的英文意思，無(wú)限循環(huán)

 -->
 <scale
 android:duration="1000"
 android:fromXScale="1"
 android:fromYScale="1"
 android:pivotX="0"
 android:pivotY="0"
 android:repeatCount="infinite"
 android:repeatMode="reverse"
 android:toXScale="2"
 android:toYScale="2" />

</set>

fromXScale和fromYScale分別表示初始時(shí)圖像的縮放比例，1表示不縮放，toXScale和toYScale表示動(dòng)畫(huà)結(jié)束時(shí)的縮放比例，2表示動(dòng)畫(huà)放大一倍，如果是0.5則表示縮小一倍。pivotX和pivotY表示執(zhí)行縮放時(shí)的參考點(diǎn)，兩個(gè)值都為0表示是基于圖像左上角來(lái)執(zhí)行縮放操作，如果都是50%表示基于圖像中心來(lái)執(zhí)行縮放操作，如果是100%表示基于圖像右下角執(zhí)行縮放操作，如果是50%p,表示基于屏幕的中心執(zhí)行縮放操作，如果是100%p表示基于屏幕的右下角執(zhí)行縮放操作。

java代碼見(jiàn)上文。

旋轉(zhuǎn)動(dòng)畫(huà)：

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

 <!-- fromDegrees表示開(kāi)始的角度
 toDegrees結(jié)束的角度,180表示旋轉(zhuǎn)半圈
 兩個(gè)100%表示基于自己的右下角旋轉(zhuǎn)
 想讓倒著轉(zhuǎn)，把180改為-180即可
 -->
 <rotate
 android:duration="1000"
 android:fromDegrees="0"
 android:pivotX="100%"
 android:pivotY="100%"
 android:toDegrees="180" />

</set>

這里有兩個(gè)參數(shù)解釋?zhuān)琭romDegrees表示初始角度，0表示正常，toDegrees表示旋轉(zhuǎn)角度，180表示順時(shí)針旋轉(zhuǎn)180度，-180表示逆時(shí)針旋轉(zhuǎn)180度pivotX參數(shù)的意義和縮放動(dòng)畫(huà)中的參數(shù)意義相同。

Java代碼同上文。

移動(dòng)動(dòng)畫(huà)：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="false" >
<!-- from表示從哪里開(kāi)始移動(dòng)
to表示移動(dòng)到那里
100%表示移動(dòng)到自己的右下角
100%p表示移動(dòng)到屏幕右下角
 -->
 <translate
 android:repeatCount="infinite"
 android:repeatMode="reverse"
 android:duration="1000"
 android:fromXDelta="0"
 android:fromYDelta="0"
 android:toXDelta="100%"
 android:toYDelta="100%" />

</set>

fromXDelta表示初始時(shí)圖像在x軸的位置toXDelta表示結(jié)束時(shí)圖像在X軸的位置。

四種動(dòng)畫(huà)效果都已經(jīng)說(shuō)完，如果要實(shí)現(xiàn)組合效果呢？

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

 <rotate
 android:duration="1000"
 android:fromDegrees="0"
 android:pivotX="100%"
 android:pivotY="100%"
 android:toDegrees="180" />

 <alpha
 android:duration="2000"
 android:fromAlpha="1"
 android:repeatCount="5"
 android:repeatMode="reverse"
 android:toAlpha="0" />

 <scale
 android:duration="1000"
 android:fromXScale="1"
 android:fromYScale="1"
 android:pivotX="0"
 android:pivotY="0"
 android:repeatCount="infinite"
 android:repeatMode="reverse"
 android:toXScale="2"
 android:toYScale="2" />

 <translate
 android:duration="1000"
 android:fromXDelta="0"
 android:fromYDelta="0"
 android:repeatCount="infinite"
 android:repeatMode="reverse"
 android:toXDelta="100%"
 android:toYDelta="100%" />

</set>

把之前所有的動(dòng)畫(huà)效果放在一個(gè)文件中就可以了。

android中的動(dòng)畫(huà)效果可以對(duì)任何組件使用，因?yàn)榻M件都是繼承自View，而startAnimation(Animation animation)方法就是View中的方法。那么兩個(gè)Activity之間切換能不能使用動(dòng)畫(huà)效果呢？當(dāng)然可以。上文中的Java代碼中，有這么一句：

case R.id.go_other_activity:
  Intent intent = new Intent(MainActivity.this,SecondActivity.class);
  startActivity(intent);
  //設(shè)置讓MainActivity從左邊出，SecondActivity從右邊進(jìn)
  overridePendingTransition(R.anim.enter_anim, R.anim.exit_anim);
  break;

想要實(shí)現(xiàn)activity之間切換的動(dòng)畫(huà)，使用overridePendingTransition(R.anim.enter_anim, R.anim.exit_anim);方法即可，該方法要兩個(gè)參數(shù)，分別表示新activity進(jìn)入時(shí)的動(dòng)畫(huà)和舊activity出去時(shí)的動(dòng)畫(huà)。

進(jìn)入時(shí)動(dòng)畫(huà)：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="false" >
 <translate
 android:duration="1000"
 android:fromXDelta="100%"
 android:fromYDelta="0"
 android:toXDelta="0"
 android:toYDelta="0" />

</set>

出去時(shí)動(dòng)畫(huà)：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
 android:shareInterpolator="false" >
 <translate
 android:duration="1000"
 android:fromXDelta="0"
 android:fromYDelta="0"
 android:toXDelta="-100%"
 android:toYDelta="0" />

</set>

效果如圖：

這里寫(xiě)圖片描述