Day 20 : Android View Animation

Day 20 : Android View Animation Cover Image

สวัสดีครับ บทความนี้เป็นบทความที่ 20 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days

สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ

สำหรับวันนี้ขอนำเสนอเรื่อง AndroidViewAnimation เป็น Library ที่เอาไว้แสดง Animation ให้กับ View ต่างๆครับ อย่างเช่นตัวอย่างข้างล่างนี้

Example

ตัว AndroidViewAnimation มี animation แบบเดียวกันกับในเวอร์ชั่นของ CSS อันนี้ครับ Animate.css

Installation

ขั้นตอนการติดตั้ง เปิดไฟล์ build.gradle ขึ้นมา ทำการเพิ่ม dependencies ข้างล่างนี้ลงไป

dependencies {
        compile 'com.daimajia.easing:library:[email protected]'
        compile 'com.daimajia.androidanimations:library:[email protected]'
}

กด Sync Gradle เรียบร้อย

Getting Starged

ขั้นตอนการใช้งาน AndroidViewAnimation มี syntax ดังนี้ครับ

YoYo.with(Techniques.Tada)
    .duration(700)
    .playOn(findViewById(R.id.text));

คือใช้ YoYo เป็น static class จากนั้น เรียกเมธอด .with() ตามด้วย anime ที่ต้องการครับ แต่ละ anime จะมีชื่อและ type ของมัน ไปเช็คได้ที่ Techniques#xxx ต่อมา .duration() ใส่ระยะเวลาที่จะให้แสดง animation และสุดท้าย .playOn() รับ parameter เป็น View ที่เราต้องการจะให้มันแสดง animation ในที่นี้คือ TextView ที่ชื่อว่า text นั่นเอง

วิธีใช้งาน มันมีแค่นี้แหละ สำหรับ Technique มันมีชนิดอะไรบ้าง ก็ดูได้ที่นี่

Create Project

ทดลองสร้างโปรเจ็คขึ้นมาดู โดย หน้าเลเอาท์จะมีแค่ Button อันเดียว เมือ่กด Button ก็จะสุ่มเ่ล่น animation ต่างๆครับ ได้เป็นดังนี้

ไฟล์ activity_view_animation.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_animate"
        android:padding="32dp"
        android:text="@string/click_me"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

res/values/strings.xml

<resources>
    <string name="click_me">Click Me!</string>
</resources>

ต่อมาที่ไฟล์ ViewAnimationActivit.java ก็มีดังนี้

package com.devahoy.learn30androidlibraries.day20;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;

import com.daimajia.androidanimations.library.Techniques;
import com.daimajia.androidanimations.library.YoYo;
import com.devahoy.learn30androidlibraries.R;

import java.util.Random;

public class ViewAnimationActivity extends ActionBarActivity {

    private Button mButton;
    Random mRandom = new Random();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.day20_activity_view_animation);
        mButton = (Button) findViewById(R.id.button_animate);

        mButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                randomAnimation();
            }
        });
    }

    private void randomAnimation() {
        int gen = mRandom.nextInt(5);
        switch (gen) {
            case 0:
                YoYo.with(Techniques.Flash).duration(1000).playOn(mButton);
                break;
            case 1:
                YoYo.with(Techniques.Shake).duration(1000).playOn(mButton);
                break;
            case 2:
                YoYo.with(Techniques.FadeInUp).duration(1000).playOn(mButton);
                break;
            case 3:
                YoYo.with(Techniques.RotateIn).duration(1000).playOn(mButton);
                break;
            case 4:
                YoYo.with(Techniques.Wave).duration(1000).playOn(mButton);
                break;
            default:
                YoYo.with(Techniques.Tada).duration(1000).playOn(mButton);
                break;
        }
    }
}

ทำการ เชื่อม Button กับไฟล์ xml จากนั้นก็ setListener() ให้มันเมื่อกดคลิกที่ Button ก็จะโชว์ Animation แบบสุ่มครับ โดย playOn() เป้าหมายของ animation ก็คือตัวมันเอง Button ที่กดนั่นแหละครับ

สำหรับตัวอย่างวันนี้ มันก็มีแค่นี้อะครับ ไม่รู้จะเขียนอะไรเพิ่มเติมดี :D

ลองตัวอย่าง หรือว่า Animation หลายๆแบบ ดูละกันครับ ขอบคุณครับ

Reference

AndroidViewAnimations

Chai Chai Phonbopit : MEAN Stack @Nextzy • ผู้ชายธรรมดาๆ ที่ชื่นชอบ Android, JavaScript (Node.js) และ Open Source มีงานอดิเรกเป็น Acoustic Guitar และ Football

บทความล่าสุด