Android: Animation trong Android
Giải phóng thời gian, khai phóng năng lực
Animation là tiến trình tạo chuyển động và biến đổi hình dạng.
Animation trong Android là có thể thực hiện theo nhiều cách khác nhau. Trong chương này chúng ta sẽ thảo luận cách dễ nhất và được sử dụng phổ biến nhất để tạo Animation, đó là Tween Animation.
Tween Animation trong Android
Tween Animation nhận một vài tham số như giá trị bắt đầu, giá trị kết thúc, kích cỡ, khoảng thời gian, góc quay, … và thực hiện animation cần thiết trên đối tượng. Nó có thể được áp dụng cho bất kỳ kiểu đối tượng nào. Để thực hiện điều này, Android cung cấp cho chúng ta một lớp Animation.
Để thực hiện Animation trong Android, chúng ta gọi một hàm tĩnh là loadAnimation() của lớp AnimationUtils. Chúng ta sẽ nhận kết quả là một instance của đối tượng Animation. Cú pháp là:
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.myanimation);
Bạn chú ý tham số thứ hai. Đó là tên của animation xml file của chúng ta. Bạn phải tạo một folder mới là anim dưới thư mục res và tạo một xml file dưới anim này.
Bảng dưới liệt kê một số hàm hữu ích được cung cấp bởi lớp Animation:
| Stt | Phương thức & Miêu tả |
|---|---|
| 1 | start()
Phương thức này bắt đầu Animation |
| 2 | setDuration(long duration)
Phương thức này thiết lập khoảng thời gian của một Animation |
| 3 | getDuration()
Phương thức này lấy khoảng thời gian đã được thiết lập bởi phương thức trên |
| 4 | end()
Phương thức này kết thúc Animation |
| 5 | cancel()
Phương thức này hủy bỏ Animation |
Để áp dụng Animation cho một đối tượng, chúng ta chỉ cần gọi phương thức startAnimation() của đối tượng đó. Cú pháp là:
ImageView image1 = (ImageView)findViewById(R.id.imageView1); image.startAnimation(animation);
Ví dụ
Ví dụ sau minh họa sự sử dụng của Animation trong Android. Bạn có thể chọn các kiểu Animation khác nhau từ menu và Animation đã được lựa chọn đó sẽ được áp dụng trên một imageView trên màn hình.
Để thử nghiệm ví dụ, bạn cần chạy nó trên một màn hình mô phỏng Emulator hoặc một thiết bị thực.
Đây là nội dung file:
Đây là nội dung file MainActivity.java:
package v1study.com.animationv1study;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
ImageView imageView;
Animation animation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
imageView=(ImageView)findViewById(R.id.v1studyIcon);
}
void start(Animation animation){
imageView.startAnimation(animation);
}
public void fade(View view){
animation = AnimationUtils.loadAnimation(getApplicationContext(),R.anim.fade);
start(animation);
}
public void zoom(View view){
animation=AnimationUtils.loadAnimation(getApplicationContext(),R.anim.zoom);
start(animation);
}
public void clockwise(View view){
animation=AnimationUtils.loadAnimation(getApplicationContext(),R.anim.clockwise);
start(animation);
}
public void blink(View view) {
animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.blink);
start(animation);
}
public void slide(View view) {
animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
start(animation);
}
public void move(View view) {
animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
start(animation);
}
}
Đây là nội dung đã sửa đổi của res/layout/activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/btnClockwise"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:onClick="clockwise"
android:text="@string/clockwise"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.891"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499" />
<Button
android:id="@+id/btnMove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:onClick="move"
android:text="@string/move"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.853"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.62" />
<Button
android:id="@+id/btnSlide2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:onClick="slide"
android:text="@string/slide"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.459"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.62" />
<Button
android:id="@+id/btnBlink2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:onClick="blink"
android:text="@string/blink"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.061"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.62" />
<Button
android:id="@+id/btnZoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:onClick="zoom"
android:text="@string/zoom"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.459"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.499" />
<ImageView
android:id="@+id/v1studyIcon"
android:layout_width="187dp"
android:layout_height="187dp"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:contentDescription="@string/v1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.089"
app:srcCompat="@mipmap/logo_v1_regular" />
<Button
android:id="@+id/btnFade"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:onClick="fade"
android:text="@string/fade"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.058"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Sau đây là nội dung của res/anim/zoom.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:fromXScale="1"
android:toXScale="3"
android:fromYScale="1"
android:toYScale="3"
android:pivotX="50%"
android:pivotY="50%"
android:duration="5000"
android:repeatMode="reverse"
android:repeatCount="1"/>
</set>
Sau đây là nội dung của file res/anim/clockwise.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000"/>
<rotate
android:startOffset="3000"
android:toDegrees="0"
android:fromDegrees="360"
android:duration="3000"/>
</set>
Sau đây là nội dung của file res/anim/fade.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="1"
android:toAlpha="0"
android:duration="2000"
android:repeatMode="reverse"
android:repeatCount="1"/>
</set>
Sau đây là nội dung của res/anim/blink.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0"
android:toAlpha="1"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>
Sau đây là nội dung của res/anim/move.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800"
android:repeatMode="reverse"
android:repeatCount="1"/>
</set>
Sau đây là nội dung của res/anim/slide.xml:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:toXScale="1"
android:toYScale="0"
android:repeatMode="reverse"
android:repeatCount="1"/>
</set>
Đây là nội dung đã sửa đổi của res/values/string.xml.
<resources>
<string name="app_name">AnimationV1Study</string>
<string name="v1">V1Study</string>
<string name="fade">Fade</string>
<string name="clockwise">Clockwise</string>
<string name="slide">Slide</string>
<string name="zoom">Zoom</string>
<string name="blink">Blink</string>
<string name="move">Move</string>
</resources>
Tiếp theo là nội dung mặc định của AndroidManifest.xml:
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:dist="http://schemas.android.com/apk/distribution"
package="v1study.com.animationv1study">
<dist:module dist:instant="true" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<meta-data
android:name="com.google.android.actions"/>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Cuối cùng, bạn chạy ứng dụng Android vừa tạo trên.
Nếu chọn nút ZOOM thì sẽ hiển thị màn hình sau:
Nếu chọn nút CLOCKWISE thì sẽ hiển thị màn hình sau:
Giải phóng thời gian, khai phóng năng lực