Day 20 - Android View Animation
สวัสดีครับ บทความนี้เป็นบทความที่ 20 แล้วนะครับ ที่ผมจะมาเขียน ในซีรีย์ Learn 30 Android Libraries in 30 days
สำหรับบทความทั้งหมด อ่านได้จากด้านล่างครับ
- Day 1 : AndroidStaggered Grid
- Day 2 : Paralloid
- Day 3 : Retrofit
- Day 4 : SwipeRefreshLayout
- Day 5 : Android GraphView
- Day 6 : Holo Color Picker
- Day 7 : Android Async Http
- Day 8 : Crashlytics
- Day 9 : Butter Knife
- Day 10 : Android Annotations
- Day 11 : DateTimePicker
- Day 12 : Circular Progress Button
- Day 13 : ViewPager
- Day 14 : ViewPagerIndicator
- Day 15 : FadingActionBar
- Day 16 : AutofitTextView
- Day 17 : SwipeListView
- Day 18 : ShowcaseView
- Day 19 : GreenDAO
- Day 20 : AndroidViewAnimation
- Day 21 : ActiveAndroid
- Day 22 : Twitter4J
- Day 23 : ListViewAnimations
- Day 24 : AndEngine
- Day 25 : EazeGraph
- Day 26 : Cardslib
- Day 27 : AdapterKit
- Day 28 : WeatherLib
- Day 29 : FlatUI
- Day 30 : Android Firebase
สำหรับวันนี้ขอนำเสนอเรื่อง AndroidViewAnimation เป็น Library ที่เอาไว้แสดง Animation ให้กับ View ต่างๆครับ อย่างเช่นตัวอย่างข้างล่างนี้
ตัว AndroidViewAnimation มี animation แบบเดียวกันกับในเวอร์ชั่นของ CSS อันนี้ครับ Animate.css
Installation
ขั้นตอนการติดตั้ง เปิดไฟล์ build.gradle
ขึ้นมา ทำการเพิ่ม dependencies ข้างล่างนี้ลงไป
dependencies {
compile 'com.daimajia.easing:library:1.0.0@aar'
compile 'com.daimajia.androidanimations:library:1.0.6@aar'
}
กด 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
- Authors
- Name
- Chai Phonbopit
- Website
- @Phonbopit