Beautify Android #2 - Hiệu ứng xoay đĩa nhạc trong Android Studio (Disc Rotation)

Có thể bạn thích

Tiếp tục bài viết trước trong series Beautify Android, hôm nay mình sẽ hướng dẫn cách tạo Hiệu ứng xoay đĩa nhạc trong Android Studio.
Bạn có thường nghe nhạc trên các ứng dụng điện thoại chứ? Chắc hẳn một lần bạn đã nhìn thấy hiệu ứng đĩa xoay trên các ứng dụng nghe nhạc hiện nay. Nếu bạn là một Android Learner, bạn có tự hỏi làm thế nào để có được hiệu ứng như thế này trong ứng dụng của mình? Bài viết này sẽ là câu trả lời!

Beautify Android #2 - Hiệu ứng xoay đĩa nhạc trong Android Studio (Disc Rotation)

Thư viện cần thiết

Đầu tiên, bạn cần thêm thư viện CircleImageView vào trong Project. Đây là thư viện giúp bạn thay thế cho ImageView truyền thống, vì nó có thể tạo ra những hình ảnh tròn.

Thêm dòng sau vào bên trong dependencies trong file build.gradle (app):

dependencies {
    // ...
    implementation 'de.hdodenhof:circleimageview:3.0.1'
    // ...
}

Tạo giao diện

Vào trong file xml activity_main.xml và thêm view vừa được import ở trên, ở đây mình sẽ lấy ví dụ như sau:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="center">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/discImage"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/example"
        app:civ_border_width="50dp"
        android:scaleType="centerCrop"/>

</LinearLayout>

Giao diện mẫu

Tạo hiệu ứng xoay cho hình ảnh

Đầu tiên, ta cần ánh xạ View Hình Ảnh trong file java (MainActivity.java):

CircleImageView discImage;
/* --------------------------------------- */
discImage = findViewById(R.id.discImage);

Ở đây chúng ta sử dụng đối tượng ObjectAnimator để tạo hiệu ứng cho đối tượng:

ObjectAnimator discAnimator;
/* -------------------------------- */
discAnimator = ObjectAnimator.ofFloat(discImage, "rotation", 0f, 360f);
discAnimator.setDuration(10000);
discAnimator.setRepeatCount(ValueAnimator.INFINITE);
discAnimator.setRepeatMode(ValueAnimator.RESTART);
discAnimator.setInterpolator(new LinearInterpolator());
discAnimator.start();

Các bạn để ý các thuộc tính:

• ofFloat(): ObjectAnimator sẽ cài đặt để đối tượng chuyển động giữa hai giá trị, do propertyName chúng ta set là rotation nên nó sẽ tự hiểu là xoay từ 0 độ đến 360 độ.
• setDuration(): thời gian để đối tượng hoàn thành chuyển động (tính bằng mili giây).
• setRepeatCount(): số lần hiệu ứng được lặp lại, ở đây chúng ta muốn lặp vô tận nên set giá trị là INFINITE.
• setRepeatMode(): chế độ lặp lại, ở đây ta sẽ set là RESTART để lặp lại hiệu ứng từ ban đầu.

Đây là full source code:

package com.yourpackage.discrotation;

import androidx.appcompat.app.AppCompatActivity;
import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Bundle;
import android.view.animation.LinearInterpolator;
import de.hdodenhof.circleimageview.CircleImageView;

public class MainActivity extends AppCompatActivity {

    CircleImageView discImage;
    ObjectAnimator discAnimator;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Ánh xạ View
        discImage = findViewById(R.id.discImage);

        // Cài đặt hiệu ứng đĩa nhạc xoay tròn
        discAnimator = ObjectAnimator.ofFloat(discImage, "rotation", 0f, 360f);
        discAnimator.setDuration(10000);
        discAnimator.setRepeatCount(ValueAnimator.INFINITE);
        discAnimator.setRepeatMode(ValueAnimator.RESTART);
        discAnimator.setInterpolator(new LinearInterpolator());
        discAnimator.start();
    }
}

Kết quả

Github repo: https://github.com/hdodenhof/CircleImageView

Thanh Dương