Devahoy Logo
PublishedAt

Android

Day 20 - Android View Animation

Day 20 - Android View Animation

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

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

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

Example

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

Installation

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

1
dependencies {
2
compile 'com.daimajia.easing:library:1.0.0@aar'
3
compile 'com.daimajia.androidanimations:library:1.0.6@aar'
4
}

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

Getting Starged

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

1
YoYo.with(Techniques.Tada)
2
.duration(700)
3
.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

1
<?xml version="1.0" encoding="utf-8"?>
2
3
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
4
android:layout_width="match_parent"
5
android:layout_height="match_parent">
6
7
<Button
8
android:layout_width="wrap_content"
9
android:layout_height="wrap_content"
10
android:id="@+id/button_animate"
11
android:padding="32dp"
12
android:text="@string/click_me"
13
android:layout_centerVertical="true"
14
android:layout_centerHorizontal="true"/>
15
16
</RelativeLayout>

res/values/strings.xml

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

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

1
package com.devahoy.learn30androidlibraries.day20;
2
3
import android.os.Bundle;
4
import android.support.v7.app.ActionBarActivity;
5
import android.view.View;
6
import android.widget.Button;
7
8
import com.daimajia.androidanimations.library.Techniques;
9
import com.daimajia.androidanimations.library.YoYo;
10
import com.devahoy.learn30androidlibraries.R;
11
12
import java.util.Random;
13
14
public class ViewAnimationActivity extends ActionBarActivity {
15
16
private Button mButton;
17
Random mRandom = new Random();
18
19
@Override
20
protected void onCreate(Bundle savedInstanceState) {
21
super.onCreate(savedInstanceState);
22
setContentView(R.layout.day20_activity_view_animation);
23
mButton = (Button) findViewById(R.id.button_animate);
24
25
mButton.setOnClickListener(new View.OnClickListener() {
26
@Override
27
public void onClick(View v) {
28
randomAnimation();
29
}
30
});
31
}
32
33
private void randomAnimation() {
34
int gen = mRandom.nextInt(5);
35
switch (gen) {
36
case 0:
37
YoYo.with(Techniques.Flash).duration(1000).playOn(mButton);
38
break;
39
case 1:
40
YoYo.with(Techniques.Shake).duration(1000).playOn(mButton);
41
break;
42
case 2:
43
YoYo.with(Techniques.FadeInUp).duration(1000).playOn(mButton);
44
break;
45
case 3:
46
YoYo.with(Techniques.RotateIn).duration(1000).playOn(mButton);
47
break;
48
case 4:
49
YoYo.with(Techniques.Wave).duration(1000).playOn(mButton);
50
break;
51
default:
52
YoYo.with(Techniques.Tada).duration(1000).playOn(mButton);
53
break;
54
}
55
}
56
}

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

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

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

Reference

AndroidViewAnimations

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts