2. 程式人生 > >Android動畫之Frame Animation

Android動畫之Frame Animation

阿新 • • 發佈：2019-01-31

在開始例項講解之前，先引用官方文件中的一段話：

Frame動畫是一系列圖片按照一定的順序展示的過程，和放電影的機制很相似，我們稱為逐幀動畫。Frame動畫可以被定義在XML檔案中，也可以完全編碼實現。

如果被定義在XML檔案中，我們可以放置在/res下的anim或drawable目錄中(/res/[anim | drawable]/filename.xml)，檔名可以作為資源ID在程式碼中引用；如果由完全由編碼實現，我們需要使用到AnimationDrawable物件。

如果是將動畫定義在XML檔案中的話，語法如下：

[html] view plain copy print?
  1. <?xmlversion
    =“1.0”encoding=“utf-8”?>
  2. <animation-listxmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:oneshot=[“true” | “false”] >
  4.     <item
  5.         android:drawable=“@[package:]drawable/drawable_resource_name”
  6.         android:duration=“integer”/>
  7. </animation-list>
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot=["true" | "false"] >
    <item
        android:drawable="@[package:]drawable/drawable_resource_name"
        android:duration="integer" />
</animation-list>

需要注意的是：

<animation-list>元素是必須的，並且必須要作為根元素，可以包含一或多個<item>元素；android:onshot如果定義為true的話，此動畫只會執行一次，如果為false則一直迴圈。

<item>元素代表一幀動畫，android:drawable指定此幀動畫所對應的圖片資源，android:druation代表此幀持續的時間，整數，單位為毫秒。

文件接下來的示例我就不在解說了，因為接下來我們也要結合自己的例項演示一下這個過程。

我們新建一個名為anim的工程，將四張連續的圖片分別命名為f1.png，f2.png，f3.png，f4.png，放於drawable目錄，然後新建一個frame.xml檔案：

[html] view plain copy print?
  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2. <animation-listxmlns:android=“http://schemas.android.com/apk/res/android”
  3.     android:oneshot=“false”>
  4.     <itemandroid:drawable=“@drawable/f1”android:duration=“300”/>
  5.     <itemandroid:drawable=“@drawable/f2”android:duration=“300”/>
  6.     <itemandroid:drawable=“@drawable/f3”android:duration=“300”/>
  7.     <itemandroid:drawable=“@drawable/f4”android:duration=“300”/>
  8. </animation-list>
<?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/f1" android:duration="300" />
    <item android:drawable="@drawable/f2" android:duration="300" />
    <item android:drawable="@drawable/f3" android:duration="300" />
    <item android:drawable="@drawable/f4" android:duration="300" />
</animation-list>
我們可以將frame.xml檔案放置於drawable或anim目錄，官方文件上是放到了drawable中了，大家可以根據喜好來放置，放在這兩個目錄都是可以執行的。

然後介紹一下佈局檔案res/layout/frame.xml：

[html] view plain copy print?
  1. <?xmlversion=“1.0”encoding=“utf-8”?>
  2. <LinearLayout
  3.   xmlns:android=“http://schemas.android.com/apk/res/android”
  4.   android:orientation=“vertical”
  5.   android:layout_width=“fill_parent”
  6.   android:layout_height=“fill_parent”>
  7.   <ImageView
  8.     android:id=“@+id/frame_image”
  9.     android:layout_width=“fill_parent”
  10.     android:layout_height=“fill_parent”
  11.     android:layout_weight=“1”/>
  12.   <Button
  13.     android:layout_width=“fill_parent”
  14.     android:layout_height=“wrap_content”
  15.     android:text=“stopFrame”
  16.     android:onClick=“stopFrame”/>
  17.   <Button
  18.     android:layout_width=“fill_parent”
  19.     android:layout_height=“wrap_content”
  20.     android:text=“runFrame”
  21.     android:onClick=“runFrame”/>
  22. </LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">
  <ImageView
    android:id="@+id/frame_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"/>
  <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="stopFrame"
    android:onClick="stopFrame"/>
  <Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="runFrame"
    android:onClick="runFrame"/>
</LinearLayout>
我們定義了一個ImageView作為動畫的載體，然後定義了兩個按鈕，分別是停止和啟動動畫。

接下來介紹一下如何通過載入動畫定義檔案來實現動畫的效果。我們首先會這樣寫：

[java] view plain copy print?
  1. package com.scott.anim;  
  2. import android.app.Activity;  
  3. import android.graphics.drawable.AnimationDrawable;  
  4. import android.graphics.drawable.Drawable;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.ImageView;  
  8. publicclass FrameActivity extends Activity {  
  9.     private ImageView image;  
  10.     @Override
  11.     protectedvoid onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.frame);  
  14.         image = (ImageView) findViewById(R.id.frame_image);  
  15.         image.setBackgroundResource(R.anim.frame);  
  16.         AnimationDrawable anim = (AnimationDrawable) image.getBackground();  
  17.         anim.start();  
  18.     }  
  19. }  
package com.scott.anim;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class FrameActivity extends Activity {

    private ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.frame);
        image = (ImageView) findViewById(R.id.frame_image);

        image.setBackgroundResource(R.anim.frame);
        AnimationDrawable anim = (AnimationDrawable) image.getBackground();
        anim.start();
    }
}
看似十分完美，跟官方文件上寫的一樣，然而當我們執行這個程式時會發現，它只停留在第一幀，並沒有出現我們期望的動畫，也許你會失望的說一句：“Why?”，然後你把相應的程式碼放在一個按鈕的點選事件中，動畫就順利執行了，再移回到onCreate中，還是沒效果，這個時候估計你會氣急敗壞的吼一句：“What the fuck!”。但是，什麼原因呢？如何解決呢？

出現這種現象是因為當我們在onCreate中呼叫AnimationDrawable的start方法時，視窗Window物件還沒有完全初始化，AnimationDrawable不能完全追加到視窗Window物件中，那麼該怎麼辦呢？我們需要把這段程式碼放在onWindowFocusChanged方法中，當Activity展示給使用者時，onWindowFocusChanged方法就會被呼叫，我們正是在這個時候實現我們的動畫效果。當然，onWindowFocusChanged是在onCreate之後被呼叫的，如圖：


然後我們需要重寫一下程式碼：

[java] view plain copy print?
  1. package com.scott.anim;  
  2. import android.app.Activity;  
  3. import android.graphics.drawable.AnimationDrawable;  
  4. import android.graphics.drawable.Drawable;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.ImageView;  
  8. publicclass FrameActivity extends Activity {  
  9.     private ImageView image;  
  10.     @Override
  11.     protectedvoid onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.frame);  
  14.         image = (ImageView) findViewById(R.id.frame_image);  
  15.     }  
  16.     @Override
  17.     publicvoid onWindowFocusChanged(boolean hasFocus) {  
  18.         super.onWindowFocusChanged(hasFocus);  
  19.         image.setBackgroundResource(R.anim.frame);  
  20.         AnimationDrawable anim = (AnimationDrawable) image.getBackground();  
  21.         anim.start();  
  22.     }  
  23. }  
package com.scott.anim;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class FrameActivity extends Activity {

    private ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.frame);
        image = (ImageView) findViewById(R.id.frame_image);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        image.setBackgroundResource(R.anim.frame);
        AnimationDrawable anim = (AnimationDrawable) image.getBackground();
        anim.start();
    }
}
執行一下，動畫就可以正常顯示了。

如果在有些場合，我們需要用純程式碼方式實現一個動畫，我們可以這樣寫：

[java] view plain copy print?
  1. AnimationDrawable anim = new AnimationDrawable();  
  2. for (int i = 1; i <= 4; i++) {  
  3.     int id = getResources().getIdentifier(“f” + i, “drawable”, getPackageName());  
  4.     Drawable drawable = getResources().getDrawable(id);  
  5.     anim.addFrame(drawable, 300);  
  6. }  
  7. anim.setOneShot(false);  
  8. image.setBackgroundDrawable(anim);  
  9. anim.start();  
AnimationDrawable anim = new AnimationDrawable();
for (int i = 1; i <= 4; i++) {
    int id = getResources().getIdentifier("f" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    anim.addFrame(drawable, 300);
}
anim.setOneShot(false);
image.setBackgroundDrawable(anim);
anim.start();
完整的FrameActivity.java程式碼如下： [java] view plain copy print?
  1. package com.scott.anim;  
  2. import android.app.Activity;  
  3. import android.graphics.drawable.AnimationDrawable;  
  4. import android.graphics.drawable.Drawable;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.widget.ImageView;  
  8. publicclass FrameActivity extends Activity {  
  9.     private ImageView image;  
  10.     @Override
  11.     protectedvoid onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.frame);  
  14.         image = (ImageView) findViewById(R.id.frame_image);  
  15.     }  
  16.     @Override
  17.     publicvoid onWindowFocusChanged(boolean hasFocus) {  
  18.         super.onWindowFocusChanged(hasFocus);  
  19.         image.setBackgroundResource(R.anim.frame);  //將動畫資原始檔設定為ImageView的背景
  20.         AnimationDrawable anim = (AnimationDrawable) image.getBackground(); //獲取ImageView背景,此時已被編譯成AnimationDrawable
  21.         anim.start();   //開始動畫
  22.     }  
  23.     publicvoid stopFrame(View view) {  
  24.         AnimationDrawable anim = (AnimationDrawable) image.getBackground();  
  25.         if (anim.isRunning()) { //如果正在執行,就停止
  26.             anim.stop();  
  27.         }  
  28.     }  
  29.     publicvoid runFrame(View view) {  
  30.         //完全編碼實現的動畫效果
  31.         AnimationDrawable anim = new AnimationDrawable();  
  32.         for (int i = 1; i <= 4; i++) {  
  33.             //根據資源名稱和目錄獲取R.java中對應的資源ID
  34.             int id = getResources().getIdentifier(“f” + i, “drawable”, getPackageName());  
  35.             //根據資源ID獲取到Drawable物件
  36.             Drawable drawable = getResources().getDrawable(id);  
  37.             //將此幀新增到AnimationDrawable中
  38.             anim.addFrame(drawable, 300);  
  39.         }  
  40.         anim.setOneShot(false); //設定為loop
  41.         image.setBackgroundDrawable(anim);  //將動畫設定為ImageView背景
  42.         anim.start();   //開始動畫
  43.     }  
  44. }  
package com.scott.anim;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

public class FrameActivity extends Activity {

    private ImageView image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.frame);
        image = (ImageView) findViewById(R.id.frame_image);
    }

    @Override
    public void onWindowFocusChanged(boolean hasFocus) {
        super.onWindowFocusChanged(hasFocus);
        image.setBackgroundResource(R.anim.frame);  //將動畫資原始檔設定為ImageView的背景
        AnimationDrawable anim = (AnimationDrawable) image.getBackground(); //獲取ImageView背景,此時已被編譯成AnimationDrawable
        anim.start();   //開始動畫
    }

    public void stopFrame(View view) {
        AnimationDrawable anim = (AnimationDrawable) image.getBackground();
        if (anim.isRunning()) { //如果正在執行,就停止
            anim.stop();
        }
    }

    public void runFrame(View view) {
        //完全編碼實現的動畫效果
        AnimationDrawable anim = new AnimationDrawable();
        for (int i = 1; i <= 4; i++) {
            //根據資源名稱和目錄獲取R.java中對應的資源ID
            int id = getResources().getIdentifier("f" + i, "drawable", getPackageName());
            //根據資源ID獲取到Drawable物件
            Drawable drawable = getResources().getDrawable(id);
            //將此幀新增到AnimationDrawable中
            anim.addFrame(drawable, 300);
        }
        anim.setOneShot(false); //設定為loop
        image.setBackgroundDrawable(anim);  //將動畫設定為ImageView背景
        anim.start();   //開始動畫
    }
}
好，先到這裡，謝謝大家。文章轉載自http://blog.csdn.net/liuhe688/article/details/6657776

相關推薦

Android動畫之Frame Animation

在開始例項講解之前，先引用官方文件中的一段話： Frame動畫是一系列圖片按照一定的順序展示的過程，和放電影的機制很相似，我們稱為逐幀動畫。Frame動畫可以被定義在XML檔案中，也可以完全編碼實現。 如果被定義在XML檔案中，我們可以放置在/res下的anim或drawable目錄中(/res/[ani

詳解Android動畫之Tween Animation

轉載地址：http://blog.csdn.net/liuhe688/article/details/6660823 前面講了動畫中的Frame動畫，今天就來詳細講解一下Tween動畫的使用。 同樣，在開始例項演示之前，先引用官方文件中的一段話：

Android動畫效果之Frame Animation（逐幀動畫）

想要 顯示 star 載體 rop 復雜 ide sources post 前言： 上一篇介紹了Android的Tween Animation（補間動畫） Android動畫效果之Tween Animation（補間動畫），今天來總結下Android的另外一種動

Android 動畫之補間動畫(View Animation)

Android 中補間動畫包括下面四種: 1.透明度動畫 (AlphaAnimation) 2.縮放動畫 (ScaleAnimation) 3.平移動畫 (TranslateAnimation) 4.旋轉動畫 (RotateAnimation) 補間動畫是專門針對V

Android 幀動畫（Frame Animation） 動畫停止在第一幀

專案中遇到的問題： 需求： 做一個聊天頁面，要求播放語音時，有一個類似於喇叭的動畫，從小到大不停迴圈，語音播放完，動畫停止在第一幀。當點選正在播放的語音時，語音停止，動畫回覆到第一幀（回覆到第一幀是難點） 實現：用Frame Animation   可以在Java程式碼中新

Android動畫之animation-list實現逐幀動畫

簡介 幀動畫（Frame Animation又稱Drawable Animation）是最簡單的Android動畫效果，其與電影多重連續幀播放原理相似，通過視覺殘留來讓人感知到動畫效果。其實現方式是將

Android 動畫之ScaleAnimation

android中提供了4中動畫： AlphaAnimation 透明度動畫效果 ScaleAnimation 縮放動畫效果 TranslateAnimation 位移動畫效果 RotateAnimation 旋轉動畫效果 本節講解ScaleAnimation

Android動畫之Interpolator插入器

SDK對Interpolator的描述是：An interpolator defines the rate of change of an animation. This allows the basic animation effects (alpha, scale, translate, rot

Android 動畫之逐幀動畫小述

一、概述 本節主要介紹下逐幀動畫的基本使用，下面我們就從XML方式建立動畫和程式碼方式建立動畫來分別說下吧 二、逐幀動畫介紹 在開始介紹逐幀動畫之前，先來看一下在本例中我們要實現的逐幀動畫的效果 逐幀動畫，我的理解就是將一幀幀的靜態圖片進行有序的展示，利用人眼的視覺

Android動畫之屬性動畫基礎用法

在上一篇Android動畫基礎之補間動畫與逐幀動畫 ，我們複習了Android的基礎動畫Tweened Animation、Frame Animation，同時指出他們的缺陷，改變是View的顯示效果而不是View本身的屬性，還有我們不多不少會看多人家的APP有一些很酷炫的動畫效果，但是

Android動畫之Interpolator和AnimationSet(三)

AnimationSet可以加入Animation，加入之後設定AnimationSet對加入的所有Animation都有效。 AnimationSet anim=new AnimationSet(t

Android 動畫之屬性動畫

import android.animation.ValueAnimator; import android.animation.ValueAnimator.AnimatorUpdateListener; import android.app.Activity;

Android 動畫之ScaleAnimation應用詳解

android中提供了4中動畫： AlphaAnimation 透明度動畫效果 ScaleAnimation 縮放動畫效果 TranslateAnimation 位移動畫效果 RotateAnimation 旋轉動畫效果 本節講解ScaleAnimation 動

Android動畫之——圓形進度條加波浪線

效果圖 圓形進度條 public class RecordView extends View { //View預設最小寬度 private static final int DEFAULT_MIN_WIDTH = 500; p

Android動畫之View間漸變

前言 漸變動畫（也叫消失）通常指漸漸的淡出某個 UI 元件，同時同步地淡入另一個。在你 App 想切換內容或 view 的情況下，這種動畫很有用。漸變簡短不易察覺，它也能提供從一個介面到下一個之間流暢的轉換。但當你不使用它們時，轉換經常會感到生硬而倉促。 效

【Android 動畫】View Animation詳解（一）

安卓平臺目前提供了兩大類動畫，在Android 3.0之前，一大類是View Animation，包括Tween animation（補間動畫）,Frame animation（幀動畫），在android3.0中又引入了一個新的動畫系統：property ani

Android 動畫之屬性動畫- Interpolator(內插器)

Android動畫系列： 介紹 對於Interpolator(內插器)，寫過動畫的都不會陌生，其本身看做是一個時間計算器，用於定義動畫的執行的速率。 public class ValueAnimator extends Animator impleme

Android動畫之檢視動畫

前言        動畫在Android中是一個相當於重要的知識點，使用場景也很多，炫酷的介面效果少不了動畫來提升，這裡我們就先來說說Android中的動畫，在說Android的動畫之前，我們先來了解一下動畫這個效果的通用含義。 什麼是動畫？      

Android動畫之屬性動畫（下）

前言        前面我們已經完整的講述了屬性動畫的實現，我們已經學會了怎麼實現動畫，如果沒有屬性我們也學會了怎麼新增屬性，還學習了用ValueAnimator來實現動畫。 Evaluator        這裡我們來學習剩下的屬性，首先我們來看看E

Android動畫之補間動畫及其應用場景

前言目錄目錄1. 作用物件檢視控制元件（View）如Android的TextView、Button等等不可作用於View元件的屬性，如：顏色、背景、長度等等2. 原理通過確定開始的檢視樣式 & 結束的檢視樣式、中間動畫變化過程由系統補全來確定一個動畫結束的檢視樣式：平移、縮放、旋轉 & 透明度