ایجاد انیمیشن برای تصاویر Vector در اندروید

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

امکان تعییر شکل نیز در این اپلیکشین وجود دارد.
ابتدا باید وارد فایل Build.gradle از نوع Top-Level شده سپس در بخش repositories خط زیر را اضافه کنید.

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

allprojects {

repositories {

...

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

}

وارد فایل دیگر Build.gradle شده فایل Module سپس در بخش dependencies خط زیر را قرار دهید.

	implementation 'com.github.tarek360.RichPath:animator:0.1.0'

1	implementation 'com.github.tarek360.RichPath:animator:0.1.0'

پروژه را sync کنید قند شکن فراموش نشود.
ابتدا باید یک عکس Vector بسازید با استفاده از کد زیر می توانید آن را ایحاد کنید. (برای ساخت عکس های Vector بهتر است از برنامه های همانند Photoshop و برای پیشرفته تر از illustrator استفاده کنید.)
عکس را باید در پوشه drawable ایجاد کنید نام آن را ما برابر با ic_notifications.xml قرار میدهیم.

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

<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 میسازد بعد از آن باید از View زیر در layout خود استفاده کنید.

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

<com.richpath.RichPathView

android:id="@+id/ic_notifications"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:vector="@drawable/ic_notifications" />

بعد از اینکار در بخش کد همانند زیر عمل کنید.

RichPathView androidRichPathView = findViewById(R.id.ic_android);
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();

RichPathView androidRichPathView = findViewById(R.id.ic_android);

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();

در خط اول ابتدا شئی را find کردیم سپس node های عکس را find کردیم و برای هرکدام یک انیمیشن تعریف کنیم برای اینکه چندین انیمیشن قرار دهید ابتدا باید یک interpolator ایجاد کنید سپس در ورودی متد rotation مسیر های مختلف حرکتی را قرار دهید و از duration به منظورت تعیین میزان زمانی که انیمیشن اجرا شود و در نهایت با استفاده از andAnimate انیمیشن را به node پیدا شده میدهیم.
RichPath از رویداد کلیک نیز پشتیبانی می کند.

richPathView.setOnPathClickListener(new RichPath.OnPathClickListener() {
    @Override
    public void onClick(RichPath richPath) {
       if (richPath.getName().equals("path_name")) {
           //TODO do an action when a specific path is clicked.
       }
    }
});

richPathView.setOnPathClickListener(new RichPath.OnPathClickListener() {

@Override

public void onClick(RichPath richPath) {

if (richPath.getName().equals("path_name")) {

//TODO do an action when a specific path is clicked.

}

});

این آموزش هم به پایان رسید.
موفق و پیروز باشید.

مطالعه بیشتر

ایجاد انیمیشن برای تصاویر Vector در اندروید

مطالب مشابه

یک پاسخ به “ایجاد انیمیشن برای تصاویر Vector در اندروید”

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

مطالب مشابه

یک پاسخ به “ایجاد انیمیشن برای تصاویر Vector در اندروید”

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

اشتراک گذاری در شبکه های اجتماعی