Android studio kotlin animation

Android Animations in Kotlin

Animation is a method in which a collection of images are combined in a specific way and processed then they appear as moving images. Building animations make on-screen objects seem to be alive. Android has quite a few tools to help you create animations with relative ease. so in this article we will learn to create animations using Kotlin. below are some attributes which we are using while writing the code in xml.

Table of Attributes :

XML ATTRIBUTES	DESCRIPTION
android:duration	It is used to specify the duration of animation to run
android:fromAlpha	It is the starting alpha value for the animation, where 1.0 means fully opaque and 0.0 means fully transparent
android:toAlpha	It is the ending alpha value
android:id	Sets unique id of the view
android:fromYDelta	It is the change in Y coordinate to be applied at the start of the animation
android:toYDelta	It is the change in Y coordinate to be applied at the end of the animation
android:startOffset	Delay occur when an animation runs (in milliseconds), once start time is reached.
android:pivotX	It represents the X-axis coordinates to zoom from starting point.
android:pivotY	It represents the Y-axis coordinates to zoom from starting point.
android:fromXScale	Starting X size offset,
android:fromYScale	Starting Y size offset,
android:toXScale	Ending of X size offset
android:toYScale	Ending of Y size offset
android:fromDegrees	Starting angular position, in degrees.
android:toDegrees	Ending angular position, in degrees.
android:interpolator	An interpolator defines the rate of change of an animation

At first, we will create a new android application. Then, we will create some animations.
If you already created the project then ignore step 1.

Create New Project

1. Open Android Studio
2. Go to File => New => New Project.
3. Then, select Empty Activity and click on next
   • Write application name as DynamicEditTextKotlin
   • Select minimum SDK as you need, here we have selected 21 as minimum SDK
   • Choose language as Kotlin and click on finish button.

If you have followed above process correctly, you will get a newly created project successfully.
After creating project we will modify xml files. In xml file we will create one TextView where all the animations are performed and Eight Buttons for Eight different animations.

Источник

Русские Блоги

Android-анимация просто использует Kotlin

Введение

Анимация может обеспечить хорошее взаимодействие с пользователем. Как программист Android, вы должны освоить самые основные методы реализации анимации, включая прозрачность, смещение, поворот и масштабирование.

Анимация свойств

Атрибутная анимация — это структура анимации, запущенная Android 3.0, которая может реализовать все эффекты анимации просмотра и может выполнять функции, которых нет в анимации просмотра. Например, кнопка в верхнем левом углу использует анимацию просмотра, чтобы переместить ее в правый нижний угол. При нажатии на нее вы найдете оригинал Мониторинг щелчков больше не работает. Проще говоря, анимация вида изменяет только рисунок элемента управления, но не меняет значение его свойства. Если вы используете анимацию свойств для его перемещения, то исходный мониторинг все еще существует. Это настоящее движение. Атрибутная анимация настолько мощна

Два наиболее важных класса анимации свойств

принцип:
Анимация атрибута работает с любым объектом, и измененное имя атрибута должно иметь соответствующие методы getXXX и setXXX для объекта.

Давайте поговорим о них по очереди

ValueAnimator

• Тип значения, переданный в ofFloat (), — это float, что означает, что значение изменяется с 1f на 3f, 1f — начальное значение, 3f — конечное значение, а ofFloat () — параметр переменной, то есть может быть передано несколько значений. Процесс изменения, такой как: ofFloat (1f, 3f, 2f, 5f), здесь не прямое изменение с 1f на 3f сразу, а процесс, каждое значение процесса отличается,
• Возможно, здесь нет никаких изменений, но значение, заданное анимацией, изменилось.

ObjectAnimator

ObjectAnimator наследует ValueAnimator, поэтому вы можете использовать метод родительского класса для выполнения некоторых общих настроек анимации, разница заключается в создании объектов ObjectAnimator.

Прозрачная анимация

• view: объект анимации
• «alpha»: имя атрибута изменения значения, и объект представления должен иметь методы getAlpha () и serAlpha (),
• 1f, 0f, 1f: обозначает процесс изменения, непрозрачный -> полностью прозрачный -> непрозрачный

Анимация вращения

Например, поворот на 30 градусов:

Анимация смещения

Смещение оси X

• currentX: исходное значение координаты X представления
• Процесс анимации начинается с исходного положения, перемещается на 500 пикселей влево, возвращается в исходное положение, перемещается на 500 пикселей вправо и возвращается в исходное положение.

Смещение оси Y

Масштабирование анимации

Точно так же поддержите направление X и направление Y

Масштаб по оси X

Коллекция анимации

Использовать XML-анимацию

Создать папку аниматора в res
Создайте XML-файл анимации в аниматоре, например:

Звоните так в коде

Посмотреть анимацию

Анимация прозрачности

Анимация вращения

Анимация смещения

Масштабирование анимации

SVG анимация

Шаги по использованию

Создание статической графики SVG

Создайте XML-файл line_svg_vector.xml в папке ресурсов drawable

Создать XML-файл ресурса анимации

Каждый рисунок, созданный с помощью аниматора, должен иметь процесс анимации.
line_path_1.xml

Источник

Beginner’s guide to Lottie animations in Android using Kotlin

June 20, 2021

Designing animations can be tedious and technical for most developers. Lottie is an open-source animation library developed by Airbnb. It renders Adobe After Effects with BodyMovin.

BodyMovin is an Adobe After Effects plugin that exports animations to a JSON file. Lottie makes it easy to work with animations without downloading heavy animation files.

It helps developers to achieve a clean UI, therefore achieving a good user experience. Lottie is easy to use, and the files can be accessed on their website. Lottie is supported on mobile (Android, iOS, and React Native), web, and desktop applications.

Why use Lottie

• Simple UI elements: Lottie is light and the JSON files exported are small-sized.
• Dynamic scenes: you can tell a narrative across several shots, making it interactive.
• Alter animations as you like: the animations offered on Lottie can be altered from speed to color to progress hence meeting the developer’s need.
• Improved user experience.
• Pairs well across all mobile devices(in our case), even slow-performing ones, since it is lightweight.
• The animations also have a clear resolution.

Prerequisites

The reader should have:

• A basic knowledge of developing Android applications.
• A solid understanding of Kotlin programming language.
• Android Studio installed.

At the end of this tutorial, the reader should understand how to use and implement Lottie animations in Android applications.

Since the project is a bit wide, we shall only go through all the basics of Lottie animations on the app.

Step one: Create a new Android Studio project

Open Android Studio and select Create New Project — > Empty Activity and click Next. Fill in the required fields and click finish.

Step two: Choosing an animation file to use on your app

Head over to Lottie’s website and choose the animations of your choice. Most of the animations are free, while others one has to pay to use them.

Download the .json file. In our project, let us create a res/raw folder. Save the .json animations there. On your android project, create a res/raw folder. Right-click on res folder, select New -> Resource package and name it raw . Save the .json animations inside that folder.

Step three: Adding Lottie dependencies to the project

In the build. gradle (project level), add the Lottie Animation library. Make sure you check out the latest library version and sync the changes.

We shall also use other non-related libraries for this project which can be found here.

Step four: Designing the project’s layout

In this step, we will design our application’s layout. The layout will only have three basic elements:

• A Textview contains a heading.
• Buttons will be used for navigation.
• LottieAnimationView.

LottieAnimationView

The view is added just like any other element in the layout. Some of the attributes you will come across are like:

• lottie_loop — A boolean to ensure that the animation stays in a loop.
• lottie_speed — This determines the speed of the animation.
• lottie_autoplay — A boolean that starts the animation.
• lottie_url — The JSON URL from the website.

If you want your animations to rely on the internet, you can use the json URL from the animation on the official website. Saves you space on your app, but it will not work offline. The file is small, so downloading it is recommended.

• lottie_rawRes — This contains the bundled animation on your app.
• lottie_fileName — If you have added the JSON files to the assets folder, use this instead of lottie_rawRes .

You can also load the animation “programmatically” from the MainActivity.kt by:

This function will load the file and parse the animation.

Step five: Adding functionality to the application.

Since we use an adapter to display the animation’s content, write the following code in your adapter’s bind function:

• .setAnimation — This sets the raw animations to the image view.
• .playAnimation() — This plays the animation.

Next, in your Mainctivity.kt create a setupAnimation function and add the following:

• .speed — To set the speed at which the animation plays.
• .progress — To choose where the animation starts.
• .repeatMode — Restarts the animation.

Errors experienced

When using a class that holds the animation files like this:

You might come across a lint error in the adapter, on this line:

If you add the @SuppressLint annotation, the project will not run. The error does not necessarily affect the functionality of the app.

Output

Let us run the app.

You can check out the project on GitHub. In case of any clarification or any problem, do not hesitate to raise an issue in the same repository. Click here to download the app bundle.

References

Conclusion

Lottie Animations can be used all around the app, from splash screens, onboarding screens, empty state layouts, bottom navigations, and many other ways. Be sure to try out different ways to incorporate it into your app.

Peer Review Contributions by: Briana Nzivu

About the author

Carol is an undergraduate student, pursuing a degree in Mathematics and Computer Science. She is an Android Developer with a speciality in Kotlin. She is also a GitHub Campus Expert. Carol loves growing the developer community in her school and Kenya generally. She loves reading African literature, listening to music, gaming, travelling and calligraphy.

Want to learn more about the EngEd Program?

Discover Section’s community-generated pool of resources from the next generation of engineers.

Источник

Анимации в Android на базе Kotlin и RxJava

Привет, Хабр! В прошлом году на MBLT DEV выступал Ivan Škorić из PSPDFKit c докладом о создании анимаций в Android на базе Kotlin и библиотеки RxJava.

Приёмы из доклада я сейчас использую в работе над своим проектом, они здорово помогают. Под катом — расшифровка доклада и видеозапись, теперь этими приёмами можете воспользоваться и вы.

Анимация

В Android есть 4 класса, которые применяются как бы по умолчанию:

1. ValueAnimator — этот класс предоставляет простой механизм синхронизации для запуска анимаций, которые вычисляют анимированные значения и устанавливают их для View.
2. ObjectAnimator — это подкласс ValueAnimator, который позволяет поддерживать анимацию для свойств объекта.
3. AnimatorSet применяется для создания последовательности анимаций. Например, у вас есть последовательность из анимаций:

1. View выезжает слева на экране.
2. После завершения первой анимации мы хотим выполнить анимацию появления для другой View и т.д.

ViewPropertyAnimator — автоматически запускает и оптимизирует анимации для выбранного свойства View. В основном мы будем использовать именно его. Поэтому мы применим этот API-интерфейс, а затем поместим его в RxJava в рамках реактивного программирования.

ValueAnimator

Разберём фреймворк ValueAnimator. Он применяется для изменения значения. Вы задаёте диапазон значений через ValueAnimator.ofFloat для примитивного типа float от 0 до 100. Указываете значение длительности Duration и запускаете анимацию.
Рассмотрим на примере:

Здесь добавляем UpdateListener и при каждом обновлении будем двигать нашу View по горизонтали и менять её положение от 0 до 100, хотя это не очень хороший способ выполнения этой операции.

ObjectAnimator

Ещё один пример реализации анимации — ObjectAnimator:

Даём ему команду изменить у нужной View конкретный параметр до определённого значения и выставляем время методом setDuration. Суть в том, что в вашем классе должен находиться метод setTranslationX, потом система через рефлексию найдёт этот метод, а затем будет происходить анимирование View. Проблема в том, что здесь используется рефлексия.

AnimatorSet

Теперь рассмотрим класс AnimatorSet:

На самом деле, он не очень удобен в применении, особенно для большого количества объектов. Если вы хотите делать более сложные анимации — например устанавливать задержку между появлением анимаций, и чем больше анимаций вы хотите выполнять, тем сложнее всё это контролировать.

ViewPropertyAnimator

Последний класс — ViewPropertyAnimator. Он является одним из лучших классов для анимирования View. Это отличный API для введения последовательности запускаемых вами анимаций:

Запускаем метод ViewCompat.animate, который возвращает ViewPropertyAnimator, и для анимирования translationX задаём значение 50, для параметра translatonY — 100. Затем указываем длительность анимации, а также интерполятор. Интерполятор определяет последовательность, в которой будут появляться анимации. В данном примере используется интерполятор, который ускоряет начало анимации и добавляет замедление в конце. Также добавляем задержку для старта анимации. Кроме этого, у нас есть AnimatorListener. С его помощью можно подписываться на определённые события, которые возникают во время выполнения анимации. У данного интерфейса есть 4 метода: onAnimationStart, onAnimationCancel, onAnimationEnd, onAnimationRepeat.

Как правило, нас интересует только завершение анимации. В API Level 16
добавили withEndAction:

В ней можно определить интерфейс Runnable, и после завершения показа конкретной анимации выполнится действие.

Теперь несколько замечаний по поводу процесса создания анимаций в целом:

1. Метод start() не обязателен: как только вы вызываете метод animate(), вводится последовательность анимаций. Когда ViewPropertyAnimator будет настроен, система запустит анимацию сразу, как будет готова это сделать.
2. Только один класс ViewPropertyAnimator может анимировать только конкретный View. Поэтому если вы хотите выполнять несколько анимаций, например, вам хочется, чтобы что-то двигалось, и при этом увеличивалось в размерах, то нужно указать это в одном аниматоре.

Почему мы выбрали RxJava?

Начнём с простого примера. Предположим, мы создаем метод fadeIn:

Это достаточно примитивное решение, и чтобы применить его для своего проекта, вам нужно будет учесть некоторые нюансы.

Мы собираемся создать CompletableSubject, который будем использовать, чтобы дожидаться завершения анимаций, а затем при помощи метода onComplete отправлять сообщения подписчикам. Для последовательного запуска анимаций необходимо стартовать анимацию не сразу, а как только на неё кто-то подпишется. Таким образом можно последовательно запускать несколько анимации в реактивном стиле.

Рассмотрим саму анимацию. В ней передаём View, над которой будет совершаться анимация, а также указываем длительность анимации. И поскольку это анимация — появление, то мы должны указать прозрачность 1.

Попробуем использовать наш метод и создадим простую анимацию. Предположим, у нас на экране есть 4 кнопки, и мы хотим добавить для них анимацию появления длительностью 1 секунду:

В результате получается вот такой лаконичный код. С помощью оператора andThen можно запускать анимации последовательно. Когда мы подпишемся на него, он отправит событие doOnSubscribe к Completable, который стоит первым в очереди на исполнение. После его завершения он подпишется ко второму, третьему, и так по цепочке. Поэтому если на каком-то этапе появляется ошибка, то вся последовательность выдаёт ошибку. Нужно также указать значение alpha 0 до начало анимации, чтобы кнопки были невидимыми. И вот как это будет выглядеть:

Используя Kotlin, то мы можем использовать расширения:

Для класса View добавили функцию-расширение. В дальнейшем нет необходимости передавать в метод fadeIn аргумент View. Теперь можно внутри метода заменить все обращения к View на ключевое слово this. Это то, на что способен язык Kotlin.

Посмотрим, как изменился вызов этой функции в нашей цепочке анимаций:

Теперь код выглядит более понятным. В нём явно указано, что мы хотим применить к нужному отображению анимацию с определённой продолжительностью. При помощи оператора andThen создаём последовательную цепочку из анимаций ко второй, третьей кнопке и так далее.

Всегда указываем длительность анимаций, это значение одинаково для всех отображений — 1000 миллисекунд. На помощь снова приходит Kotlin. Мы можем сделать значение времени по умолчанию.

Если не указывать параметр duration, то время автоматически будет установлено как 1 секунда. Но если мы захотим для кнопки под номером 2 увеличить это время до 2 секунд, мы просто указываем это значение в методе:

Запуск двух анимаций

Мы смогли запустить последовательность из анимаций с помощью оператора andThen. Что делать, если понадобится запустить одновременно 2 анимации? Для этого в RxJava существует оператор mergeWith, который позволяет объединять элементы Completable таким образом, что они будут запускаться одновременно. Этот оператор запускает все элементы и заканчивает работу после того, как будет показан последний элемент. Если поменять andThen на mergeWith, то получим анимацию, в которой все кнопки появляются одновременно, но кнопка 2 будет появляться немного дольше остальных:

Теперь мы можем группировать анимации. Попробуем усложнить задачу: например, мы хотим, чтобы сначала одновременно появились кнопка 1 и кнопка 2, а затем — кнопка 3 и кнопка 4:

Объединяем первую и вторую кнопки оператором mergeWith, повторяем действие для третьей и четвертой, и запускаем эти группы последовательно с помощью оператора andThen. Теперь улучшим код, добавив метод fadeInTogether:

Он позволит запускать анимацию fadeIn для двух View одновременно. Как изменилась цепочка анимаций:

В итоге получится следующая анимация:

Рассмотрим более сложный пример. Предположим, нам нужно показывать анимацию с некоторой заданной задержкой. В этом поможет оператор interval:

Он будет генерировать значения каждые 100 миллисекунд. Каждая кнопка будет появляться спустя 100 миллисекунд. Далее указываем ещё один Observable, который будет эмитить кнопки. В данном случае у нас 4 кнопки. Воспользуемся оператором zip.

Перед нами потоки событий:

Первый соответствует timeObservable. Этот Observable будет генерировать цифры с определённой периодичностью. Предположим, она будет составлять 100 миллисекунд.

Второй Observable будет генерировать view. Оператор zip ждёт, пока первый объект появится в первом потоке, и соединяет его с первым объектом из второго потока. Несмотря на то, что все эти 4 объекта во втором потоке появятся сразу, он будет ждать, пока объекты начнут появляться на первом потоке. Таким образом, первый объект из первого потока будет соединяться с первым объектом из второго в виде нашего view, а 100 миллисекунд спустя, когда появится новый объект, оператор объединит его со вторым объектом. Поэтому view будут появляться с опеределённой задержкой.

Разберёмся с BiFinction в RxJava. Эта функция получает на вход два объекта, делает какие-то операции над ними и возвращает третий объект. Мы хотим взять объекты time и view и получить Disposable за счёт того, что мы вызываем анимацию fadeIn и подписываемся subscribe. Значение time нам не важно. В итоге получаем вот такую анимацию:

VanGogh

Расскажу про проект, который Иван начал разрабатывать для MBLT DEV 2017.

В библиотеке, которую разработал Иван, представлены различные оболочки для анимаций. Мы уже рассматривали это выше. В ней также содержатся готовые анимации, которые можно использовать. Вы получаете обобщённый набор инструментов для создания собственных анимаций. Эта библиотека предоставит вам более мощные компоненты для реактивного программирования.

Рассмотрим библиотеку на примере:

Предположим, вы хотите создать появляющуюся анимацию, но в этот раз вместо объекта Completable появляется AnimationCompletable. Данный класс наследуется от Completable, так что теперь появляется больше функций. Одной важной особенностью предыдущего кода было то, что отменять анимации было нельзя. Теперь можно создать объект AnimationCompletable, который заставляет анимацию остановиться, как только мы отпишемся от неё.

Создаём появляющуюся анимацию с помощью AnimationBuilder — один из классов библиотеки. Указываем, к какой View будет применена анимация. По сути этот класс копирует поведение ViewPropertyAnimator, но с разницей в том, что на выходе получаем поток.

Далее выставляем alpha 1f и длительность 2 секунды. Затем cобираем анимацию. Как только вызываем оператор build, появляется анимация. Присваиваем анимации свойство не изменяемого объекта, поэтому он сохранит эти характеристики для её запуска. Но сама анимация не запустится.

Вызываем toCompletable, который создаст AnimationCompletable. Обернёт параметры этой анимации в своеобразную оболочку для реактивного программирования, и как только вы подпишетесь на него — запустит анимацию. Если отключить его до завершения процесса, анимация закончится. Также теперь можно добавить функцию обратного вызова. Можно прописать операторы doOnAnimationReady, doOnAnimationStart, doOnAnimationEnd и тому подобное:

В этом примере мы показали, как удобно использовать AnimationBuilder, и изменили состояние нашей View перед запуском анимации.

Видеозапись доклада

Мы рассмотрели один из вариантов создания, компоновки и настройки анимации с помощью Kotlin и RxJava. Вот ссылка на проект, в котором описаны базовые анимации и примеры для них, а также основные оболочки для работы с анимацией.

Помимо расшифровки делюсь видеозаписью доклада:

Спикеры MBLT DEV 2018

До MBLT DEV 2018 осталось чуть больше двух месяцев. У нас выступят:

• Laura Morinigo, Google Developer Expert
• Kaushik Gopal, автор подкаста Fragmented
• Артём Рудой, Badoo
• Дина Сидорова, Google, и другие.

Уже завтра стоимость билета изменится. Регистрируйся сегодня.

Источник