Android property animation example

Android Property Animation — The ValueAnimator

ValueAnimator provides a timing engine for running animation which calculates the animated values and set them on the target objects. By ValueAnimator you can animate a view width, height, update its x and y coordinates or even can change its background.

It has an interface ValueAnimator.AnimatorUpdateListener which is used to receive callbacks on every animation frame.

In above example, I’m updating the width of a view from 10 to 100. In onAnimationUpdate() method the animated value is used to update the width of that view. On calling requestLayout() the framework will redraw the view according to updated width value (this method is needed to be called on every change of value otherwise the view will not be redrawn according to updated value and effect would not be seen).

Besides this simple example, let’s have a look at a little complex one. In this example, I’m going to change x and y coordinates and size of the button on click of a floating action button. And result is shown below —

Using value animator

Animating a single value with ValueAnimator is straightforward. ValueAnimator provides the static method like ofInt and ofFloat to animate between integer and floating point values.

In the above code startPositionX & startPositionY are the center coordinates of floating action button and pentagonVertices[position].x, pentagonVertices[position].y are destination coordinates which are calculated by —

So what actually happening is the valueAnimator is animating from startPositionX and startPositionY to the pentagonVertices[position].x and pentagonVertices[position].x. And in onAnimationUpdate() we are setting these animated value to x and y of a button.

Same thing is happening with the size of button —

It is obvious that we need to update both the x and y coordinates. The naive approach is to create two animations and play them simultaneously, but it is not efficient. We can use PropertyValuesHolder to combine multiple values which I’ll demonstrate in my next post.

By default, ValueAnimator uses non-linear time interpolation, via the AccelerateDeccelerateInterpolator class, which accelerates into and decelerates out of an animation. This behavior can be changed by calling setInterpolator(Time Interpolator).

Thanks for reading! Be sure to click ❤ below to recommend this article if you found it helpful. It means a lot to me.

For more about programming, follow me and Mindorks , so you’ll get notified when I write new posts.

Источник

Android SDK: Creating a Simple Property Animation

With Android you can include various types of animation in your apps. In this tutorial we will create a basic property animation using Android’s Object Animator and Value Animator classes. The result will be simple but the techniques involved will apply in more complex animated effects. We will create an animation in which a steering wheel turns and the background scene moves accordingly.

With property animation, you have a few more options than with View animation, for example you can animate UI items other than Views and can animate more properties. Property animation can also have more consistent results in some cases, as unlike View animation, it alters the UI objects themselves, rather than just drawing them in particular ways. The downside to these advantages is that property animation is a little more complex — but it’s still accessible for beginners.

Step 1: Start an Android Project

Start or open an Android project in Eclipse. You will need a blank Activity and a layout for it. You will also need to choose a minimum SDK of 11 in order to use the methods in this tutorial, so make sure your project Manifest indicates an appropriate level as in the following excerpt:

In the tutorial and source code, the app is named «PropertyAnimatedApp», the Activity is «PropertyAnimatedActivity» and the layout is «activity_property_animated.xml». You can choose your own names as long as you make changes to the below code where necessary.

Step 2: Add Images to the Project

We will be creating a few drawable files in XML for the animation, but will also be using a couple of PNG images. We will use the cloud and steering wheel images below within Image Views in the app layout. Download them from the copies displayed here or copy them from the source folder download. Make sure you copy them into each drawables folder in your app — you may wish to make adjustments to any of the drawable files we use if you plan on targeting particular screen sizes.

Step 3: Create the Drawables

Now let’s define the XML drawables for the remaining animation elements. In your application drawables folder(s), create the first new file by selecting the folder and choosing «File», «New», «File». Enter «sun.xml» as the file name. In the new file, enter the following code to define a sun shape:

The drawable is an oval shape, with a radial gradient fill and specified size. When you finish entering code for each of the drawables files, save them and copy them into each drawables folder your app is using.

Create another new file in your app’s drawables resources, this time naming it «ground.xml». Enter the following shape drawable:

The ground will be represented by a green rectangle.

Create another drawables file, naming it «window.xml» and entering the following shape:

This shape will represent a window frame around the edge of the screen, with a transparent fill so that only the stroke appears.

You can see each of the shapes as they will appear at the start of the animation below:

Step 4: Design the Layout

Now we can include our drawables in the layout. We will be using Image Views, with which we need to supply a content description String describing the image in each case. In preparation for this, open your app’s «res/values/strings.xml» file and add the following values:

We need a String for each of the images/drawables we will be using.

Now open your layout file. Replace the contents with the following Relative Layout:

Alter the context attribute if your Activity class has a different name. Notice that we apply a background color to the layout — we will be animating this later, which is why we also include an ID attribute for referring to the layout in Java.

First inside the layout, add an Image View to display the sun shape we created:

We include an ID attribute so that we can refer to the View when animating it. We also refer to one of the content description Strings we created and list the name of the drawable file as source src attribute. We also position the View within the layout.

Next add two more Image Views for the clouds:

These two are identical apart from the the positioning and ID attributes.

Next add the ground:

The ground is aligned to the bottom of the parent View. Notice that we also include padding on the bottom — this is to accommodate the window frame we will add next:

The window shape uses a 40dp wide stroke, which is why we added 40dp of padding on the ground shape.

Each Image View added will be displayed on top of previous items in terms of the z-index so we add the steering wheel last:

The layout will initially appear as follows:

Step 5: Define the Wheel Turning Animation

Let’s get stuck into some animation now. In your app’s «res» folder, create a new sub-folder by selecting «res» and choosing «File», «New», «Folder». Enter «animator» as the folder name. We will be adding two XML files to this folder, defining the wheel turning and sun moving animations. Start by creating a new file in «animator» and naming it «wheel_spin.xml».

Begin by adding a set element:

Inside the set we will define the details of the animation. In the opening set tag we specify an interpolator, in this case the accelerate decelarate interpolator so that the animation will speed up at the start and slow down at the end. We also specify ordering, which will not actually have an effect in this case as we are only going to define one animator within the set. If you have more than one, you can use this attribute to carry out the animations at the same time or sequentially.

Inside the set, include an animator to make the wheel turn:

This is an Object Animator, which first defines a duration and property to animate over this period. The valueTo attribute indicates 180 degrees, which is how much the wheel will turn over the duration. When the animation completes, we set it to reverse and then repeat continuously.

Step 6: Apply the Wheel Turning Animation

Now let’s turn to the Activity class. First add the following import statements at the top:

Inside the onCreate method, after the existing code, first get a reference to the wheel shape using the ID we gave its Image View:

Now create an Animator Set to load the animation we defined:

Now set the View item as target for the animation:

Start the animation:

You can run the app if you wish at this stage to see the wheel turning back and forth. The remaining animations will add to the effect, creating the impression that we are moving according to the steering, with the world outside the window moving back and forth at the same time.

Step 7: Define the Sun Moving Animation

Let’s make the sun move to create the impression that we are moving as a result of the steering. Create a new file in your «animator» folder, this time named «sun_swing.xml». Enter the following code:

This time the Object Animator animates the x property, moving the object to the left, as the steering wheel turns us to the right. The duration and repeat properties are the same as the wheel turn animation, as this effect is intended to coincide with it.

Step 8: Apply the Sun Moving Animation

Back in the Activity class onCreate method, apply this new animation to the sun View using the same technique as before:

Run the app again if you wish to see the sun appearing to move out of view and back.

Step 9: Implement a Sky Darkening Animation

So far we have implemented a couple of animations by defining animation resources. Let’s now explore creating animations in Java from the Activity class. We will make the sky go slightly darker when the sun moves out of view. Still inside onCreate, instantiate a Value Animator:

We create the Value Animator by calling the ofInt method of the Object Animator class, as we are dealing with integer values for the colors. We pass the ID of the layout element which has the background color applied to it, also specifying «backgroundColor» as the property we wish to animate. Finally, we specify colors to animate from and to, which are lighter and darker shades of blue.

Set the duration and repeat properties to match the existing animations:

Now set an evaluator to instruct the animator how to evaluate the passed color values:

Start the animation:

You can run the app to see the effect.

Step 10: Implement Two Cloud Moving Animations

Let’s finish this animation off by also moving the two clouds. Still in onCreate, instantiate an Object Animator for the first cloud View, specifying the x property and a value to move it to:

Set the duration and repeat properties as before, then start the animation:

Do the same for the second cloud, passing a slightly different value to move it along the x axis:

The difference in x value with an animation over the same duration will create the impression that the clouds are moving at slightly different speeds, one being closer than the other.

Conclusion

That’s the app complete — run it and experiment with the various properties involved to see the effects. In this tutorial we have created a simple property animation. In the app we have built, the animation begins at launch and runs continuously. In your own apps you may of course wish to run animations on user interaction with elements such as buttons. The other two main types of animation on Android are tween and frame, both of which are View animations. Each type is suited to different needs, depending on both the image resources you are working with and the animation details.

Источник

Анимации в Android по полочкам (Часть 1. Базовые анимации)

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

Сегодня мы поговорим об инструментах для создания анимации. К сожалению, так получилось, что в Android достаточно много способов что либо анимировать, и по началу в них очень легко запутаться. Я постараюсь привести максимально общую классификацию и оставлю ссылки исключительно на документацию, т.к. туториалов можно найти предостаточно. Надеюсь эта статья поможет уложить в голове всё по полочками и, при необходимости создать анимацию, выбрать наиболее подходящий способ.

Часть 1. Базовые анимации
Часть 2. Комплексные анимации
Часть 3. «Низкоуровневые» анимации

Часть 1. Базовые анимации

1. Кадр за кадром

Предполагаю, что первая анимация в мире создавалась именно так, и в Android до сих пор доступна эта возможность.

Всё что нужно сделать это создать xml со ссылками на каждый кадр:

И запустить анимацию (Здесь и далее все примеры будут приведены на Kotlin):

Сложные по графике анимации, небольших размеров и подготовленные во внешнем редакторе.

Возможность достичь любой сложности эффектов

Большое потребление ресурсов и, как следствие, довольно затратный импорт в приложение с возможностью получить OutOfMemory. Если по каким-то причинам вам нужно показывать большое количество кадров, то придётся писать свою реализацию с постепенной подгрузкой изображений в память. Но если так пришлось делать, возможно проще прибегнуть к видео?

2. Анимация свойств объекта (aka Property Animator)

Если нам нужно всего-лишь передвинуть что-нибудь на несколько пикселей в сторону или изменить прозрачность, чтобы не плодить миллион очень похожих друг на друга кадров на помощь приходит Animator. Фактически с помощью него можно анимировать любое свойство любых объектов.

Базовый абстрактный класс называется Animator, у него есть несколько наследников, нам важны:

ValueAnimator — позволяет анимировать любое свойство
ObjectAnimator — наследуется от ValueAnimator и имеет упрощённый интерфейс для анимации свойств View.
ViewPropertyAnimator — Предоставляет ещё один удобный интерфейс для анимации View. Не унаследован от Animator и используется в методе View::animate()

Анимацию выше можно описать как в коде:

так и в XML ( animator/open_animator.xml ):

Так-же есть возможность описать нашу анимацию переходов между стейтами View, что соответсвенно, с лёгкостью позволит создать анимированные переходы между стейтами у любых View. Описанная в XML анимация будет автоматически запущена при смене состояния View.
animator/state_animator.xml

Анимация View объектов и любых их параметров
Анимация любых других параметров

В некоторой степени требовательны к ресурсам

3. Анимация View (aka View animation)

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

Анимацию можно запустить как в коде:

так и в XML (обратите внимание, что синтаксис отличается от xml для Animator):
anim/open_animation.xml

Там, где API не позволяет использовать Animator.

Устаревший API, меняет только представление вида.

4. Анимация векторных ресурсов (aka AnimatedVectorDrawable)

На мой взгляд самая интересная часть в Android анимациях. Можно относительно малыми силами добиваться сложных и интересных эффектов. Трансформации иконок в Android сделаны именно так.

VectorDrawable состоит из Path и Group элементов. Создание анимации сводится к тому, чтобы прописать движение к этим элементам. Андроид на картинке выше, в коде будет выглядеть так:

Чтобы не писать XML вручную можно воспользоваться онлайн инструментом.

Начиная с API 25 векторные анимации отрисовываются в RenderThread, поэтому, даже если мы загрузим чем-то наш UI Thread (но мы же никогда так не делаем, да?), анимации всё равно будут проигрываться плавно.

Иконки
Анимационные эффекты

Нет возможности вручную управлять точкой анимации во времени (т.е. фактически отсутствует какой-либо метод, вроде setCurrentTime)

Источник