ساخت یک انیمیشن در اندروید از روش‌های مختلفی امکان پذیر است. شما می‌توانید با استفاده از کلاس های Animation، viewها را متحرک کنید یا با استفاده از canvas ها تصاویر متحرک بسازید و یا انیمیشن خود را در after effect بسازید و سپس با استفاده از کتابخانه lottie در اندروید نمایش دهید.
ما قصد داریم در این آموزش با استفاده از کتابخانه richpath تصاویر برداری(vector) خود را متحرک کنیم و انیمیشن های جدیدی را بسازیم.
با ما همراه باشید.

نصب کتابخانه

در قدم اول باید کتابخانه را با استفاده از gradle دانلود و نصب کنیم.
داخل فایل gradle اصلی پروژه باید مخزن “https://jitpack.io” را وارد کنیم. مانند زیر :

allprojects {
	repositories {
		...
		maven { url "https://jitpack.io" }
	}
}

سپس باید وابستگی (dependency) را مانند زیر در فایل gradle پیمانه(module) وارد کرده و سپس دکمه sync را بزنید.

dependencies {
	...
	implementation 'com.github.tarek360.RichPath:animator:0.1.0'
}

افزودن کلاس در XML

در قدم دوم باید کلاس richPath را داخل فایل xml خود مانند زیر وارد کنیم.

  <com.richpath.RichPathView
        android:id"@+id/richPath"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:vector="@drawable/vector_drawable" />

به جای vector_drawable تصویر vector خود را قرار دهید.(برای نمونه در این مقاله از یک کد تصویر استفاده می‌کنیم که شما نیز می‌توانید از آن استفاده کنید)

تشریح و آماده سازی تصویر برداری

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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportHeight="32.0"
    android:viewportWidth="32.0">

    <group
        android:pivotX="16"
        android:pivotY="6.25">
        <path
            android:name="top"
            android:fillColor="#FFF7F7F7"
            android:pathData="M22,19.8v-5c0-3.1-1.6-5.6-4.5-6.3V7.8c0-0.8-0.7-1.5-1.5-1.5s-1.5,0.7-1.5,1.5v0.7c-2.9,0.7-4.5,3.2-4.5,6.3v5l-2,2v1h16v-1L22,19.8z" />

        <path
            android:name="bottom"
            android:fillColor="#FFF7F7F7"
            android:pathData="M16,25.8c1.1,0,2-0.9,2-2h-4C14,24.9,14.9,25.8,16,25.8z" />
    </group>
</vector>
</vector>

کد بالا تصویر زیر را می‌سازد.

بکار گیری تصویر در کد جاوا

در کد جاوا با استفاده از متد findViewById کلاس xml را می‌گیریم.

richPathView = findViewById(R.id.richPath);

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

RichPath richPath = richPathView.findRichPathByName("path_name");

برای نمونه به صورت زیر می‌نویسیم.

RichPath top = notificationsRichPathView.findRichPathByName("top");
RichPath bottom = notificationsRichPathView.findRichPathByName("bottom");

RichPathAnimator.animate(top)
        .interpolator(new DecelerateInterpolator())
        .rotation(0, 20, -20, 10, -10, 5, -5, 2, -2, 0)
        .duration(4000)
        .andAnimate(bottom)
        .interpolator(new DecelerateInterpolator())
        .rotation(0, 10, -10, 5, -5, 2, -2, 0)
        .startDelay(50)
        .duration(4000)
        .start();

در کد بالا با استفاده از متد animate و andAnimate مسیرهایی (path) که مشخص شده‌اند را می‌توانیم بچرخانیم(rotation) یا شفافیت (alpha) را تغییر دهیم و یا دیگر ویژگی ها را تغییر دهیم.

دیگر امکانات

از دیگر ویژگی های این کتابخانه می‌توان به متد های زیر اشاره کرد :

fillColor, strokeColor, strokeAlpha, fillAlpha, size, width, height, scale, scaleX, scaleY, rotation, translationX, translationY, trimPathStart, trimPathEnd, trimPathOffset

با این کتابخانه می‌توانید انیمیشن های زیادی را بسازید و از آنها برای هرچه زیباتر شدن محیط نرم افزارهایتان استفاده کنید.

منبع : github