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

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

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

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

<?xml version="1.0" encoding="utf-8"?>

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

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

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

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

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

<?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" />

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

<?xml version="1.0" encoding="utf-8"?>

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

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

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

            }

        }
    }

}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

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]

اشتراک‌گذاری

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

splash screen در کاتلین | آموزش ساخت اسپلش اسکرین در کاتلین نوشته بعد

فرشید حبیبی

من فرشید حبیبی هستم، یک برنامه نویس موبایل با بیش از 5 سال تجربه. من علاقه زیادی به برنامه نویسی دارم و در این زمینه به طور مداوم در حال یادگیری و پیشرفت هستم. در حال حاضر، به عنوان یک برنامه نویس اندروید در یک شرکت معتبر مشغول به کار هستم و همچنین یک وبسایت آموزشی به نام کدایت را اداره می کنم. در کدایت، به تولید محتوای آموزشی در مورد برنامه نویسی اندروید و وب می پردازیم. هدف من از ایجاد این وبسایت، کمک به سایر برنامه نویسان اندرویدی برای یادگیری و پیشرفت در این زمینه است.

نوشته‌های مرتبط

کاتلین

درباره ما

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

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

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

blink

move

bounce

rotate

zoom

slide

fade

anim_blink.xml.

anim_move.xml .

bounce.xml .

bow_roate.xml .

fade_in.xml .

fade_out.xml .

rotate.xml .

slide_down.xml .

slide_up.xml .

Zoom_in.xml .

Zoom_out.xml.

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

activity_animation.xml .

Animation .

فرشید حبیبی

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

آخرین نوشته ها

بروز ترین و کامل‌ترین سوالات استخدامی اندروید در کدایت

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

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

منتخب مطالب

نحوی استفاده از interface در کاتلین و تعریف آن | آموزش مقدماتی کاتلین | درس بیست و دوم

تفاوت ميان Shallow و Deep کپي

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

ارث بری یا Inheritance در برنامه نویسی کاتلین | آموزش مقدماتی کاتلین | درس بیستم

دسته‌ها