VectorDrawable — частина друга

попередній статті ми розглянули, як перетворити існуючий svg-файл в VectorDrawable, який дозволяє замінити багато растрових зображень на одне, менше за розміром і більш просте в обслуговуванні. Однак, це не всі корисності, які можна отримати з VectorDrawable. Його можна анімувати. Це ми і розглянемо в даній статті, змусивши логотип андроїд знизувати плечима.
Анімація, яку ми задумали — це простий рух по осі Y. Ми хочемо переміщати голову і руки, але залишити нерухомим тіло. На перший погляд все це виглядає досить складно, тому що це все елементи одного Drawable. Але в Lollipop, разом з VectorDravable був введений компонент, який дуже сильно спрощує нам завдання. А саме — AnimatedVectorDrawable. У попередній статті ми дали кожному елементу path ім'я, і тепер можемо застосувати анімацію для різний path в межах VectorDrawable. На практиці це виявилося трохи важко, тому що path не має таких атрибутів, як translateX і translateY, які ми можемо контролювати аніматором. Елемент group має необхідні нам атрибути, тому ми скрутили голову і руки в grope:
res/drawable/android.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="500"
android:viewportHeight="500"
android:width="500px"
android:height="500px">
<group android:name="android">
<group android:name="head_eyes">
<path
android:name="head"
android:fillColor="#9FBF3B"
android:pathData="M301.314,83.298l20.159-29.272c1.197-1.74,0.899-4.024-0.666-5.104 c-1.563-1.074-3.805-0.543-4.993,1.199L294.863,80.53 c-13.807-5.439-29.139-8.47-45.299-8.47 c-16.16,0-31.496,3.028-45.302,8.47 l-20.948-30.41 c-1.201-1.74-3.439-2.273-5.003-1.199 c-1.564,1.077-1.861,3.362-0.664,5.104l20.166,29.272 c-32.063,14.916-54.548,43.26-57.413,76.34h218.316C355.861,126.557,333.375,98.214,301.314,83.298" />
<path
android:name="left_eye"
android:fillColor="#FFFFFF"
android:pathData="M203.956,129.438 c-6.673,0-12.08-5.407-12.08-12.079c0-6.671,5.404-12.08,12.08-12.08c6.668,0,12.073,5.407,12.073,12.08C216.03,124.03,210.624,129.438,203.956,129.438" />
<path
android:name="right_eye"
android:fillColor="#FFFFFF"
android:pathData="M295.161,129.438 c-6.668,0-12.074-5.407-12.074-12.079c0-6.673,5.406-12.08,12.074-12.08c6.675,0,12.079,5.409,12.079,12.08C307.24,124.03,301.834,129.438,295.161,129.438" />
</group>
<group android:name="arms">
<path
android:name="left_arm"
android:fillColor="#9FBF3B"
android:pathData="M126.383,297.598c0,13.45-10.904,24.354-24.355,24.354l0,0c-13.45,0-24.354-10.904-24.354-24.354V199.09c0-13.45,10.904-24.354,24.354-24.354l0,0c13.451,0,24.355,10.904,24.355,24.354V297.598z" />
<path
android:name="right_arm"
android:fillColor="#9FBF3B"
android:pathData="M372.734,297.598c0,13.45,10.903,24.354,24.354,24.354l0,0c13.45,0,24.354-10.904,24.354-24.354V199.09c0-13.45-10.904-24.354-24.354-24.354l0,0c-13.451,0-24.354,10.904-24.354,24.354V297.598z" />
</group>
<path
android:name="body"
android:fillColor="#9FBF3B"
android:pathData="M140.396,175.489v177.915c0,10.566,8.566,19.133,19.135,19.133h22.633v54.744c0,13.451,10.903,24.354,24.354,24.354c13.451,0,24.355-10.903,24.355-24.354 v-54.744h37.371v54.744c0,13.451,10.902,24.354,24.354,24.354s24.354-10.903,24.354-24.354 v-54.744h22.633c10.569,0,19.137-8.562,19.137-19.133V175.489H140.396z" />
</group>
</vector>

Тепер ми можемо написати drawable з animated-vector, щоб застосувати анімацію до потрібних груп, нашого зображення:
res/drawable/animated_android.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/android">

<target
android:animation="@animator/shrug"
android:name="head_eyes" />

<target
android:animation="@animator/shrug"
android:name="arms" />
</animated-vector>

Я знаю, що можна було об'єднати голову і руки в одну групу, але свідомо поділив на дві, щоб показати, як кілька груп можна анімувати за допомогою одного animated-vector.
Батьківський елемент "animated-vector" визначає VectorDrawable, який ми будемо анімувати. А внутрішні елементи target визначають тип анімації і групу, до якої застосована ця анімація.
Існують різні параметри, які можна анімувати у різних елементів, таких як vector, group, clip-path і path. Тому потрібно подивитися VectorDravable JavaDocs, щоб дізнатися які елементи використовувати для конкретної анімації. Наприклад, змінювати параметр tint, необхідно у елемента vector, тоді як зміна кольору заливки потрібно робити у параметр path.
Напишемо просту анімацію зміни положення по Y для знизування плечима нашого андроїда:
res/animator/shrug.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="translateY"
android:valueType="floatType"
android:valueFrom="0"
android:valueTo="-10"
android:repeatMode="reverse"
android:repeatCount="infinite"
android:duration="250" />
</set>

Для того, щоб запустити цю анімацію нам потрібно зробити кілька речей. Для початку ми повинні змінити Drawable, що ми встановили на ImageView в нашому layout:
res/layout/activity_vector_drawables.xml
<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".VectorDrawablesActivity">

<ImageView
android:id="@+id/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/animated_android"
android:contentDescription="@null" />

</RelativeLayout>

Якщо ми запустимо додаток, то побачимо статичне зображення, тому що анімацію необхідно запустити з activity:
VectorDrawablesActivity.java
public class VectorDrawablesActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R. layout.activity_vector_drawables);
ImageView androidImageView = (ImageView) findViewById(R. id.android);
Drawable drawable = androidImageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
}
}

Якщо запустити додаток тепер, то ми побачимо, що анімація працює і застосовується тільки до потрібних нам частинам зображення:
У наступній статті ми глибше вивчимо і розглянемо деякі дійсно круті методи анімації, які можна зробити за допомогою AnimatedVectorDrawable.
Вихідний код для цієї статті доступний здесь.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.