How to move a view using Property Animation?

by / Wednesday, 04 September 2013 / Published in Android

The property animation system is a robust framework that allows user to animate almost anything. User can define an animation to change any object property over time, regardless of whether it draws to the screen or not. A property animation changes a property’s (a field in an object) value over a specified length of time. To animate something, user have to specify the object property that he/she want to animate, such as an object’s position on the screen, how long he/she want to animate it for, and what values he/she want to animate between.

In this Example we declare 8 buttons in xml. we randomly set the textvalue  of the buttons from 1 to 9  and move it from top to bottom of the screen repeatedly changing the value of co-ordinates.

The property animation system lets you define the following characteristics of an animation:

  • Duration: User can specify the duration of an animation. The default length is 300 ms.
  • Time interpolation: User can specify how the values for the property are calculated as a function of the animation’s current elapsed time.
  • Repeat count and behavior: User can specify whether or not to have an animation repeat when it reaches the end of a duration and how many times to repeat the animation. User can also specify whether he/she want the animation to play back in reverse. Setting it to reverse plays the animation forwards then backwards repeatedly, until the number of repeats is reached.
  • Animator sets: User can group animations into logical sets that play together or sequentially or after specified delays.
  • Frame refresh delay: User can specify how often to refresh frames of his/her animation. The default is set to refresh every 10 ms, but the speed in which your application can refresh frames is ultimately dependent on how busy the system is overall and how fast the system can service the underlying timer.

To set the animation property an xml must be defined for every view in res/anim folder. For example we give the code for button1 .Like this other seven buttons property can be set in the same folder with different xml.

Code in res/anim/animation1.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator">
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="50"
android:toXDelta="50"
android:fromYDelta="-100"
android:toYDelta="700"
android:duration="5500"
android:repeatCount="infinite"
android:zAdjustment="normal" />
</set>

 

Code in main.xml:

<FrameLayout  xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<Button
android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn3"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn4"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn5"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn6"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn7"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<Button
android:id="@+id/btn8"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
</FrameLayout>

Code in Activity:

private Button b1,b2,b3,b4,b5,b6,b7,b8;
int repeatCount=3;
ArrayList<Integer> alNumber=new ArrayList<Integer>();
Animation animation1;
Animation animation2;
Animation animation3;
Animation animation4;
Animation animation5;
Animation animation6;
Animation animation7;
Animation animation8;

animation1 =AnimationUtils.loadAnimation(this, R.anim.animation1);
animation2=AnimationUtils.loadAnimation(this, R.anim.animation2);
animation3= AnimationUtils.loadAnimation(this, R.anim.animation3);
animation4=AnimationUtils.loadAnimation(this, R.anim.animation4);
animation5=AnimationUtils.loadAnimation(this, R.anim.animation5);
animation6=AnimationUtils.loadAnimation(this, R.anim.animation6);
animation7=AnimationUtils.loadAnimation(this, R.anim.animation7);
animation8=AnimationUtils.loadAnimation(this, R.anim.animation8);

b1= (Button)findViewById(R.id.btn1);
b2= (Button)findViewById(R.id.btn2);
b3= (Button)findViewById(R.id.btn3);
b4= (Button)findViewById(R.id.btn4);
b5= (Button)findViewById(R.id.btn5);
b6=(Button)findViewById(R.id.btn6);
b7= (Button)findViewById(R.id.btn7);
b8=(Button)findViewById(R.id.btn8);

for(int i=0;i<9;i++)
{
alNumber.add(getRandomNumber());
Collections.shuffle(alNumber);
}
b1.setText(alNumber.get(0)+"");
b2.setText(alNumber.get(1)+"");
b3.setText(alNumber.get(2)+"");
b4.setText(alNumber.get(3)+"");
b5.setText(alNumber.get(4)+"");
b6.setText(alNumber.get(5)+"");
b7.setText(alNumber.get(6)+"");
b8.setText(alNumber.get(7)+"");

//Animation is set
b1.setAnimation(animation1);
b2.setAnimation(animation2);
b3.setAnimation(animation3);
b4.setAnimation(animation4);
b5.setAnimation(animation5);
b6.setAnimation(animation6);
b7.setAnimation(animation7);
b8.setAnimation(animation8);
}

public int getRandomNumber()
{
Random rd=new Random();
return rd.nextInt(9);

}

TOP