Hướng dẫn lập trình Android bài 13

Bài 13: Android Animation


Nội dung bài học
1. Tween animation
1.1. Alpha
1.2. Scale
1.3. Translate
1.4. Rotate
2. Frame animation


Tween animation
1. Tween animation

-

Tween animation là tạo ra hình động bằng cách thực hiện 1 loạt các biến đổi trên 1 hình ảnh
duy nhất.

1.1. Alpha

- Làm fade-in hoặc fade-out cho view.
 Thuộc tính cần nhớ:
- android:fromAlpha: Bắt đầu làm mờ view. Truyền vào giá trị float trong khoảng từ 0.0 đến
1.0 ở đó 0.0 là trong suốt, 1.0 là bình thường.

-

android:toAlpha: Kết thúc làm mờ view. Truyền vào giá trị float trong khoảng từ 0.0 đến
1.0.

-

android:duration: Thời gian thực hiện animation. Đơn vị là ms. Mặc định là 300 ms.


Tween animation
1.1. Alpha

 Ví dụ:
android:duration="1000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />

-

Để thực hiện animation ta làm như sau:
Animation alphaAnimation = AnimationUtils.loadAnimation(MainActivity.this,
R.anim.alpha_animation);
btnAlpha.startAnimation(alphaAnimation);


Tween animation
1.1.2. Scale

- Làm thay đổi kích thước cho view.
 Thuộc tính cần nhớ:
- android:fromXScale: Bắt đầu thay đổi kích thước theo trục X. Ở đó 1.0 là ko
-

thay đổi.

android:toXScale: Kết thúc thay đổi kích thước theo trục X.
android:fromYScale: Bắt đầu thay đổi kích thước theo trục Y.
android:toYScale: Kết thúc thay đổi kích thước theo trục Y.
android:pivotX: Tọa độ trên trục X khi view được thay đổi.
android:pivotY: Tọa độ trên trục Y khi view được thay đổi.
android:repeatCount: Animation lặp lại bao nhiêu lần. Nếu để infinite(-1) sẽ
lặp lại vô hạn.Mặc định giá trị là 0 thì được thực hiện 1 lần.
android:repeatMode: Cách mà animation sẽ hoạt động khi kết thúc 1 lần. Thuộc
tính này có hiệu lực nếu thuộc tính android:repeatCount truyền vào giá trị là 1 số
lớn hơn 0 hoặc infinite(-1).


Tween animation
1.1.2. Scale



Ví dụ:

<scale xmlns:android=" />android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0.0"
android:pivotY="0.0"
android:toXScale="1.0"
android:repeatCount="infinite"
android:repeatMode="restart"

android:toYScale="3.0" >
</scale>


Tween animation
1.1.3. Translate


-

Dịch chuyển view theo chiều dọc hoặc chiều ngang.
Các thuộc tính cần nhớ:
android:fromXDelta: Vị trí bắt đầu di chuyển theo trục X. Truyền vào giá trị float hoặc %.
android:toXDelta: Vị trí kết thúc quá trình di chuyển theo trục X. Truyền vào giá trị float hoặc %.
android:fromYDelta: Vị trí bắt đầu di chuyển theo trục Y. Truyền vào giá trị float hoặc %.
android:toYDelta: Vị trí kết thúc quá trình di chuyển theo trục Y. Truyền vào giá trị float hoặc %. Nếu truyền vào giá
trị là số hoặc % thì view sẽ dịch chuyển theo % kích thước của view. Nếu truyền vào giá trị là %p thì view sẽ dịch
chuyển theo % kích thước của layout cha chứa view đó.


Tween animation
1.1.3. Translate



Ví dụ:

<translate xmlns:android=" />android:duration="1000“
android:fromXDelta="0"
android:toXDelta="50%p"

android:fromYDelta="0"
android:toYDelta="50%p">
</translate>


Tween animation
1.1.4. Rotate



Xoay view theo 1 góc bất kỳ.
Các thuộc tính cần nhớ:

-

android:fromDegrees: Bắt đầu từ bao nhiêu độ.

-

android:toDegrees: Kết thúc ở bao nhiêu độ.

-

android:pivotX: Tọa độ X làm tâm quay. Truyền vào giá trị%p là so với layout cha chứa view đó. Truyền vào % là so với bản thân
view đó.



android:pivotY: Tọa độ Y làm tâm quay.
Ví dụ:

<rotate xmlns:android=" />android:duration="2000"
android:fromDegrees="0“
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" >


Frame animation
-

Frame animation là tạo ra hình động bằng cách hiển thị 1 chuỗi các hình ảnh liên tiếp với đối tượng
AnimationDrawable.




Tạo file animation và để vào đường dẫn sau res/drawable/filename.xml
Các thuộc tính cần nhớ:
android:oneshot: Truyền vào true nếu muốn animation thực hiện 1 lần. false nếu muốn animation lặp.
Để thực hiện animation ta làm như sau:
ImageView iv = (ImageView) findViewById(R.id.iv_animation);
iv.setBackgroundResource(R.drawable.frame_animation);
AnimationDrawable animationDrawable = (AnimationDrawable)
animationDrawable.start();

iv.getBackground();


Q&A