Android - ภาพเคลื่อนไหว

ภาพเคลื่อนไหวเป็นกระบวนการสร้างการเคลื่อนไหวและการเปลี่ยนแปลงรูปร่าง

ภาพเคลื่อนไหวใน Android เป็นไปได้จากหลายวิธี ในบทนี้เราจะพูดถึงวิธีหนึ่งที่ง่ายและใช้กันอย่างแพร่หลายในการสร้างแอนิเมชั่นที่เรียกว่าแอนิเมชั่นทวีต

Tween Animation

Tween Animation ใช้พารามิเตอร์บางอย่างเช่นค่าเริ่มต้นค่าสิ้นสุดขนาดระยะเวลามุมการหมุน ฯลฯ และดำเนินการเคลื่อนไหวที่ต้องการบนวัตถุนั้น สามารถใช้กับวัตถุประเภทใดก็ได้ ดังนั้นเพื่อที่จะใช้สิ่งนี้ android ได้จัดเตรียมคลาสที่เรียกว่า Animation ให้กับเรา

ในการแสดงแอนิเมชั่นใน Android เราจะเรียกใช้ฟังก์ชันคงที่ loadAnimation () ของคลาส AnimationUtils เราจะได้รับผลลัพธ์ในตัวอย่างของ Animation Object ไวยากรณ์มีดังนี้ -

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

สังเกตพารามิเตอร์ที่สอง มันคือชื่อของไฟล์ xml แอนิเมชั่นของเรา คุณต้องสร้างโฟลเดอร์ใหม่ชื่อanim ภายใต้ไดเร็กทอรี res และสร้างไฟล์ xml ภายใต้โฟลเดอร์ anim

คลาสแอนิเมชั่นนี้มีฟังก์ชันที่มีประโยชน์มากมายซึ่งแสดงไว้ด้านล่าง -

ซีเนียร์ No	วิธีการและคำอธิบาย
1	start() วิธีนี้เริ่มภาพเคลื่อนไหว
2	setDuration(long duration) วิธีนี้กำหนดระยะเวลาของภาพเคลื่อนไหว
3	getDuration() วิธีนี้ได้รับระยะเวลาที่กำหนดโดยวิธีการด้านบน
4	end() วิธีนี้จะสิ้นสุดภาพเคลื่อนไหว
5	cancel() วิธีนี้จะยกเลิกภาพเคลื่อนไหว

ในการใช้แอนิเมชั่นนี้กับออบเจ็กต์เราจะเรียกเมธอด startAnimation () ของออบเจ็กต์ ไวยากรณ์ของมันคือ -

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้ Animation ใน Android คุณจะสามารถเลือกภาพเคลื่อนไหวประเภทต่างๆได้จากเมนูและภาพเคลื่อนไหวที่เลือกจะถูกนำไปใช้กับ imageView บนหน้าจอ

ในการทดลองกับตัวอย่างนี้คุณต้องเรียกใช้สิ่งนี้บนโปรแกรมจำลองหรืออุปกรณ์จริง

ขั้นตอน	คำอธิบาย
1	คุณจะใช้ Android studio IDE เพื่อสร้างแอปพลิเคชัน Android และตั้งชื่อเป็นแอปพลิเคชันของฉันภายใต้แพ็คเกจ com.example.sairamkrishna.myapplication
2	แก้ไขไฟล์ src / MainActivity.java เพื่อเพิ่มโค้ดแอนิเมชั่น
3	แก้ไขไฟล์ XML เค้าโครง res / layout / activity_main.xml เพิ่มคอมโพเนนต์ GUI หากจำเป็น
4	สร้างโฟลเดอร์ใหม่ภายใต้ res directory และเรียกมันว่า anim กำหนดโดยไปที่ res / anim
5	คลิกขวาที่แอนิเมชั่นแล้วคลิกใหม่และเลือกไฟล์ Android XML คุณต้องสร้างไฟล์ต่าง ๆ ตามรายการด้านล่าง
6	สร้างไฟล์ myanimation.xml, clockwise.xml, fade.xml, move.xml, blink.xml, slide.xml และเพิ่มโค้ด XML
7	ไม่จำเป็นต้องเปลี่ยนค่าคงที่สตริงเริ่มต้น Android studio ดูแลค่าคงที่เริ่มต้นที่ values ​​/ string.xml
8	เรียกใช้แอปพลิเคชันและเลือกอุปกรณ์ Android ที่ใช้งานอยู่และติดตั้งแอปพลิเคชันบนแอปพลิเคชันและตรวจสอบผลลัพธ์

นี่คือรหัสที่แก้ไขของ 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);
   }
}

นี่คือรหัสที่แก้ไขของ res/layout/activity_main.xml.

ที่นี่ abc ระบุเกี่ยวกับโลโก้ของ tutorialspoint

<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>

นี่คือรหัสของ 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>

นี่คือรหัสของ 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>

นี่คือรหัสของ 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>

นี่คือรหัสของ 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>

นี่คือรหัสของ 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>

นี่คือรหัสของ 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>

นี่คือรหัสที่แก้ไขของ res/values/string.xml.

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

นี่คือรหัสเริ่มต้นของ 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>

มาลองเรียกใช้แอปพลิเคชันของคุณ ฉันถือว่าคุณได้เชื่อมต่ออุปกรณ์มือถือ Android จริงกับคอมพิวเตอร์ของคุณ ในการเรียกใช้แอปจาก Android studio ให้เปิดไฟล์กิจกรรมของโครงการแล้วคลิก

ไอคอนเรียกใช้จากแถบเครื่องมือ Android studio จะแสดงภาพต่อไปนี้

เลือกปุ่มซูมมันจะแสดงหน้าจอต่อไปนี้ -

ตอนนี้เลือกปุ่มสไลด์มันจะแสดงหน้าจอต่อไปนี้

ตอนนี้เลือกปุ่มย้ายมันจะแสดงหน้าจอต่อไปนี้

ตอนนี้ปุ่มตามเข็มนาฬิกาจะแสดงหน้าจอต่อไปนี้

ตอนนี้ปุ่ม Fade จะแสดงหน้าจอต่อไปนี้

หมายเหตุ - หากคุณเรียกใช้ในโปรแกรมจำลองคุณอาจไม่ได้สัมผัสกับเอฟเฟกต์ภาพเคลื่อนไหวที่ราบรื่น คุณต้องเรียกใช้ในมือถือ Android ของคุณเพื่อสัมผัสกับภาพเคลื่อนไหวที่ราบรื่น