कोटलिन का उपयोग करके एंड्रॉइड ऐप में XML फ़ाइलों का उपयोग करके एनीमेशन कैसे बनाएं?

एंड्रॉइड में XML एनीमेशन के साथ व्यू एनिमेट करना

यह उदाहरण दर्शाता है कि XML में परिभाषित एनीमेशन (ज़ूम, ब्लिंक, फेड, स्लाइड, रोटेट) को कोटलिन में कैसे लोड और लागू किया जाए।

चरण 1: नया प्रोजेक्ट बनाएं

एंड्रॉइड स्टूडियो में File → New Project चुनें।

चरण 2: एनिमेशन संसाधन फ़ाइलें बनाएं (res/anim/)

res फ़ोल्डर पर राइट-क्लिक → New → Android Resource Directory → Resource type: "anim"

res/anim/zoom.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:fillAfter="true"
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"> 
    <scale
        android:duration="1000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2.0"
        android:toYScale="2.0" /> 
</set>

res/anim/blink.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="https://schemas.android.com/apk/res/android"> 
    <alpha
        android:duration="600"
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:repeatCount="infinite"
        android:repeatMode="reverse"
        android:interpolator="@android:anim/accelerate_interpolator" /> 
</set>

res/anim/fade_in.xml

<?xml version="1.0" encoding="utf-8"?> 
<alpha xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator" />

res/anim/fade_out.xml

<?xml version="1.0" encoding="utf-8"?> 
<alpha xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromAlpha="1.0"
    android:toAlpha="0.0"
    android:interpolator="@android:anim/decelerate_interpolator" />

res/anim/slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"> 
    <translate
        android:duration="500"
        android:fromXDelta="-100%"
        android:toXDelta="0%" /> 
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" /> 
</set>

res/anim/slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"> 
    <translate
        android:duration="500"
        android:fromXDelta="0%"
        android:toXDelta="100%" /> 
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" /> 
</set>

res/anim/rotate.xml

<?xml version="1.0" encoding="utf-8"?> 
<rotate xmlns:android="https://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:interpolator="@android:anim/linear_interpolator" />

res/anim/bounce.xml (कॉम्बो)

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="https://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator"> 
    <scale
        android:duration="1000"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" /> 
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" /> 
</set>

चरण 3: लेआउट (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="24dp"
    tools:context=".MainActivity"> 
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tutorials Point"
        android:textAlignment="center"
        android:textColor="@android:color/holo_green_dark"
        android:textSize="24sp"
        android:textStyle="bold"
        android:layout_marginBottom="16dp" /> 
    
    <TextView
        android:id="@+id/textViewAnimated"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="शानदार दिन हो!"
        android:textSize="28sp"
        android:textStyle="bold"
        android:textColor="@android:color/holo_purple"
        android:layout_marginBottom="32dp" /> 
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="16dp"> 
        <Button
            android:id="@+id/btnZoom"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="4dp"
            android:text="ज़ूम" /> 
        <Button
            android:id="@+id/btnBlink"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="4dp"
            android:text="ब्लिंक" /> 
        <Button
            android:id="@+id/btnFade"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="4dp"
            android:text="फेड" /> 
    </LinearLayout> 
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center"
        android:layout_marginBottom="16dp"> 
        <Button
            android:id="@+id/btnSlide"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="4dp"
            android:text="स्लाइड" /> 
        <Button
            android:id="@+id/btnRotate"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="4dp"
            android:text="रोटेट" /> 
        <Button
            android:id="@+id/btnBounce"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:layout_margin="4dp"
            android:text="बाउंस" /> 
    </LinearLayout> 
    
    <Button
        android:id="@+id/btnReset"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="रीसेट"
        android:layout_marginTop="16dp" /> 
        
</LinearLayout>

चरण 4: MainActivity.kt

import android.os.Bundle
import android.view.View
import android.view.animation.Animation
import android.view.animation.AnimationUtils
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity(), Animation.AnimationListener {
    private lateinit var textViewAnimated: TextView
    private lateinit var btnZoom: Button
    private lateinit var btnBlink: Button
    private lateinit var btnFade: Button
    private lateinit var btnSlide: Button
    private lateinit var btnRotate: Button
    private lateinit var btnBounce: Button
    private lateinit var btnReset: Button
    
    // एनीमेशन संदर्भ
    private var currentAnimation: Animation? = null
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        
        initViews()
        loadAnimations()
        setClickListeners()
    }
    
    private fun initViews() {
        textViewAnimated = findViewById(R.id.textViewAnimated)
        btnZoom = findViewById(R.id.btnZoom)
        btnBlink = findViewById(R.id.btnBlink)
        btnFade = findViewById(R.id.btnFade)
        btnSlide = findViewById(R.id.btnSlide)
        btnRotate = findViewById(R.id.btnRotate)
        btnBounce = findViewById(R.id.btnBounce)
        btnReset = findViewById(R.id.btnReset)
    }
    
    private fun loadAnimations() {
        // एनीमेशन प्री-लोड करें (प्रदर्शन के लिए)
    }
    
    private fun setClickListeners() {
        btnZoom.setOnClickListener { startAnimation(R.anim.zoom) }
        btnBlink.setOnClickListener { startAnimation(R.anim.blink) }
        btnFade.setOnClickListener { 
            // फेड आउट फिर इन
            val fadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out)
            fadeOut.setAnimationListener(object : Animation.AnimationListener {
                override fun onAnimationStart(animation: Animation?) {}
                override fun onAnimationEnd(animation: Animation?) {
                    val fadeIn = AnimationUtils.loadAnimation(this@MainActivity, R.anim.fade_in)
                    textViewAnimated.startAnimation(fadeIn)
                }
                override fun onAnimationRepeat(animation: Animation?) {}
            })
            textViewAnimated.startAnimation(fadeOut)
        }
        btnSlide.setOnClickListener { 
            val slideOut = AnimationUtils.loadAnimation(this, R.anim.slide_out_right)
            slideOut.setAnimationListener(object : Animation.AnimationListener {
                override fun onAnimationStart(animation: Animation?) {}
                override fun onAnimationEnd(animation: Animation?) {
                    val slideIn = AnimationUtils.loadAnimation(this@MainActivity, R.anim.slide_in_left)
                    textViewAnimated.startAnimation(slideIn)
                }
                override fun onAnimationRepeat(animation: Animation?) {}
            })
            textViewAnimated.startAnimation(slideOut)
        }
        btnRotate.setOnClickListener { startAnimation(R.anim.rotate) }
        btnBounce.setOnClickListener { startAnimation(R.anim.bounce) }
        btnReset.setOnClickListener { resetView() }
    }
    
    private fun startAnimation(animResId: Int) {
        // पिछली एनीमेशन रद्द करें
        textViewAnimated.clearAnimation()
        
        val animation = AnimationUtils.loadAnimation(this, animResId)
        animation.setAnimationListener(this)
        textViewAnimated.startAnimation(animation)
        currentAnimation = animation
    }
    
    private fun resetView() {
        textViewAnimated.clearAnimation()
        textViewAnimated.alpha = 1f
        textViewAnimated.scaleX = 1f
        textViewAnimated.scaleY = 1f
        textViewAnimated.translationX = 0f
        textViewAnimated.rotation = 0f
        Toast.makeText(this, "दृश्य रीसेट", Toast.LENGTH_SHORT).show()
    }
    
    // Animation.AnimationListener कार्यान्वयन
    override fun onAnimationStart(animation: Animation?) {
        // एनीमेशन शुरू होने पर
    }
    
    override fun onAnimationEnd(animation: Animation?) {
        // एनीमेशन समाप्त होने पर (ब्लिंक/रोटेट के लिए अनंत को छोड़कर)
    }
    
    override fun onAnimationRepeat(animation: Animation?) {
        // एनीमेशन दोहराने पर
    }
}

चरण 5: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="https://schemas.android.com/apk/res/android" 
    package="com.example.xmlandanimation"> 
    <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"> 
        <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>

एनीमेशन प्रकार और उपयोग के मामले:

एनीमेशन	XML टैग	उपयोग का मामला
फेड इन/आउट	<alpha>	दिखाना/छिपाना, ट्रांजिशन
स्लाइड	<translate>	पेज ट्रांजिशन, ड्रॉअर, टोस्ट
स्केल/ज़ूम	<scale>	बटन प्रेस, छवि ज़ूम, पॉपअप
रोटेट	<rotate>	लोडिंग स्पिनर, आइकन एनिमेशन
बाउंस	<set> + bounce interpolator	ध्यान आकर्षित करना, सफलता स्थिति
शेक	translate + cycle interpolator	त्रुटि प्रतिक्रिया, पासवर्ड गलत

इंटरपोलेटर (गति वक्र):

@android:anim/linear_interpolator: स्थिर गति
@android:anim/accelerate_interpolator: धीमी शुरुआत, तेज अंत
@android:anim/decelerate_interpolator: तेज शुरुआत, धीमा अंत
@android:anim/accelerate_decelerate_interpolator: धीमी शुरुआत/अंत, तेज मध्य
@android:anim/bounce_interpolator: बाउंस प्रभाव
@android:anim/overshoot_interpolator: लक्ष्य से आगे जाकर वापस
@android:anim/anticipate_interpolator: विपरीत दिशा में शुरू होकर आगे

आधुनिक विकल्प: ViewPropertyAnimator (API 12+)

// XML के बजाय कोड में एनीमेशन (अधिक लचीला)
textViewAnimated.animate()
    .scaleX(2f)
    .scaleY(2f)
    .setDuration(1000)
    .setInterpolator(AccelerateDecelerateInterpolator())
    .withEndAction { 
        // एनीमेशन के बाद कोड
    }
    .start()

// श्रृंखलाबद्ध एनीमेशन
textViewAnimated.animate()
    .translationX(200f)
    .setDuration(500)
    .withEndAction {
        textViewAnimated.animate()
            .translationX(0f)
            .setDuration(500)
            .start()
    }
    .start()

// एक साथ कई गुण
textViewAnimated.animate()
    .alpha(0f)
    .scaleX(0.5f)
    .scaleY(0.5f)
    .rotation(360f)
    .setDuration(1000)
    .start()

एनीमेशन बनाम एनिमेटर:

View Animation (XML): केवल दृश्य परिवर्तन (ड्राइंग), व्यू बाउंड्स नहीं बदलता, पुराना API
Property Animation (Animator): वास्तविक गुण बदलता है, किसी भी ऑब्जेक्ट को एनिमेट कर सकता है, आधुनिक API

// ObjectAnimator (संपत्ति एनीमेशन)
ObjectAnimator.ofFloat(textViewAnimated, "translationX", 0f, 200f)
    .setDuration(500)
    .start()

// ValueAnimator (कस्टम लॉजिक)
ValueAnimator.ofFloat(0f, 1f).apply {
    duration = 1000
    addUpdateListener { animation ->
        val value = animation.animatedValue as Float
        textViewAnimated.alpha = value
        textViewAnimated.scaleX = value
        textViewAnimated.scaleY = value
    }
    start()
}