28 กันยายน 2555

[Android Code] สร้างการเคลื่อนไหวง่ายๆ ด้วยคลาส ScaleAnimation


บทความวันนี้ขอเบิ้ลเลยละกัน คราวนี้ต่อด้วยคลาส ScaleAnimation
ซึ่งเป็นคลาสเอาไว้ทำ Animation สำหรับย่อขยายขนาดของวัตถุ


Main.java
package app.akexorcist.scaleanimation;

import android.os.Bundle;
import android.app.Activity;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
import android.widget.Button;
import android.widget.ImageView;

public class Main extends Activity {
    ImageView imgLogo;
    Animation anim;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imgLogo = (ImageView)findViewById(R.id.imgLogo);

        Button btnNormalScale = (Button)findViewById(R.id.btnNormalScale);
        btnNormalScale.setOnClickListener(new OnClickListener() {
            public void onClick(View arg0) {
                anim = new ScaleAnimation(0, 1, 0, 1);
                anim.setDuration(1000);
                imgLogo.startAnimation(anim);
            }
        });

        Button btnToggleScale = (Button)findViewById(R.id.btnToggleScale);
        btnToggleScale.setOnClickListener(new OnClickListener() {
            float fromScale = 1, toScale = (float)0.5;
            public void onClick(View arg0) {
                anim = new ScaleAnimation(fromScale
                        , toScale, fromScale, toScale
                        , imgLogo.getWidth() / 2
                        , imgLogo.getHeight() / 2);
                anim.setDuration(1000);
                anim.setFillEnabled(true);
                anim.setFillAfter(true);
                imgLogo.startAnimation(anim);
                float tempScale = fromScale;
                fromScale = toScale;
                toScale = tempScale;
            }
        });
    }
}


เริ่มจาก Event Listener ของ btnNormalScale กันก่อน

อันนี้จะเป็นคำสั่งเบื้องต้นของ ScaleListener
โดยจะให้กำหนดขนาดเริ่มต้นและขนาดสิ้นสุด
กำหนดแยกกันระหว่างความกว้างและความสูงของวัตถุ
โดยกำหนดเป็นจำนวนเท่าหรือ % ของขนาดวัตถุดั้งเดิม
อย่างเช่นในตัวอย่างจะใช้คำสั่งดังนี้
anim = new ScaleAnimation(0, 1, 0, 1);
โดยที่ 0 อันแรกสุดคือความกว้างเริ่มต้น

เจ้าของบล็อกได้กำหนดให้เริ่มจาก 0% 
ขยายความกว้างมาเป็น 1 เท่า หรือ 100%
และสำหรับความสูงก็เช่นกันจาก 0 เป็น 1
ทีนี้ภาพก็จะเริ่มขยายขนาดตั้งแต่ 0% 
จนมีขนาดเท่ากับ 1 เท่าหรือ 100% หรือขนาดปกติ
ถ้ากำหนดเป็น 2 ก็จะเป็น 200% หรือสองเท่าของปกติ
และเมื่อลองรันแอพพลิเคชันดูก็จะพบว่า 
imgLogo จะเริ่มขยายขนาดโดยเริ่มพิกัดจากมุมซ้ายบน
ทั้งนี้ก็เพราะว่าคำสั่งนี้จะมีพิกัดเริ่มต้นที่มุมซ้ายบนตลอด
แล้วจะขยายมาอยู่ที่พิกัดของภาพปกติ

แหล่งที่มาของภาพโลโก้



ทีนี้ลองมาดูที่ Event Listener ของ btnToggleScale บ้าง
จะเห็นว่าเจ้าของบล็อกกระกาศตัวแปร fromScale กับ toScale ไว้
โดย fromScale คือขนาดของวัตถุตอนเริ่มต้น กำหนดไว้ที่ 1
และ toScale คือขนาดของวัตถุตอนสุดท้าย กำหนดไว้ที่ 0.5
จากนั้นเจ้าของบล็อกก็จะใช้คำสั่งดังนี้
anim = new ScaleAnimation(fromScale, toScale, fromScale, toScale , imgLogo.getWidth() / 2, imgLogo.getHeight() / 2);

คำสั่งคราวนี้จะมีการกำหนดพิกัดเริ่มต้นของวัตถุแล้ว
คล้ายกับคลาส RotateAnimation ที่ให้เริ่มจากตรงกลางวัตถุ

ทีนี้ imgLogo ก็จะย่อขนาดจาก 1 ไปเป็น 0.5 หรือ 50% 
จากนั้นเจ้าของบล็อกก็จะใช้คำสั่ง setFillAfter เหมือนเดิม
เพื่อให้ imgLogo คงขนาดภาพ 50% ไว้
จากนั้นก็ให้ค่าของตัวแปร fromScale และ toScale สลับกัน
เมื่อกดปุ่ม btnToggleScale อีกครั้ง imgLogo ก็ขยายขึ้นแทน
จากเดิม 0.5 หรือ 50% มาเป็น 1 หรือ 100% แทน
(แล้วก็สลับค่าตัวแปรครั้งทำให้กดแล้วย่อ-ขยายสลับกันไปมา)

แหล่งที่มาของภาพโลโก้



main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <Button
        android:id="@+id/btnNormalScale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Normal Scale" />
    <Button
        android:id="@+id/btnToggleScale"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Toggle Scale" />
    <ImageView
        android:id="@+id/imgLogo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:src="@drawable/samplelogo" />
</RelativeLayout>

สำหรับผู้ที่หลงเข้ามาอ่านที่ต้องการไฟล์ตัวอย่างสามารถดาวน์โหลดได้จาก


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

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