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

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

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

انیمیشن ها  به روی ابجکت ها و ویجت های ما اعمال می شود . و ظاهر جذابی به 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/  نیز می باشد .