30 สิงหาคม 2555

[Android Code] ทำภาพเคลื่อนไหวด้วย Animation List


สำหรับบทความนี้ (บทความที่ 100 พอดีเลย เฮ~)
ขอเป็นเรื่องการสร้างภาพเคลื่อนไหวละกันเนอะ
การทำภาพเคลื่อนไหวบนแอนดรอยด์จะมีหลายวิธี
หนึ่งในนั้นก็คือ Animation List นิยมใช้เป็นหน้าจอโหลด
(วิธีอื่นๆถ้าเจ้าของบล็อกนึกครึกครื้นเมื่อไรก็คงทำให้)

สำหรับการใช้ Animation List ก็ไม่มีอะไรซับซ้อนมากนัก
เป็นการนำไฟล์ภาพที่เก็บไว้ใน Drawable มาแสดงต่อๆกัน
ทีละเฟรม สามารถกำหนดได้ว่าให้แต่ละภาพแสดงนานเท่าไร
ก็คล้ายๆกับการทำภาพ GIF นั่นแหละ แต่ Animation List 
จะสามารถใช้เป็นไฟล์ภาพ JPG หรือ PNG ก็ยังได้
(แต่ก็ระวังขนาดแอพมีขนาดใหญ่เพราะไฟล์ภาพพวกนี้นะ)

สำหรับตัวอย่างภาพเคลื่อนไหวในบทความนี้
จะสร้างเป็นภาพเคลื่อนไหวตอนหน้าโหลดหรือ Splash Screen
โดยจะเป็นภาพเคลื่อนไหวดังวีดีโอข้างล่างนี้




เป็นของคนที่รู้จักกันที่เจ้าของบล็อกจะทำแอพให้
ซึ่งเจ้าของบล็อกก็ยังไม่ได้ทำต่อซักที ขออภัย ณ ที่นี้ด้วย ฮา

ซึ่งภาพเคลื่อนไหวเนี่ยจะใช้โปรแกรมอะไรสร้างก็ได้
เจ้าของบล็อกถนัด Adobe Flash ก็เลยใช้ Adobe Flash สร้าง
แล้วก็เซฟภาพออกมาทีละเฟรมเก็บไว้เป็น JPG  
(เฟรมเรทไม่ควรเยอะ เพราะยิ่งเยอะก็จะทำให้จำนวนภาพเยอะ)

เจ้าของบล็อกก็จะมีภาพทั้งหมด 26 ภาพ สำหรับทำภาพเคลื่อนไหว
ทีนี้มาที่ Eclipse ให้ Import ภาพที่สร้างมาเก็บไว้ใน drawable
แล้วสร้าง xml ไว้ใน drawable สำหรับเรียกใช้ Animation List
โดยเจ้าของบล็อกจะกำหนดให้ชื่อ splashlist.xml แล้วใส่คำสั่งดังนี้


splashlist.xml
<?xml version="1.0" encoding="utf-8"?>  
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"  
        android:id="@+id/splashAnimation"  
        android:oneshot="true">  
    <item android:drawable="@drawable/splash_logo01" android:duration="500" /> 
    <item android:drawable="@drawable/splash_logo02" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo03" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo04" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo04" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo06" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo07" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo08" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo09" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo10" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo11" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo12" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo13" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo14" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo15" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo16" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo17" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo18" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo19" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo20" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo21" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo22" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo23" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo24" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo25" android:duration="30" />  
    <item android:drawable="@drawable/splash_logo26" android:duration="500" /> 
 </animation-list>  


จะเห็นว่าเจ้าของบล็อกกำหนด item ให้เป็นไฟล์ภาพเรียงลำดับกัน 
โดยกำหนดระยะเวลา 30 และ 500 ที่ภาพแรกสุดกับท้ายสุด (มีหน่วยเป็นมิลลิวินาที)
สามารถกำหนดได้ว่าต้องการให้วนลูปภาพหรือไม่โดยกำหนดที่ 
android:oneshot ซึ่งในตัวอย่างนี้จะกำหนดให้แสดงแค่รอบเดียว
และกำหนดชื่อ ID ของ Animation List เป็น splashAnimation

สำหรับ Class เจ้าของบล็อกจะสร้างขึ้นมาด้วยกันสองอันคือ
SplashScreen.java สำหรับเป็นหน้าโหลดที่เป็นภาพเคลื่อนไหว
และ Main.java เป็นหน้าหลัก โดย Intent จาก SplashScreen.java 
เมื่อเปิดแอพพลิเคชันขึ้นมาก็จะเข้าสู่หน้า SplashScreen.java
พอผู้ใชัแตะบนหน้าจอก็จะไปยัง Main.java 


SplashScreen.java
package app.akexorcist.splashscreen;  
 
import android.os.Bundle;  
import android.app.Activity;  
import android.content.Intent;  
import android.graphics.PixelFormat;  
import android.graphics.drawable.AnimationDrawable;  
import android.util.Log;  
import android.view.MotionEvent;  
import android.view.Window;  
import android.widget.ImageView;  

public class SplashScreen extends Activity {  
    AnimationDrawable splash;  

    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        getWindow().setFormat(PixelFormat.RGBA_8888);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.splash);  

        ImageView image = (ImageView) findViewById(R.id.imageView1);  
        splash = (AnimationDrawable) image.getBackground();  
        image.post(new Starter());  
    }  

    class Starter implements Runnable {  
        public void run() {  
            splash.start();  
        }  
    }  

    public boolean onTouchEvent(MotionEvent event) {  
        if (event.getAction() == MotionEvent.ACTION_DOWN) {  
            Intent intent = new Intent(getApplicationContext()
                    , Main.class);  
            startActivity(intent);  
            this.finish();  
            return true;  
        }  
        return super.onTouchEvent(event);  
    }  
}  

โดยที่ SplashScreen.java จะเรียกใช้ Layout เป็น splash 
ซึ่งจะมี Image View เจ้าของบล็อกก็จะให้ Animation List
แสดงภาพเคลื่อนไหวที่กำหนดไว้บน Image View นี่แหละ
และสร้าง onTouchEvent เมื่อมีการแตะหน้าจอก็จะไปยัง Main.java

Main.java
package app.akexorcist.splashscreen;  

import android.app.Activity;  
import android.graphics.PixelFormat;  
import android.os.Bundle;  
import android.view.Window;  

public class Main extends Activity{  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        getWindow().setFormat(PixelFormat.RGBA_8888);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        setContentView(R.layout.main);  
    }  
} 

สำหรับ Main.java อันนี้ไม่มีอะไร เจ้าของบล็อกสร้างไว้
เพื่อรองรับ Intent ที่มาจาก SplashScreen.java เฉยๆ


splash.xml
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#FFFFFF"  
    android:gravity="center" >  
    <ImageView  
        android:id="@+id/imageView1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentLeft="true"  
        android:layout_alignParentTop="true"  
        android:adjustViewBounds="true"  
        android:background="@drawable/splashlist" />  
</RelativeLayout> 

main.xml
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#565656"  
    android:gravity="center" >  
    <TextView  
        android:id="@+id/textView1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
         android:layout_centerHorizontal="true"  
        android:layout_centerVertical="true"  
        android:text="Main Page"  
        android:textColor="#FFFFFF"  
        android:textSize="30dp"  
        android:textStyle="bold" />  
</RelativeLayout>  

AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    android:installLocation="auto"  
    package="app.akexorcist.splashscreen"  
    android:versionCode="1"  
    android:versionName="1.0" >  

    <uses-sdk  
        android:minSdkVersion="8"  
        android:targetSdkVersion="8" />  

    <application  
        android:icon="@drawable/ic_launcher"  
        android:label="@string/app_name"  
         android:theme="@style/AppTheme" >  
        <activity  
            android:name="SplashScreen"  
            android:screenOrientation="nosensor" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>  
        </activity>  
        <activity android:name="Main" >   
        </activity>  
    </application>  
 </manifest>  

เท่านี้ก็สามารถสร้างภาพเคลื่อนไหวบนแอพพลิเคชันได้แล้ว
สำหรับผู้ที่หลงเข้ามาอ่านที่ต้องการไฟล์ตัวอย่างสามารถดาวน์โหลดได้จาก


ไว้อารมณ์ครึกครื้นเมื่อไร
เจ้าของบล็อกจะทำตัวอย่าง
วิธีแบบอื่นๆให้นะ 555




เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium