انیمیشن ها در کاتلین را به صورت کاملا جامع و رایگان آموزش ببینید .

امروز قصد داریم از سری آموزش کاتلین ، مبحث آموزش انیمیشن ها در کاتلین را برای شما عزیزان آموزش دهیم .

انیمیشن ها در کاتلین چه کارایی دارد ؟

انیمیشن ها به روی ابجکت ها و ویجت های ما اعمال می شود . و ظاهر جذابی به Ui ما یا همان رابط کاربری ما می دهد .تا کاربری که از این ویجت استفاده می کند با مشاهده این انیمیشن از برنامه ما لذت ببرد .در واقع ساخت انیمیشن ها در کاتلین به ما کمک می کند که اجسام روی صفحه زنده به نظر برسند. شما باید به عنوان یک برنامه نویس کاتلین از همه ی کار هایی که باعث جذب مخاطب به برنامه شما می شود استفاده کنید . انیمیشن ها در کاتلین یکی از همین مباحث از آموزش کاتلین می باشد .

اگر بخوام توضیحات بیشتری در مورد انیمیشن ها در کاتلین برای شما بگم این تعریف کافی است که شما بدانید انیمیشن ها در اندروید جلو های بصری به مخاطبان ما می دهد . تا از اتفاقاتی که در برنامه می گذرد مطلع شوند . و این موارد در زمانی که تغییر وضعیتی در Ui ما رخ می دهد یعنی مثلا زمانی که محتوای جدیدی بارگیری می کنیم و یا اقدامات جدیدی در دسترس قرار می دهیم خیلی مفید است . در واقع انمیشن ها یک ظاهر و احساس بهترو بالاتری به برنامه ما می بخشد .

من انواع مختلفی از این Animation ها را برای شما جمع آوری کرده ام و در قالب یک پروژه کوچک به شما آموزش می دهم تا در مواقع مورد نیاز هر کدام را که نیاز داشتید مورد استفاده قرار دهید .

انواع انیمیشن در برنامه نویسی اندروید به زبان kotlin

blink
move
bounce
rotate
zoom
slide
fade
…….

ما قصد داریم در انجام یک پروژه ساده طرز کار با انیمیشن های بالا را خدمت شما عزیزان آموزش دهیم .

قبل از هر کاری یک پروژه ایجاد کنید و اسم آن را Animation قرار دهید .

بعد از آن شما در مسیر app/res یک پوشه ایجاد کنید و اسم اون رو anim قرار دهید . هدف ما این است که انیمیشن های خودمون رو در این پوشه قرار دهیم . شکل زیر به شما نشان می دهد که به چه شکلی عمل کنید .

بعد از این کار من کد هایی که برای ساخت انیمیشن های بالا اسفاده می گردد را در این پوشه قرار می دهم تا اسفاده همه ی آن ها را در پروژه خودمون به شما نشان دهم . کد های انیمیشن های موجود در داخل پوشه anim به شکل زیر می باشد .

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="500"
        android:repeatMode="reverse"
        android:repeatCount="infinite"/>
</set>

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="700" />
</set>

bounce.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:fromYDelta="100%"
        android:toYDelta="-20%"
        android:duration="300" />
    <translate
        android:startOffset="500"
        android:fromYDelta="-20%"
        android:toYDelta="10%"
        android:duration="150" />
    <translate
        android:startOffset="1000"
        android:fromYDelta="10%"
        android:toYDelta="0"
        android:duration="100" />
</set>

bow_roate.xml .

<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromDegrees="-90"
    android:toDegrees="-360"
    android:pivotX="0%"
    android:pivotY="50%"
    android:duration="600"
    android:fillAfter="true"
    android:startOffset="215">
</rotate>

fade_in.xml .

در این انیمیشن متن از پس زمینه ما ظاهر می شود .

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

fade_out.xml .

در این انیمیشن متن برای مدتی معلوم ناپدید می شود .

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

rotate.xml .

در این انیمیشن متن برای مدتی مشخص چرخانده می شود .

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

slide_down.xml .

در این Animation متن از بالا به پایین می آید

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="-100%"
        android:toYDelta="0" />
</set>

slide_up.xml .

در این animation از پایین به بالا می رود .

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="1000"
        android:fromYDelta="0"
        android:toYDelta="-100%" />
</set>

Zoom_in.xml .

در این انیمیشن متن برای مدتی مشخص بزرگ به نظر می رسد .

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
    <scale xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1000"
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.5"
        android:toYScale="1.5">
    </scale>
</set>

Zoom_out.xml.

در این انیمیشن متن برای مدتی مشخص کوچک به نظر می رسد .

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

انیمیشن های بالا که در پوشه anim قرار دارند . در پروژه ما مورد استفاده قرار می گیرند . حالا نوبت آن رسیده است که لایه خودمون رو طراحی کنیم . ما در این لایه از تعدادی button استفاده کردیم که هر کدام از آن ها یکی از انیمیشن های ما می باشند . و یک TextView داریم که این انیمیشن ها در کاتلین روی آن ها اعمال می گردد. کد این بخش به صورت زیر می باشد .

attributes های که در فایل xml انیمیشن ها در کاتلین استفاده می شود .

بین کد نویسی برای پروژمون لازم دونستم attributes ها یه همون ویژگی هایی که در فایل xml پروژمون استفاده شده رو خدمت شما عزیزان توضیح بدهم .

از سری آموزش انیمیشن ها در کاتلین در خدمت شما عزیزان هستیم .

fromAlpha : این مقدار الفای من هستش و اگر مقدار 1 رو انتخاب بکنم رنگ کاملا مات و رنگ 0.0 نیز کاملا شفاف هستش.
toAlpha : مقدار آخر و یا پایانی الفا رو برای ما نشون می دهد .
id : این ویژگی یک کلید منحصر به فرد می باشد .
duration : این ویژگی برای این می باشد که نشان دهد مدت زمان انیمیشن ما چقدر می باشد .
fromYDelta : این ویژگی نشون دهنده تغیرات مختصات Y می باشد . که در ابتدا اعمال می گردد .
toYDelta : این ویژگی هم برای تغیرات Y می باشد که در انتهای انیمیشن اعمال می گردد.
startOffset : این ویژگی برای این است که اون تاخیر زمانی برای نشون دادن انیمیشن بعد از زمان شروع رو تعیین می کند و همچنین برحسب میلی ثانیه می باشد .
pivotX : مختصات محور x ما از اون زمان که شروع می شود برای بزرگنمایی نشون می دهد .
pivotY : این ویژگی نیز مانند ویژگی بالایی برای محور Y می باشد.
fromXScale : شروع اندازه offset محور x.
fromYScale : شروع اندازه offset محور y .
toXScale : پایان دادن به اندازه offset محور x .
toYScale : پایان دادن به اندازه offset محور Y .
fromDegrees : زمان شروع موقعیت زاویه ایی ما بر حسب درجه .
toDegrees : زمان پایان موقعیت زاویه ایی بر حسب درجه .
interpolator : این ویژگی میزان تغیرات انیمیشن ما رو نشون می دهد .

با فهمیدن این ویژگی ها کار شما با انیمیشن ها در کاتلین راحت تر می شود . در واقع شما الان بلد شدید که ویژگی ها بالا در چه زمانی استفاده می شود .

حالا بریم سراغ ادامه آموزش انیمیشن ها در کاتلین :

activity_animation.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".Animation">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:id="@+id/ID_fade_in"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_weight="1"
            android:text="Fade In "
            android:textAllCaps="false" />

        <Button
            android:id="@+id/ID_fade_out"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="Fade Out"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/ID_zoom_in"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="Zoom In"
            android:textAllCaps="false" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:id="@+id/ID_zoom_out"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Zoom Out"
            android:layout_margin="2dp"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/ID_slide_down"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="Slide Down"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/ID_slide_up"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="Slide Up"
            android:textAllCaps="false" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="3">

        <Button
            android:id="@+id/ID_bounce"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Bounce"
            android:layout_margin="2dp"
            android:textAllCaps="false" />

        <Button
            android:id="@+id/ID_rotate"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Rotate"
            android:layout_margin="2dp"
            android:textAllCaps="false" />
        <Button
            android:id="@+id/ID_bow_roate"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="bow_roate"
            android:layout_margin="2dp"
            android:textAllCaps="false" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="2">

        <Button
            android:id="@+id/ID_blink"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="blink"
            android:layout_margin="2dp"
            android:textAllCaps="false" />
        <Button
            android:id="@+id/ID_move"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="move"
            android:layout_margin="2dp"
            android:textAllCaps="false" />

    </LinearLayout>
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="انیمیشن ها در کاتلین"
        android:textColor="#390000"
        android:textSize="25dp"
        android:textStyle="bold" />

</LinearLayout>

بعد از این نوبت کد های بخش Activity ما هست که ما در آن ویجت های خودمون رو تعریف کردیم . تا با رویداد های کلیک روی دکمه ها انیمیشن ها رو مشاهده کنیم .

Animation .

package com.example.kotlinme

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

class Animation : AppCompatActivity(), View.OnClickListener {
    lateinit var fade_in: Button
    lateinit var fade_out: Button
    lateinit var zoom_in: Button
    lateinit var zoom_out: Button
    lateinit var slide_down: Button
    lateinit var slide_up: Button
    lateinit var bounce: Button
    lateinit var rotate: Button
    lateinit var bow_roate: Button
    lateinit var blink: Button
    lateinit var move: Button
    lateinit var TextMe: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_animation)


        fade_in = findViewById(R.id.ID_fade_in)
        fade_out = findViewById(R.id.ID_fade_out)
        zoom_in = findViewById(R.id.ID_zoom_in)
        zoom_out = findViewById(R.id.ID_zoom_out)
        slide_down = findViewById(R.id.ID_slide_down)
        slide_up = findViewById(R.id.ID_slide_up)
        bounce = findViewById(R.id.ID_bounce)
        rotate = findViewById(R.id.ID_rotate)
        bow_roate = findViewById(R.id.ID_bow_roate)
        blink = findViewById(R.id.ID_blink)
        move = findViewById(R.id.ID_move)
        TextMe = findViewById(R.id.textView)



        fade_in.setOnClickListener(this)
        fade_out.setOnClickListener(this)
        zoom_in.setOnClickListener(this)
        zoom_out.setOnClickListener(this)
        slide_up.setOnClickListener(this)
        slide_down.setOnClickListener(this)
        blink.setOnClickListener(this)
        move.setOnClickListener(this)
        bow_roate.setOnClickListener(this)
        bounce.setOnClickListener(this)
        rotate.setOnClickListener(this)

    }

    override fun onClick(view: View?) {
        when (view?.id) {
            R.id.ID_fade_in -> {
                TextMe.visibility = View.VISIBLE
                val animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.fade_in)
                TextMe.startAnimation(animationFadeIn)
            }
            R.id.ID_fade_out -> {
                val animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.fade_out)
                TextMe.startAnimation(animationFadeOut)
                Handler().postDelayed({
                    TextMe.visibility = View.GONE
                }, 1000)

            }
            R.id.ID_zoom_in -> {
                val animationZoomIn = AnimationUtils.loadAnimation(this, R.anim.zoom_in)
                TextMe.startAnimation(animationZoomIn)
            }
            R.id.ID_zoom_out -> {
                val animationZoomOut = AnimationUtils.loadAnimation(this, R.anim.zoom_out)
                TextMe.startAnimation(animationZoomOut)
            }
            R.id.ID_slide_down -> {
                val animationSlideDown = AnimationUtils.loadAnimation(this, R.anim.slide_down)
                TextMe.startAnimation(animationSlideDown)

            }
            R.id.ID_slide_up -> {
                val animationSlideUp = AnimationUtils.loadAnimation(this, R.anim.slide_up)
                TextMe.startAnimation(animationSlideUp)

            }
            R.id.ID_blink -> {
                TextMe.visibility = View.VISIBLE
                val animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.anim_blink)
                TextMe.startAnimation(animationFadeIn)

            }
            R.id.ID_move -> {
                TextMe.visibility = View.VISIBLE
                val animationFadeIn = AnimationUtils.loadAnimation(this, R.anim.anim_move)
                TextMe.startAnimation(animationFadeIn)

            }
            R.id.ID_bow_roate -> {
                val animationFadeOut = AnimationUtils.loadAnimation(this, R.anim.bow_roate)
                TextMe.startAnimation(animationFadeOut)
                Handler().postDelayed({
                    TextMe.visibility = View.GONE
                }, 3000)

            }
            R.id.ID_bounce -> {
                val animationBounce = AnimationUtils.loadAnimation(this, R.anim.bounce)
                TextMe.startAnimation(animationBounce)

            }
            R.id.ID_rotate -> {
                val animationRotate = AnimationUtils.loadAnimation(this, R.anim.rotate)
                TextMe.startAnimation(animationRotate)

            }

        }
    }

}

خروجی کد های بالا به شکل زیر می باشد .

در اینجا آموزش انیمیشن ها در کاتلین به اتمام رسید . تموم سعی ما در این می باشد که مباحثمون برای شما عزیزان مفید باشد . به امید رسیدن به این هدف !

موفق باشید

منابع که ما در این آموزش از آن نیز استفاده کرده ایم https://www.geeksforgeeks.org/ نیز می باشد .

برای امتیاز به این نوشته کلیک کنید!

[کل: 0 میانگین: 0]

👁 706

فرشید حبیبی

من فرشید حبیبی، توسعه‌دهنده نرم‌افزار با تمرکز بر برنامه‌نویسی اندروید هستم. در کنار فعالیت حرفه‌ای خود، وب‌سایت آموزشی «کدایت» را مدیریت می‌کنم و در آن به تولید محتوای آموزشی در حوزه برنامه‌نویسی اندروید می‌پردازم. هدف من، اشتراک دانش و کمک به برنامه‌نویسان برای یادگیری و پیشرفت در مسیر حرفه‌ای‌شان است.

مقالات آموزشگاه کدایت

جدیدترین مقالات و آموزش‌های تکمیلی برنامه‌نویسی را در وبلاگ کدایت بخوانید؛ مرجعی برای یادگیری مباحث پیشرفته کاتلین، توسعه اندروید، وب و فناوری‌های نوین.

اندروید

Context Parameters در Kotlin چیست؟ | وقتی یک پارامتر فقط دست‌به‌دست می‌شود

سلام عزیزان با آموزش Context Parameters در Kotlin در خدمت شما عزیزان هستیم .احتمالاً برای شما هم پیش اومده: یه تابع Logger می‌گیره، ولی خودش حتی

ادامه مطلب »

سپتامبر 21, 2026 بدون دیدگاه

کاتلین

ساخت کلاس های enum در کاتلین | آموزش مقدماتی کاتلین | درس بیست و چهارم

کلاس های enum در کاتلین چیست و چرا ما از enum استفاده می‌کنیم ؟ کلاس های enum در کاتلین برای نمایش مجموعه ‌ثابت از مقادیر

ادامه مطلب »

می 10, 2024 بدون دیدگاه

کاتلین

Data Classes در کاتلین | آموزش مقدماتی کاتلین | درس بیست و سوم

کلاس های داده در کاتلین ، نوع خاصی از کلاس هستند. که برای مدل‌سازی داده‌ها به روشی مختصر و کارآمد طراحی شده‌اند. با این روش

ادامه مطلب »

آوریل 25, 2024 بدون دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

آموزشگاه کدایت، مرجع تخصصی یادگیری برنامه‌نویسی مدرن، توسعه موبایل و وب است. هدف ما، تسهیل ورود شما به بازار کار از طریق آموزش دانش روز، انتقال تجربیات واقعی و تربیت متخصصان توانمند صنعت نرم‌افزار است.

خدمات ما

اطلاعات تماس

تمامی حقوق این وب‌سایت متعلق به مجموعه کدایت است.

طراحی سایت : ایپک