نمایش انیمیشن، در برنامه نویسی اندروید

P O U R I A · Jul 22, 2015

فهرست مطالب:

نمایش انیمیشن، در برنامه اندروید
نمایش یک عنصر گرافیکی با استفاده از انیمیشن (Animation) به صورت fade in (ظاهر شدن تدریجی عنصر)، در برنامه نویسی اندروید
نمایش یک عنصر گرافیکی با استفاده از انیمیشن (Animation) به صورت fade out (محو شدن تدریجی عنصر)، در برنامه نویسی اندروید

منابع: kelidestan.com

P O U R I A · Jul 22, 2015

نمایش انیمیشن، در برنامه اندروید

نمایش انیمیشن، در برنامه اندروید

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

در برنامه eclipse ، ابتدا یک پروژه اندروید با نام Kelidestan.com_Animation می سازیم (نام package را برابر com.kelidestan.animation انتخاب می کنیم. نام activity اصلی را برابر MainActivity انتخاب می کنیم و فایل xml متناظر آن را هم برابر activity_main قرار می دهیم).

قبل از شروع، باید تصاویر لازم برای ساخت انیمیشن را داشته باشیم. مثلا من تصاویر زیر را در نظر گرفته ام :

نام عکس	عکس	نام عکس	عکس	نام عکس	عکس
tick_1.jpg		tick_7.jpg		tick_13.jpg
tick_2.jpg		tick_8.jpg		tick_14.jpg
tick_3.jpg		tick_9.jpg		tick_15.jpg
tick_4.jpg		tick_10.jpg		tick_16.jpg
tick_5.jpg		tick_11.jpg		tick_17.jpg
tick_6.jpg		tick_12.jpg

با نمایش پی در پی عکس های بالا، یک انیمیشن خواهیم داشت که ترسیم یک علامت تیک را نمایش می دهد. دقت کنید که ابتدای نام عکس ها، یک کلمه مشخص و سپس در ادامه آن، شماره هایی، به ترتیب نمایش عکس ها، آمده است. نکته مهم این است که در انتخاب نام عکس ها، هیچ اجباری وجود ندارد و اینکه عکس ها را اینگونه نامگذاری کرده ایم، برای دادن نظم به آنها و عدم گیج شدن خودمان می باشد.

عکس های بالا را می توانید از لینک زیر دانلود نمایید :
مشاهده پیوست 103.zip

عکس ها را در فولدر drawable-hdpi کپی می کنیم :

در ابتدا که پروژه اندروید را می سازیم، نمایش گرافیکی فایل activity_main.xml ، به صورت زیر می باشد :

این صفحه، به طور پیش فرض، دارای یک TextView می باشد، ما TextView را حذف کرده و به جای آن، یک ImageView قرار می دهیم. انیمیشن مورد نظر ما، باید در این ImageView نمایش داده شود :

تا اینجا، کدهای فایل activity_main.xml ، به صورت زیر می باشد :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<[/COLOR]LinearLayout xmlns[COLOR=#339933]:[/COLOR]android[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"http://schemas.android.com/apk/res/android"[/COLOR]
    xmlns[COLOR=#339933]:[/COLOR]tools[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"http://schemas.android.com/tools"[/COLOR]
    android[COLOR=#339933]:[/COLOR]layout_width[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"match_parent"[/COLOR]
    android[COLOR=#339933]:[/COLOR]layout_height[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"match_parent"[/COLOR]
    android[COLOR=#339933]:[/COLOR]paddingBottom[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_vertical_margin"[/COLOR]
    android[COLOR=#339933]:[/COLOR]paddingLeft[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_horizontal_margin"[/COLOR]
    android[COLOR=#339933]:[/COLOR]paddingRight[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_horizontal_margin"[/COLOR]
    android[COLOR=#339933]:[/COLOR]paddingTop[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@dimen/activity_vertical_margin"[/COLOR]
    tools[COLOR=#339933]:[/COLOR]context[COLOR=#339933]=[/COLOR][COLOR=#0000FF]".MainActivity"[/COLOR] [COLOR=#339933]>[/COLOR]

    [COLOR=#339933]<[/COLOR]ImageView
        android[COLOR=#339933]:[/COLOR]id[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@+id/imageView1"[/COLOR]
        android[COLOR=#339933]:[/COLOR]layout_width[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"match_parent"[/COLOR]
        android[COLOR=#339933]:[/COLOR]layout_height[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"wrap_content"[/COLOR]
        android[COLOR=#339933]:[/COLOR]src[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/ic_launcher"[/COLOR] [COLOR=#339933]/>[/COLOR]

[COLOR=#339933]</[/COLOR]LinearLayout[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

مشاهده می کنید که id برای ImageView ، برابر imageView1 تعریف شده است.

در زیرمجموعه فولدر res ، یک فولدر با نام anim می سازیم و سپس درون آن، یک فایل با نام animation.xml ایجاد می کنیم :

کدهای فایل animation.xml را به صورت زیر می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#339933]<?[/COLOR]xml version[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"1.0"[/COLOR] encoding[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"utf-8"[/COLOR][COLOR=#339933]?>[/COLOR]
[COLOR=#339933]<[/COLOR]animation[COLOR=#339933]-[/COLOR]list android[COLOR=#339933]:[/COLOR]oneshot[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"true"[/COLOR] xmlns[COLOR=#339933]:[/COLOR]android[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"http://schemas.android.com/apk/res/android"[/COLOR][COLOR=#339933]>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_1"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_2"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_3"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_4"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_5"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_6"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_7"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_8"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_9"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_10"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_11"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_12"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_13"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_14"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_15"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_16"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]
     [COLOR=#339933]<[/COLOR]item android[COLOR=#339933]:[/COLOR]drawable[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"@drawable/tick_17"[/COLOR] android[COLOR=#339933]:[/COLOR]duration[COLOR=#339933]=[/COLOR][COLOR=#0000FF]"100"[/COLOR][COLOR=#339933]/>[/COLOR]

[COLOR=#339933]</[/COLOR]animation[COLOR=#339933]-[/COLOR]list[COLOR=#339933]>[/COLOR][/FONT]
[/FONT][/COLOR]

اکنون باید به سراغ فایل activity اصلی برویم که قبلا، نام آن را برابر MainActivity انتخاب کرده ایم :

کدهای فایل MainActivity.java ، در ابتدا، به صورت زیر می باشد :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]package[/B] [COLOR=#006699]com.iran-eng.animation[/COLOR][COLOR=#339933];[/COLOR]

[B]import[/B] [COLOR=#006699]android.os.Bundle[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.app.Activity[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.Menu[/COLOR][COLOR=#339933];[/COLOR]

[B]public[/B] [B]class[/B] MainActivity [B]extends[/B] Activity [COLOR=#009900]{[/COLOR]

        @Override
        [B]protected[/B] [COLOR=#000066][B]void[/B][/COLOR] onCreate[COLOR=#009900]([/COLOR]Bundle savedInstanceState[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                [B]super[/B].[COLOR=#006633]onCreate[/COLOR][COLOR=#009900]([/COLOR]savedInstanceState[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                setContentView[COLOR=#009900]([/COLOR]R.[COLOR=#006633]layout[/COLOR].[COLOR=#006633]activity_main[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
        [COLOR=#009900]}[/COLOR]

        @Override
        [B]public[/B] [COLOR=#000066][B]boolean[/B][/COLOR] onCreateOptionsMenu[COLOR=#009900]([/COLOR][COLOR=#003399]Menu[/COLOR] menu[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                [COLOR=#666666][I]// Inflate the menu; this adds items to the action bar if it is present.[/I][/COLOR]
                getMenuInflater[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]inflate[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]menu[/COLOR].[COLOR=#006633]main[/COLOR], menu[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                [B]return[/B] [COLOR=#000066][B]true[/B][/COLOR][COLOR=#339933];[/COLOR]
        [COLOR=#009900]}[/COLOR]

[COLOR=#009900]}[/COLOR]
[/FONT]
[/FONT][/COLOR]

کدهای فایل MainActivity.java را به صورت زیر تغییر می دهیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]package[/B] [COLOR=#006699]com.[/COLOR][COLOR=#006699]iran-eng[/COLOR][COLOR=#006699].animation[/COLOR][COLOR=#339933];[/COLOR]

[B]import[/B] [COLOR=#006699]android.os.Bundle[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.app.Activity[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.graphics.drawable.AnimationDrawable[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.Menu[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.View[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.view.View.OnClickListener[/COLOR][COLOR=#339933];[/COLOR]
[B]import[/B] [COLOR=#006699]android.widget.ImageView[/COLOR][COLOR=#339933];[/COLOR]

[B]public[/B] [B]class[/B] MainActivity [B]extends[/B] Activity [COLOR=#009900]{[/COLOR]

        @Override
        [B]protected[/B] [COLOR=#000066][B]void[/B][/COLOR] onCreate[COLOR=#009900]([/COLOR]Bundle savedInstanceState[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                [B]super[/B].[COLOR=#006633]onCreate[/COLOR][COLOR=#009900]([/COLOR]savedInstanceState[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                setContentView[COLOR=#009900]([/COLOR]R.[COLOR=#006633]layout[/COLOR].[COLOR=#006633]activity_main[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                
                [B]final[/B] ImageView img [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]ImageView[COLOR=#009900])[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]imageView1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                img.[COLOR=#006633]setBackgroundResource[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]anim[/COLOR].[COLOR=#006633]animation[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]

                img.[COLOR=#006633]setOnClickListener[/COLOR][COLOR=#009900]([/COLOR][B]new[/B] OnClickListener[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                    @Override
                    [B]public[/B] [COLOR=#000066][B]void[/B][/COLOR] onClick[COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR] v[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                        img.[COLOR=#006633]setImageDrawable[/COLOR][COLOR=#009900]([/COLOR][COLOR=#000066][B]null[/B][/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                        AnimationDrawable anim [COLOR=#339933]=[/COLOR] [COLOR=#009900]([/COLOR]AnimationDrawable[COLOR=#009900])[/COLOR] img.[COLOR=#006633]getBackground[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                        anim.[COLOR=#006633]start[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                    [COLOR=#009900]}[/COLOR]
                [COLOR=#009900]}[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
        [COLOR=#009900]}[/COLOR]

        @Override
        [B]public[/B] [COLOR=#000066][B]boolean[/B][/COLOR] onCreateOptionsMenu[COLOR=#009900]([/COLOR][COLOR=#003399]Menu[/COLOR] menu[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                [COLOR=#666666][I]// Inflate the menu; this adds items to the action bar if it is present.[/I][/COLOR]
                getMenuInflater[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR].[COLOR=#006633]inflate[/COLOR][COLOR=#009900]([/COLOR]R.[COLOR=#006633]menu[/COLOR].[COLOR=#006633]main[/COLOR], menu[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                [B]return[/B] [COLOR=#000066][B]true[/B][/COLOR][COLOR=#339933];[/COLOR]
        [COLOR=#009900]}[/COLOR]

[COLOR=#009900]}[/COLOR][/FONT]
[/FONT][/COLOR]

در کدهای بالا، خط زیر، اهمیت ویژه ای دارد :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace]img.[COLOR=#006633]setImageDrawable[/COLOR][COLOR=#009900]([/COLOR][COLOR=#000066][B]null[/B][/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

این خط از کدها، باعث می شود که عکس نمایش داده شده در ImageView ، برداشته شود (در غیر اینصورت، انیمیشن، در پشت این عکس نمایش داده خواهد شد).

برنامه اندروید آماده است و می توانید آن را به شیوه دلخواه خود، اجرا کنید و نتیجه را ببینید.با اجرای برنامه اندروید، بر روی یک گوشی، صفحه زیر نمایش داده می شود :

با اشاره بر روی تصویر، انیمیشن نمایش داده می شود.
فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :

P O U R I A · Jul 22, 2015

نمایش یک عنصر گرافیکی با استفاده از انیمیشن (Animation) به صورت fade in (ظاهر شدن تدریجی عنصر)، در برنامه نویسی اندروید

نمایش یک عنصر گرافیکی با استفاده از انیمیشن (Animation) به صورت fade in (ظاهر شدن تدریجی عنصر)، در برنامه نویسی اندروید

برای انیمیشن (Animation) به صورت fade in (ظاهر شدن تدریجی عنصر)، کدهای زیر را می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#003399]View[/COLOR] myView [COLOR=#339933]=[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]button1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// define Animation ((fade in))[/I][/COLOR]
Animation fadeIn [COLOR=#339933]=[/COLOR] [B]new[/B] AlphaAnimation[COLOR=#009900]([/COLOR][COLOR=#CC66CC]0[/COLOR], [COLOR=#CC66CC]1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
fadeIn.[COLOR=#006633]setInterpolator[/COLOR][COLOR=#009900]([/COLOR][B]new[/B] DecelerateInterpolator[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] 
fadeIn.[COLOR=#006633]setDuration[/COLOR][COLOR=#009900]([/COLOR][COLOR=#CC66CC]1000[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// set Animation[/I][/COLOR]
myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]GONE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]VISIBLE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myView.[COLOR=#006633]setAnimation[/COLOR][COLOR=#009900]([/COLOR]fadeIn[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

در کد بالا، id عنصر را برابر button1 در نظر گرفته ایم. همچنین نوع عنصر مهم نیست (مثلا می تواند یک ImageView باشد).

مدت زمان ظاهر شدن، توسط روش setDuration تعیین شده است (واحد آن میلی ثانیه می باشد، پس عدد 1000 معادل 1 ثانیه می باشد).

P O U R I A · Jul 22, 2015

نمایش یک عنصر گرافیکی با استفاده از انیمیشن (Animation) به صورت fade out (محو شدن تدریجی عنصر)، در برنامه نویسی اندروید

نمایش یک عنصر گرافیکی با استفاده از انیمیشن (Animation) به صورت fade out (محو شدن تدریجی عنصر)، در برنامه نویسی اندروید

برای انیمیشن (Animation) به صورت fade out (محو شدن تدریجی عنصر)، کدهای زیر را می نویسیم :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#003399]View[/COLOR] myView [COLOR=#339933]=[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]button1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// define Animation ((fade out))[/I][/COLOR]
Animation fadeOut [COLOR=#339933]=[/COLOR] [B]new[/B] AlphaAnimation[COLOR=#009900]([/COLOR][COLOR=#CC66CC]1[/COLOR], [COLOR=#CC66CC]0[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
fadeOut.[COLOR=#006633]setInterpolator[/COLOR][COLOR=#009900]([/COLOR][B]new[/B] AccelerateInterpolator[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] 
fadeOut.[COLOR=#006633]setStartOffset[/COLOR][COLOR=#009900]([/COLOR][COLOR=#CC66CC]1000[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
fadeOut.[COLOR=#006633]setDuration[/COLOR][COLOR=#009900]([/COLOR][COLOR=#CC66CC]1000[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// set Animation[/I][/COLOR]
myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]GONE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]VISIBLE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myView.[COLOR=#006633]setAnimation[/COLOR][COLOR=#009900]([/COLOR]fadeOut[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

در کد بالا، id عنصر را برابر button1 در نظر گرفته ایم. همچنین نوع عنصر مهم نیست (مثلا می تواند یک ImageView باشد).

مدت زمان محو شدن، توسط روش setDuration تعیین شده است (واحد آن میلی ثانیه می باشد، پس عدد 1000 معادل 1 ثانیه می باشد).

[h=4]نکته :[/h]با اجرای کد بالا، پس از محو کامل، عنصر دوباره نمایش داده می شود. اگر قصد دارید که عنصر برای همیشه محو شود، کدها را به صورت زیر اجرا کنید (بعد از گذشت زمانی برابر همان زمان مربوط به انیمیشن، View مربوط به عنصر را حذف می کنیم) :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#003399]View[/COLOR] myView [COLOR=#339933]=[/COLOR] findViewById[COLOR=#009900]([/COLOR]R.[COLOR=#006633]id[/COLOR].[COLOR=#006633]imageView1[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// define Animation ((fade out))[/I][/COLOR]
Animation fadeOut [COLOR=#339933]=[/COLOR] [B]new[/B] AlphaAnimation[COLOR=#009900]([/COLOR][COLOR=#CC66CC]1[/COLOR], [COLOR=#CC66CC]0[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
fadeOut.[COLOR=#006633]setInterpolator[/COLOR][COLOR=#009900]([/COLOR][B]new[/B] AccelerateInterpolator[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR] 
[COLOR=#000066][B]int[/B][/COLOR] myTimeStartOffset [COLOR=#339933]=[/COLOR] [COLOR=#CC66CC]1000[/COLOR][COLOR=#339933];[/COLOR]
fadeOut.[COLOR=#006633]setStartOffset[/COLOR][COLOR=#009900]([/COLOR]myTimeStartOffset[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#000066][B]int[/B][/COLOR] myTimeDuration [COLOR=#339933]=[/COLOR] [COLOR=#CC66CC]1000[/COLOR][COLOR=#339933];[/COLOR]
fadeOut.[COLOR=#006633]setDuration[/COLOR][COLOR=#009900]([/COLOR]myTimeDuration[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// set Animation[/I][/COLOR]
myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]GONE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]VISIBLE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myView.[COLOR=#006633]setAnimation[/COLOR][COLOR=#009900]([/COLOR]fadeOut[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
[COLOR=#666666][I]// Class[/I][/COLOR]
MyCountDownTimer myCountDownTimer [COLOR=#339933]=[/COLOR] [B]new[/B] MyCountDownTimer[COLOR=#009900]([/COLOR]myTimeDuration[COLOR=#339933]+[/COLOR]myTimeStartOffset, [COLOR=#CC66CC]1000[/COLOR], myView[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
myCountDownTimer.[COLOR=#006633]start[/COLOR][COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR][/FONT]
[/FONT][/COLOR]

که برای اجرای آن، باید یک کلاس (Class) به صورت زیر تعریف کنیم (بر اساس گسترش کلاس استاندارد CountDownTimer ، زیرا می خواهیم یک View نیز به ورودی کلاس داده شود) :

کد:

[COLOR=#000000][FONT=Tahoma][FONT=monospace][B]public[/B] [B]class[/B] MyCountDownTimer [B]extends[/B] CountDownTimer[COLOR=#009900]{[/COLOR]
        [COLOR=#003399]View[/COLOR] myView[COLOR=#339933];[/COLOR]

        [B]public[/B] MyCountDownTimer[COLOR=#009900]([/COLOR][COLOR=#000066][B]long[/B][/COLOR] millisInFuture, [COLOR=#000066][B]long[/B][/COLOR] countDownInterval, [COLOR=#003399]View[/COLOR] view[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                [B]super[/B][COLOR=#009900]([/COLOR]millisInFuture, countDownInterval[COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
                [B]this[/B].[COLOR=#006633]myView[/COLOR] [COLOR=#339933]=[/COLOR] view[COLOR=#339933];[/COLOR]
        [COLOR=#009900]}[/COLOR]

        @Override
        [B]public[/B] [COLOR=#000066][B]void[/B][/COLOR] onTick[COLOR=#009900]([/COLOR][COLOR=#000066][B]long[/B][/COLOR] millisUntilFinished[COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
        [COLOR=#009900]}[/COLOR]

        @Override
        [B]public[/B] [COLOR=#000066][B]void[/B][/COLOR] onFinish[COLOR=#009900]([/COLOR][COLOR=#009900])[/COLOR] [COLOR=#009900]{[/COLOR]
                myView.[COLOR=#006633]setVisibility[/COLOR][COLOR=#009900]([/COLOR][COLOR=#003399]View[/COLOR].[COLOR=#006633]GONE[/COLOR][COLOR=#009900])[/COLOR][COLOR=#339933];[/COLOR]
        [COLOR=#009900]}[/COLOR]
[COLOR=#009900]}[/COLOR][/FONT]
[/FONT][/COLOR]

عنوان	تالار	پاسخ ها	تاریخ
ساخت ProgressDialog یا ProgressBar برای نمایش میزان پیشرفت اجرای یک سری عملیات، در برنامه نویسی اندروید	برنامه نویسی موبایل	3	Jul 26, 2015
ویژگی های صفحه نمایش و چرخش آن، در برنامه نویسی اندروید	برنامه نویسی موبایل	10	Jul 25, 2015
نمایش پیام به کاربر، در برنامه نویسی اندروید	برنامه نویسی موبایل	8	Jul 25, 2015
نمایش یک صفحه اینترنتی یا کدهای HTML (کار با WebView) و ساخت لینک، در برنامه نویسی اندروید	برنامه نویسی موبایل	8	Jul 25, 2015
نمایش متن و کار با رشته ها (strings) و TextView ، در برنامه نویسی اندروید	برنامه نویسی موبایل	36	Jul 21, 2015

نمایش انیمیشن، در برنامه نویسی اندروید

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

پیوست ها

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد

Similar threads