[Android] Beginner Tutorials – Lesson 20. Animation

Translated by Taras Leskiv (http://android-by-example.blogspot.com/)

Before starting serious topics I decided to explore one more interesting and, to my mind, not very complicated topic. I will only look through the basics not exploring the details. The topic is – animation. We will learn how to do the following transformations with common View-components:

– change transparency
– change size
– move
– rotate

Let’s create a project:

Project name: P0201_SimpleAnimation
Build Target: Android 2.3.3
Application name: SimpleAnimation
Package name: ru.startandroid.develop.p0201simpleanimation
Create Activity: MainActivity

Transformations are configured in XML files, after this they are read in the program code and are assigned to View-elements. I will not copy and paste help and look everything through, I will go straight to practice.

There is a res folder in our project. We have to create anim folder inside. You can do the following like this: right click res folder, in the menu choose New -> Folder. We have to create files inside anim folder. This is done the same way: right click anim folder and choose New -> File. We will configure animation in these files;

Create the following files inside res/anim folder:

File name: myalpha.xml
Contents:

Transformation description: transparency is changed from 0 to 1 during three seconds.

File name: myscale.xml
Contents:

Transformation description: changing size from 0.1 of original width and height to 1. Point, relatively to which scaling will occur is right in the center of the object (pivotX, pivotY). Duration – 3 seconds.

File name: mytrans.xml
Contents:

Transformation description: moving from -150 relatively to the current position by X axis and -200 by Y axis to the current position (0,0). Duration – seconds.

File name: myrotate.xml
Contents:

Transformation description: rotation relatively to the left top corner (as pivotX and pivotY) are not specified by 360 degrees during 3 seconds.

File name: mycombo.xml
Contents:

Transformation description: simultaneous scaling and rotating during 3 seconds. Note that for combining transformations <set> tag is used.

So we have created 5 animation files.

20110928_L0020_L_files

Now we can apply them to View-components.

Open main.xml and create the screen:

In the center of the screen TextView is located. We will apply transformations to it. Let’s create a context menu for our TextView, add menu items which correspond to our sets. We will run the animation when context menu item is clicked.

MainActivity.java:

Animation is read from xml-file by AnimationUtils.loadAnimation method and it returns an object of type Animation. We use this object in startAnimation method, which starts the animation.

Save everything and run the application.  Invoke context menu for the TextView and test animations

20110928_L0020_L_menu

I didn’t use all the facilities and parameters. There is, for example, android:startOffset parameter – it specifies the delay on the animation start. That is if you specify android:startOffset=”1000”, the animation will start after one second. It is convenient when you are making a transformation set (<set>) and you need transformations to occur in a specific order, not simultaneously. One more useful parameter is android:repreatCount – it is a number of repeats.

I recommend you to play with parameters in XML and see what happens.

Comments

comments

Share this Post :

No comments yet.

Please Post Your Comments & Reviews

Your email address will not be published. Required fields are marked *