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

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

Класс AnimatedVectorDrawable был представлен в API 21 и используется для красивой и простой анимации векторных чертежей. Используя AnimatedVectorDrawable, можно:

  • Поворот, масштабирование, преобразование векторных чертежей
  • Анимируйте VectorDrawable, например цвет заливки и т. Д.
  • Нарисуйте пути и сделайте морфинг пути

Элемент AnimatedVectorDrawable имеет атрибут VectorDrawable и один или несколько целевых элементов. Целевой элемент может указывать свою цель с помощью атрибута android: name и связывать цель с надлежащим ObjectAnimator или AnimatorSet с помощью атрибута android: animation.

Подход к рисованию анимации Tick Cross:

  1. Создайте новый файл 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 >

  2. Теперь создайте новый каталог ресурсов Android . Щелкните правой кнопкой мыши папку res и выберите Android Resource Directory. Обязательно выберите тип ресурса в качестве аниматора .
    Аниматоры могут изменять физические свойства объектов. Это означает, что если вы переместите представление в новое место, координаты касания будут отображены в новом месте без какого-либо другого вмешательства.
  3. Теперь создайте новый файл 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" />

  4. Теперь создайте новый файл 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" />

  5. Теперь создайте новый файл 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" />

  6. Теперь создайте новый файл 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.

  7. Теперь создайте новый файл 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 >

  8. Теперь создайте новый файл 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 >

  9. На этом этапе мы определим статический рисованный объект для векторной графики. Теперь создайте новый файл 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 >

  10. На этом этапе мы определим статический рисованный объект для векторной графики. Теперь создайте новый файл 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 >

  11. Теперь добавьте следующий код в файл 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 >

  12. Теперь добавьте следующий код в файл 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 и многому другому, см. Полный курс подготовки к собеседованию .