Как сделать чек / галочку и кросс-анимацию в Android

Опубликовано: 5 Января, 2022

Класс 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
    xmlns:android = " http://schemas.android.com/apk/res/android "
    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
    xmlns:android = " http://schemas.android.com/apk/res/android "
    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
    xmlns:android = " http://schemas.android.com/apk/res/android "
    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
    xmlns:android = " http://schemas.android.com/apk/res/android "
    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
    xmlns:android = " http://schemas.android.com/apk/res/android "
    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
    xmlns:android = " http://schemas.android.com/apk/res/android "
    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" ?>
 < vector xmlns:android = " http://schemas.android.com/apk/res/android "
        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" ?>
 < vector xmlns:android = " http://schemas.android.com/apk/res/android "
        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
    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: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 и многому другому, см. Полный курс подготовки к собеседованию .

Android Java Как сделать

Как сделать чек / галочку и кросс-анимацию в Android

tick_cross.xml

cross_to_tick.xml

tick_to_cross.xml

rotate_cross_to_tick.xml

rotate_cross_to_tick.xml

avd_cross_to_tick.xml

avd_tick_to_cross.xml

ic_tick.xml

ic_cross.xml

activity_main.xml

MainActivity.xml

РЕКОМЕНДУЕМЫЕ СТАТЬИ