• Android Video Tutorials

Android - 動畫

上一頁
下一頁

動畫是建立運動和形狀變化的過程。

Android 中的動畫可以透過多種方式實現。在本節中，我們將討論一種簡單且廣泛使用的動畫製作方法，稱為補間動畫。

補間動畫

補間動畫需要一些引數，例如起始值、結束值、大小、時間持續時間、旋轉角度等，並在該物件上執行所需的動畫。它可以應用於任何型別的物件。因此，為了使用它，Android 為我們提供了一個名為 Animation 的類。

為了在 Android 中執行動畫，我們將呼叫 AnimationUtils 類的靜態函式 loadAnimation()。我們將從 Animation 物件例項中獲取結果。其語法如下：

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
   R.anim.myanimation);

請注意第二個引數。它是我們的動畫 xml 檔案的名稱。您必須在 res 目錄下建立一個名為 anim 的新資料夾，並在 anim 資料夾下建立一個 xml 檔案。

此動畫類具有許多有用的函式，如下所示：

序號 方法及描述
1

start()

此方法啟動動畫。
2

setDuration(long duration)

此方法設定動畫的持續時間。
3

getDuration()

此方法獲取上面方法設定的持續時間。
4

end()

此方法結束動畫。
5

cancel()

此方法取消動畫。

為了將此動畫應用於物件，我們只需呼叫物件的 startAnimation() 方法。其語法如下：

ImageView image1 = (ImageView)findViewById(R.id.imageView1);
image.startAnimation(animation);

示例

以下示例演示了在 Android 中使用 Animation 的方法。您將能夠從選單中選擇不同型別的動畫，並且所選動畫將應用於螢幕上的 ImageView。

要嘗試此示例，您需要在模擬器或實際裝置上執行它。

步驟 描述
1 您將使用 Android Studio IDE 建立一個 Android 應用程式，並在包 com.example.sairamkrishna.myapplication 下將其命名為 My Application。
2 修改 src/MainActivity.java 檔案以新增動畫程式碼。
3 修改佈局 XML 檔案 res/layout/activity_main.xml，如果需要，新增任何 GUI 元件。
4 在 res 目錄下建立一個新資料夾，並將其命名為 anim。透過訪問 res/anim 確認它。
5 右鍵單擊 anim，然後單擊新建，然後選擇 Android XML 檔案。您必須建立以下列出的不同檔案。
6 建立檔案 myanimation.xml、clockwise.xml、fade.xml、move.xml、blink.xml、slide.xml 並新增 XML 程式碼。
7 無需更改預設字串常量。Android Studio 會在 values/string.xml 中處理預設常量。
8 執行應用程式，選擇正在執行的 Android 裝置，並在其上安裝應用程式，並驗證結果。

這是修改後的 MainActivity.java 程式碼。

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
   
   public void clockwise(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.myanimation);
      image.startAnimation(animation);
   }
   
   public void zoom(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.clockwise);
      image.startAnimation(animation1);
   }
   
   public void fade(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.fade);
      image.startAnimation(animation1);
   }
   
   public void blink(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.blink);
      image.startAnimation(animation1);
   }
   
   public void move(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
      image.startAnimation(animation1);
   }
   
   public void slide(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
      image.startAnimation(animation1);
   }
}

這是修改後的 res/layout/activity_main.xml 程式碼。

這裡 abc 指示 tutorialspoint 的徽標。
<RelativeLayout 
   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:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alert Dialog"
      android:id="@+id/textView"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorialspoint"
      android:id="@+id/textView2"
      android:textColor="#ff3eff0f"
      android:textSize="35dp"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView"
      android:layout_alignStart="@+id/textView"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zoom"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="40dp"
      android:onClick="clockwise"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="clockwise"
      android:id="@+id/button2"
      android:layout_alignTop="@+id/button"
      android:layout_centerHorizontal="true"
      android:onClick="zoom"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="fade"
      android:id="@+id/button3"
      android:layout_alignTop="@+id/button2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:onClick="fade"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blink"
      android:onClick="blink"
      android:id="@+id/button4"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="move"
      android:onClick="move"
      android:id="@+id/button5"
      android:layout_below="@+id/button2"
      android:layout_alignRight="@+id/button2"
      android:layout_alignEnd="@+id/button2"
      android:layout_alignLeft="@+id/button2"
      android:layout_alignStart="@+id/button2" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="slide"
      android:onClick="slide"
      android:id="@+id/button6"
      android:layout_below="@+id/button3"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView" />
      
</RelativeLayout>

這是 res/anim/myanimation.xml 的程式碼。

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

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
</set>

這是 res/anim/clockwise.xml 的程式碼。

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

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromDegrees="360"
      android:toDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
</set>

這是 res/anim/fade.xml 的程式碼。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >
   
   <alpha
      android:fromAlpha="0"
      android:toAlpha="1" 
      android:duration="2000" >
   </alpha>
   
   <alpha
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0" 
      android:duration="2000" >
   </alpha>   

</set>

這是 res/anim/blink.xml 的程式碼。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <alpha android:fromAlpha="0.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

這是 res/anim/move.xml 的程式碼。

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">
   
   <translate
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800" />
</set>

這是 res/anim/slide.xml 的程式碼。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
   
   <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:interpolator="@android:anim/linear_interpolator"
      android:toXScale="1.0"
      android:toYScale="0.0" />
</set>

這是修改後的 res/values/string.xml 程式碼。

<resources>
   <string name="app_name">My Application</string>
</resources>

這是 AndroidManifest.xml 的預設程式碼。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.animation.MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
    
   </application>
</manifest>

讓我們嘗試執行您的應用程式。我假設您已將您的實際 Android 移動裝置連線到您的計算機。要從 Android Studio 執行應用程式，請開啟專案中的一個 activity 檔案，然後單擊工具欄中的執行 Eclipse Run Icon 圖示。Android Studio 將顯示以下影像。

Anroid Camera Tutorial

選擇縮放按鈕，將顯示以下螢幕：

Anroid Animation Tutorial

現在選擇滑動按鈕，將顯示以下螢幕。

Anroid Animation Tutorial

現在選擇移動按鈕，將顯示以下螢幕。

Anroid Animation Tutorial

現在選擇順時針按鈕，將顯示以下螢幕。

Anroid Animation Tutorial

現在選擇淡入淡出按鈕，將顯示以下螢幕。

Anroid Animation Tutorial

注意：如果您在模擬器中執行它，您可能無法體驗到流暢的動畫效果。您必須在您的 Android 手機中執行它才能體驗到流暢的動畫。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.