انیمیشن ها باعث میشن که اپلیکیشن ما رابط کاربری جذاب و حرفه ای داشته باشن.

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

این پست هم مربوط میشه به ساخت یه انیمیشن جذاب.

انیمیشنی که تقریبا شبیه اسکن کردی چیزی هستش.

برای همین هم اسمش رو ScanBar گذاشتم.

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

این پایین میتونی دمو انیمیشن رو ببینی :

نمایش ویدیو در یوتیوب

خب حالا که ویدیو دمو رو دیدی بریم دیگه سراغ آموزشش.

اول کد ها رو قرار میدم.

انتها همین پست هم ویدیو کامل آموزشی و همچنین فایل های مورد نظر رو قرار میدم.

توی این مطلب، کدها اصلی رو قرار میدم. یعنی کدهای فرگمنت و کدهای فایل انیمیشن.

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

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto"
    android:fillAfter="true"
    motion:motionInterpolator="@android:anim/linear_interpolator">

    <translate
        android:duration="900"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:toYDelta="53%p" />

    <translate
        android:duration="900"
        android:fillAfter="true"
        android:fromYDelta="0%p"
        android:startOffset="800"
        android:toYDelta="-53%p" />

</set>

خب حالا باید کدهای فرگمنت رو بزنید.

فرگمنت هم شامل 2 بخش میشه.

بخش اول : لایه

بخش دوم : کد کاتلین

کد مربوط به لایه فرگمنت :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".scan_animation.ScanAnimPage">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp">

        <ImageView
            android:id="@+id/scanFrame"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/scan_bar2" />

        <ImageView
            android:id="@+id/userImage"
            android:layout_width="120dp"
            android:layout_height="120dp"
            android:layout_alignLeft="@id/scanFrame"
            android:layout_alignTop="@id/scanFrame"
            android:layout_alignRight="@id/scanFrame"
            android:layout_alignBottom="@id/scanFrame"
            android:padding="15dp"
            android:src="@drawable/my" />

        <ImageView
            android:id="@+id/scanLine"
            android:layout_width="120dp"
            android:layout_height="10dp"
            android:layout_centerHorizontal="true"
            android:layout_margin="5dp"
            android:src="@drawable/scan_line2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/scanFrame"
            android:layout_marginTop="30dp"
            android:layout_marginBottom="30dp"
            android:fontFamily="@font/iran_sans"
            android:gravity="center"
            android:text="تصویر شما با موفقی بارگذاری شد\n منتظر اسکن بمانید"
            android:textColor="@color/pink"
            android:textSize="14sp" />

    </RelativeLayout>

</FrameLayout>

خب در نهایت هم کدهای کاتلین مربوط به فرگمنت :

class ScanAnimFragment : BottomSheetDialogFragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_scan_animation, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        setAnimation()
    }

    private fun setAnimation(){
        val anim = AnimationUtils.loadAnimation(requireContext(),R.anim.up_down)

        scanLine.startAnimation(anim)

        anim.setAnimationListener(object : Animation.AnimationListener{
            override fun onAnimationStart(animation: Animation?) {

            }

            override fun onAnimationEnd(animation: Animation?) {
                val anim = AnimationUtils.loadAnimation(requireContext(),R.anim.up_down)
                anim.setAnimationListener(this)
                scanLine.startAnimation(anim)
            }

            override fun onAnimationRepeat(animation: Animation?) {

            }

        })
    }
}

خب دیگه کار تموم شد.

ولی اگه میخوای بدونی که هر بخش از کد چه کاری انجام میدن و این کدها رو کامل یاد بگیری

پس ویدیو کامل آموزشی رو ببین.

نمایش کامل ویدیو آموزشی :

نمایش ویدیو در یوتیوب

فایل های مربوط به عکس اسکن کردن رو هم میزارم که بتونی راحت ازشون استفاده کنی

دانلود فایل های استفاده شده

خب این آموزش هم همینجا تموم شد.

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

سوالی داشتید حتما توی کامنت ها ازم بپرسید.🌹🌹