Как сделать чек / галочку и кросс-анимацию в Android
Класс AnimatedVectorDrawable был представлен в API 21 и используется для красивой и простой анимации векторных чертежей. Используя AnimatedVectorDrawable, можно:
- Поворот, масштабирование, преобразование векторных чертежей
- Анимируйте VectorDrawable, например цвет заливки и т. Д.
- Нарисуйте пути и сделайте морфинг пути
Элемент AnimatedVectorDrawable имеет атрибут VectorDrawable и один или несколько целевых элементов. Целевой элемент может указывать свою цель с помощью атрибута android: name и связывать цель с надлежащим ObjectAnimator или AnimatorSet с помощью атрибута android: animation.
Подход к рисованию анимации Tick Cross:
- Создайте новый файл tick_cross.xml в каталоге значений и добавьте следующие данные пути для рисования вектора и команды пути:
tick_cross.xml
<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
<
resources
>
<!-- geometry -->
<
integer
name
=
"viewport_width"
>24</
integer
>
<
integer
name
=
"viewport_height"
>24</
integer
>
<
integer
name
=
"viewport_center_x"
>12</
integer
>
<
integer
name
=
"viewport_center_y"
>12</
integer
>
<
string
name
=
"path_tick"
>M4.8, 13.4 L9,
17.6 M10.4,
16.2 L19.6, 7
</
string
>
<
string
name
=
"path_cross"
>M6.4, 6.4 L17.6,
17.6 M6.4,
17.6 L17.6, 6.4
</
string
>
<
integer
name
=
"stroke_width"
>2</
integer
>
<!-- names -->
<
string
name
=
"tick"
>tick</
string
>
<
string
name
=
"cross"
>cross</
string
>
<
string
name
=
"groupTickCross"
>groupTickCross</
string
>
<!-- drawing -->
<
color
name
=
"stroke_color"
>#999</
color
>
</
resources
>
- Теперь создайте новый каталог ресурсов Android . Щелкните правой кнопкой мыши папку res и выберите Android Resource Directory. Обязательно выберите тип ресурса в качестве аниматора .
Аниматоры могут изменять физические свойства объектов. Это означает, что если вы переместите представление в новое место, координаты касания будут отображены в новом месте без какого-либо другого вмешательства. - Теперь создайте новый файл cross_to_tick.xml в каталоге аниматора . В этом файле мы в основном определяем продолжительность и тип анимации для cross_to_tick.xml. Этот файл отвечает за преобразование крестика в галочку, когда пользователь нажимает на крестик.
cross_to_tick.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
objectAnimator
android:propertyName
=
"pathData"
android:valueFrom
=
"@string/path_cross"
android:valueTo
=
"@string/path_tick"
android:duration
=
"500"
android:interpolator
=
"@android:interpolator/fast_out_slow_in"
android:valueType
=
"pathType"
/>
- Теперь создайте новый файл tick_to_cross.xml в каталоге аниматора . В этом файле мы в основном определяем продолжительность и тип анимации для tick_to_cross.xml. Этот файл отвечает за преобразование галочки в крест, когда пользователь щелкает значок галочки.
tick_to_cross.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
objectAnimator
android:propertyName
=
"pathData"
android:valueFrom
=
"@string/path_tick"
android:valueTo
=
"@string/path_cross"
android:duration
=
"500"
android:interpolator
=
"@android:interpolator/fast_out_slow_in"
android:valueType
=
"pathType"
/>
- Теперь создайте новый файл rotate_cross_to_tick.xml в каталоге аниматора . В этом файле мы в основном определяем продолжительность и тип анимации для tick_to_cross.xml. Этот файл отвечает за поворот, когда пользователь нажимает крестик.
rotate_cross_to_tick.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
objectAnimator
android:propertyName
=
"rotation"
android:valueFrom
=
"-180"
android:valueTo
=
"0"
android:duration
=
"500"
android:interpolator
=
"@android:interpolator/fast_out_slow_in"
/>
- Теперь создайте новый файл rotate_tick_to_cross.xml в каталоге аниматора . В этом файле мы в основном определяем продолжительность и тип анимации для tick_to_cross.xml. Этот файл отвечает за ротацию, когда пользователь щелкает значок галочки.
rotate_cross_to_tick.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
objectAnimator
android:propertyName
=
"rotation"
android:valueFrom
=
"0"
android:valueTo
=
"180"
android:duration
=
"500"
android:interpolator
=
"@android:interpolator/fast_out_slow_in"
/>
В следующих двух шагах мы будем создавать AnimatedVectorDrawable как для cross_to_tick, так и для tick_to_cross.
- Теперь создайте новый файл avd_cross_to_tick.xml в каталоге drawable и следующий код.
avd_cross_to_tick.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
animated-vector
android:drawable
=
"@drawable/ic_cross"
>
<
target
android:name
=
"@string/cross"
android:animation
=
"@animator/cross_to_tick"
/>
<
target
android:name
=
"@string/groupTickCross"
android:animation
=
"@animator/rotate_cross_to_tick"
/>
</
animated-vector
>
- Теперь создайте новый файл avd_tick_to_cross.xml в каталоге drawable и следующий код.
avd_tick_to_cross.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
animated-vector
android:drawable
=
"@drawable/ic_tick"
>
<
target
android:name
=
"@string/tick"
android:animation
=
"@animator/tick_to_cross"
/>
<
target
android:name
=
"@string/groupTickCross"
android:animation
=
"@animator/rotate_tick_to_cross"
/>
</
animated-vector
>
- На этом этапе мы определим статический рисованный объект для векторной графики. Теперь создайте новый файл ic_tick.xml в вытяжке директории и следующий код.
ic_tick.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
android:width
=
"120dp"
android:height
=
"120dp"
android:viewportWidth
=
"@integer/viewport_width"
android:viewportHeight
=
"@integer/viewport_height"
>
<
group
android:name
=
"@string/groupTickCross"
android:pivotX
=
"@integer/viewport_center_x"
android:pivotY
=
"@integer/viewport_center_y"
>
<
path
android:name
=
"@string/tick"
android:pathData
=
"@string/path_tick"
android:strokeWidth
=
"@integer/stroke_width"
android:strokeLineCap
=
"square"
android:strokeColor
=
"@color/stroke_color"
/>
</
group
>
</
vector
>
- На этом этапе мы определим статический рисованный объект для векторной графики. Теперь создайте новый файл ic_cross.xml в вытяжке директории и следующий код.
ic_cross.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
android:width
=
"120dp"
android:height
=
"120dp"
android:viewportWidth
=
"@integer/viewport_width"
android:viewportHeight
=
"@integer/viewport_height"
>
<
group
android:name
=
"@string/groupTickCross"
android:pivotX
=
"@integer/viewport_center_x"
android:pivotY
=
"@integer/viewport_center_y"
>
<
path
android:name
=
"@string/cross"
android:pathData
=
"@string/path_cross"
android:strokeWidth
=
"@integer/stroke_width"
android:strokeLineCap
=
"square"
android:strokeColor
=
"@color/stroke_color"
/>
</
group
>
</
vector
>
- Теперь добавьте следующий код в файл activity_main.xml.
activity_main.xml
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
FrameLayout
android:layout_width
=
"match_parent"
android:layout_height
=
"match_parent"
android:onClick
=
"animate"
tools:context
=
".MainActivity"
>
<
ImageView
android:id
=
"@+id/tick_cross"
android:layout_width
=
"wrap_content"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"center"
android:src
=
"@drawable/ic_tick"
/>
</
FrameLayout
>
- Теперь добавьте следующий код в файл MainActivity.xml.
MainActivity.xml
package
org.geeksforgeeks.tickcross;
import
androidx.appcompat.app.AppCompatActivity;
import
android.graphics.drawable.AnimatedVectorDrawable;
import
android.os.Bundle;
import
android.view.View;
import
android.widget.ImageView;
public
class
MainActivity
extends
AppCompatActivity {
private
ImageView tickCross;
private
AnimatedVectorDrawable tickToCross;
private
AnimatedVectorDrawable crossToTick;
private
boolean
tick =
true
;
@Override
protected
void
onCreate(Bundle savedInstanceState)
{
super
.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tickCross = findViewById(R.id.tick_cross);
tickToCross = (AnimatedVectorDrawable)
getDrawable(
R.drawable.avd_tick_to_cross);
crossToTick = (AnimatedVectorDrawable)
getDrawable(
R.drawable.avd_cross_to_tick);
}
// This method help to animate our view.
public
void
animate(View view)
{
AnimatedVectorDrawable drawable
= tick
? tickToCross
: crossToTick;
tickCross.setImageDrawable(drawable);
drawable.start();
tick = !tick;
}
}
Выход:
Вниманию читателя! Не прекращайте учиться сейчас. Ознакомьтесь со всеми важными концепциями Java Foundation и коллекций с помощью курса "Основы Java и Java Collections" по приемлемой для студентов цене и будьте готовы к работе в отрасли. Чтобы завершить подготовку от изучения языка к DS Algo и многому другому, см. Полный курс подготовки к собеседованию .