Android - Hoạt ảnh

Hoạt ảnh là quá trình tạo chuyển động và thay đổi hình dạng

Hoạt ảnh trong Android có thể từ nhiều cách. Trong chương này, chúng ta sẽ thảo luận về một cách dễ dàng và được sử dụng rộng rãi để tạo hoạt ảnh được gọi là hoạt ảnh tweened.

Hoạt hình giữa

Tween Animation nhận một số tham số như giá trị bắt đầu, giá trị kết thúc, kích thước, khoảng thời gian, góc quay, v.v. và thực hiện hoạt ảnh cần thiết trên đối tượng đó. Nó có thể được áp dụng cho bất kỳ loại đối tượng nào. Vì vậy, để sử dụng điều này, android đã cung cấp cho chúng ta một lớp gọi là Animation.

Để thực hiện hoạt ảnh trong android, chúng ta sẽ gọi một hàm tĩnh loadAnimation () của lớp AnimationUtils. Chúng ta sẽ nhận được kết quả trong một phiên bản của Animation Object. Cú pháp của nó như sau:

Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
   R.anim.myanimation);

Lưu ý tham số thứ hai. Đây là tên của tệp xml hoạt ảnh của chúng tôi. Bạn phải tạo một thư mục mới có tên làanim trong thư mục res và tạo một tệp xml trong thư mục anim.

Lớp hoạt ảnh này có nhiều chức năng hữu ích được liệt kê bên dưới:

Sr.No	Phương pháp & Mô tả
1	start() Phương thức này bắt đầu hoạt ảnh.
2	setDuration(long duration) Phương pháp này đặt thời lượng của một hoạt ảnh.
3	getDuration() Phương thức này nhận thời lượng được đặt theo phương thức trên
4	end() Phương thức này kết thúc hoạt ảnh.
5	cancel() Phương pháp này hủy hoạt ảnh.

Để áp dụng hoạt ảnh này cho một đối tượng, chúng ta sẽ chỉ gọi phương thức startAnimation () của đối tượng. Cú pháp của nó là -

ImageView image1 = (ImageView)findViewById(R.id.imageView1);
image.startAnimation(animation);

Thí dụ

Ví dụ sau minh họa việc sử dụng Animation trong android. Bạn có thể chọn loại hoạt ảnh khác nhau từ menu và hoạt ảnh đã chọn sẽ được áp dụng trên imageView trên màn hình.

Để thử nghiệm với ví dụ này, bạn cần chạy điều này trên trình giả lập hoặc thiết bị thực tế.

Các bước	Sự miêu tả
1	Bạn sẽ sử dụng Android studio IDE để tạo ứng dụng Android và đặt tên nó là Ứng dụng của tôi theo gói com.example.sairamkrishna.myapplication.
2	Sửa đổi tệp src / MainActivity.java để thêm mã hoạt ảnh
3	Sửa đổi tệp XML bố cục res / layout / activity_main.xml thêm bất kỳ thành phần GUI nào nếu cần.
4	Tạo một thư mục mới trong thư mục res và gọi nó là ảnh động. Xác nhận nó bằng cách truy cập res / anim
5	Nhấp chuột phải vào hoạt ảnh và nhấp vào mới và chọn tệp XML của Android Bạn phải tạo các tệp khác nhau được liệt kê bên dưới.
6	Tạo tệp myanimation.xml, clockwise.xml, fade.xml, move.xml, nháy mắt.xml, slide.xml và thêm mã XML.
7	Không cần thay đổi hằng số chuỗi mặc định. Android studio chăm sóc các hằng số mặc định tại giá trị / string.xml.
số 8	Chạy ứng dụng và chọn một thiết bị Android đang chạy và cài đặt ứng dụng trên đó và xác minh kết quả.

Đây là mã sửa đổi của MainActivity.java.

package com.example.sairamkrishna.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
   }
   
   public void clockwise(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.myanimation);
      image.startAnimation(animation);
   }
   
   public void zoom(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(), 
         R.anim.clockwise);
      image.startAnimation(animation1);
   }
   
   public void fade(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.fade);
      image.startAnimation(animation1);
   }
   
   public void blink(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), 
            R.anim.blink);
      image.startAnimation(animation1);
   }
   
   public void move(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.move);
      image.startAnimation(animation1);
   }
   
   public void slide(View view){
      ImageView image = (ImageView)findViewById(R.id.imageView);
      Animation animation1 = 
         AnimationUtils.loadAnimation(getApplicationContext(), R.anim.slide);
      image.startAnimation(animation1);
   }
}

Đây là mã sửa đổi của res/layout/activity_main.xml.

Ở đây abc chỉ ra về logo của hướng dẫn

<RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" 
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Alert Dialog"
      android:id="@+id/textView"
      android:textSize="35dp"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Tutorialspoint"
      android:id="@+id/textView2"
      android:textColor="#ff3eff0f"
      android:textSize="35dp"
      android:layout_below="@+id/textView"
      android:layout_centerHorizontal="true" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/abc"
      android:layout_below="@+id/textView2"
      android:layout_alignRight="@+id/textView2"
      android:layout_alignEnd="@+id/textView2"
      android:layout_alignLeft="@+id/textView"
      android:layout_alignStart="@+id/textView"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="zoom"
      android:id="@+id/button"
      android:layout_below="@+id/imageView"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true"
      android:layout_marginTop="40dp"
      android:onClick="clockwise"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="clockwise"
      android:id="@+id/button2"
      android:layout_alignTop="@+id/button"
      android:layout_centerHorizontal="true"
      android:onClick="zoom"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="fade"
      android:id="@+id/button3"
      android:layout_alignTop="@+id/button2"
      android:layout_alignParentRight="true"
      android:layout_alignParentEnd="true"
      android:onClick="fade"/>
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="blink"
      android:onClick="blink"
      android:id="@+id/button4"
      android:layout_below="@+id/button"
      android:layout_alignParentLeft="true"
      android:layout_alignParentStart="true" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="move"
      android:onClick="move"
      android:id="@+id/button5"
      android:layout_below="@+id/button2"
      android:layout_alignRight="@+id/button2"
      android:layout_alignEnd="@+id/button2"
      android:layout_alignLeft="@+id/button2"
      android:layout_alignStart="@+id/button2" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="slide"
      android:onClick="slide"
      android:id="@+id/button6"
      android:layout_below="@+id/button3"
      android:layout_toRightOf="@+id/textView"
      android:layout_toEndOf="@+id/textView" />
      
</RelativeLayout>

Đây là mã của res/anim/myanimation.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromXScale="0.5"
      android:toXScale="3.0"
      android:fromYScale="0.5"
      android:toYScale="3.0"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
   <scale xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromXScale="3.0"
      android:toXScale="0.5"
      android:fromYScale="3.0"
      android:toYScale="0.5"
      android:duration="5000"
      android:pivotX="50%"
      android:pivotY="50%" >
   </scale>
   
</set>

Đây là mã của res/anim/clockwise.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:fromDegrees="0"
      android:toDegrees="360"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
   <rotate xmlns:android="http://schemas.android.com/apk/res/android"
      android:startOffset="5000"
      android:fromDegrees="360"
      android:toDegrees="0"
      android:pivotX="50%"
      android:pivotY="50%"
      android:duration="5000" >
   </rotate>
   
</set>

Đây là mã của res/anim/fade.xml.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/accelerate_interpolator" >
   
   <alpha
      android:fromAlpha="0"
      android:toAlpha="1" 
      android:duration="2000" >
   </alpha>
   
   <alpha
      android:startOffset="2000"
      android:fromAlpha="1"
      android:toAlpha="0" 
      android:duration="2000" >
   </alpha>   

</set>

Đây là mã 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.0"
      android:toAlpha="1.0"
      android:interpolator="@android:anim/accelerate_interpolator"
      android:duration="600"
      android:repeatMode="reverse"
      android:repeatCount="infinite"/>
</set>

Đây là mã của res/anim/move.xml.

<?xml version="1.0" encoding="utf-8"?>
<set
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:interpolator="@android:anim/linear_interpolator"
   android:fillAfter="true">
   
   <translate
      android:fromXDelta="0%p"
      android:toXDelta="75%p"
      android:duration="800" />
</set>

Đây là mã của res/anim/slide.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
   android:fillAfter="true" >
   
   <scale
      android:duration="500"
      android:fromXScale="1.0"
      android:fromYScale="1.0"
      android:interpolator="@android:anim/linear_interpolator"
      android:toXScale="1.0"
      android:toYScale="0.0" />
</set>

Đây là mã sửa đổi của res/values/string.xml.

<resources>
   <string name="app_name">My Application</string>
</resources>

Đây là mã mặc định của AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.sairamkrishna.myapplication" >

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name="com.example.animation.MainActivity"
         android:label="@string/app_name" >
      
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      
      </activity>
    
   </application>
</manifest>

Hãy thử chạy ứng dụng của bạn. Tôi giả sử bạn đã kết nối thiết bị di động Android thực tế với máy tính của mình. Để chạy ứng dụng từ Android studio, hãy mở một trong các tệp hoạt động của dự án của bạn và nhấp vào

biểu tượng Chạy từ thanh công cụ. Android studio sẽ hiển thị những hình ảnh sau

Chọn nút thu phóng, nó sẽ hiển thị màn hình sau -

Bây giờ chọn nút trượt, nó sẽ hiển thị màn hình sau

Bây giờ chọn nút di chuyển, nó sẽ hiển thị màn hình sau

Bây giờ nút theo chiều kim đồng hồ, nó sẽ hiển thị màn hình sau

Bây giờ nút Fade, nó sẽ hiển thị màn hình sau

Lưu ý - Nếu bạn chạy nó trong trình giả lập, bạn có thể không gặp phải hiệu ứng hoạt ảnh mượt mà. Bạn phải chạy nó trong điện thoại di động Android của mình để trải nghiệm hoạt ảnh mượt mà.