The animation in android will give a high-quality feel to the UI and nice look to your Application. Animations can be performed both by XML and Programmatically. In this post, I will describe some basics about XMl as well Programmatically Animations.

Android also support Frame Animation to show animation frame by frame.

So, Let’s Start:-

1.First, I will describe playing Animations using XML.

Lets, talk about  some basic attributes of the XML Animation.

android: duration – Total duration in milliseconds for which animation will be played.

android:startOffset – It is waiting time after which animation will start.

android: interpolator – It is the rate of change in animation. This allows basic animation effects(alpha, scale, rotate) to be accelerated.decelerated etc.

android:fillAfter – If this is set to true animation transformation effect applies after an animation completes.if set to false view changes to the previous state after animation.

android:repeatMode – this is used to repeat the animation.

android:repeatCount – this is the repeat count till which the animation will repeat.

Let’s talk about some simple animations like

1. Fade in
2. Fade out
3. Left Animation
4. Right Animation

Fade Animations are done by changing <alpha>  tag values.

Fade in

In this animation change alpha values from 0 to 1.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
<alpha
    android:duration="1000"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0"
    />
</set>

 Fade out

In this animation change alpha values from 1 to 0.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:fillAfter="true">
<alpha
    android:duration="1000"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="0.0"
    />
</set>

Slide Animation from left to right.

for this animation, I will change x values from -100 to 0.

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate 
             android:fromXDelta="-100%"
             android:toXDelta="0%"
             android:fromYDelta="0%" 
             android:toYDelta="0%"
             android:duration="1000"/>
</set>

Slide Animation from right to left.

for this animation, I will change x values from 0 to 100.

<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
     android:fromXDelta="0%" 
     android:toXDelta="100%"
     android:fromYDelta="0%"
     android:toYDelta="0%"
     android:duration="1000" />
</set>

For Slide up and Slide down animations,  change y values accordingly.

Use these XML to perform Animation like this

Animation animIn, animOut;

// load animations
animIn = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_in);
animOut = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fade_out);
//set Animation Listener
 animIn.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                // code here what u want to do when animation starts
            }
            @Override
            public void onAnimationEnd(Animation animation) {
//code here what u want to do when animation stops
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
//code here what u want to do when animation repeats
            }
        });

2. Playing Animations Programmatically.

TranslateAnimation animation = new TranslateAnimation(start_x, start_y, end_x, end_y);
      animation.setDuration(1000); // duartion in ms
      animation.setFillAfter(false);
      button.startAnimation(animation);

 Another way playing the animation.

button.setTranslationX(float value);
button.setTranslationY(float value);

Playing Animations using ObjectAnimator.

ObjectAnimator.ofFloat(view here like button,layout,image, "alpha",0f,1f).setDuration(100)
                    .start();

ObjectAnimator alpha = ObjectAnimator.ofFloat(this, View.ALPHA, 0.25f, 1f);
       alpha.setDuration(duration);
       alpha.start();

ObjectAnimator xAnim = ObjectAnimator.ofFloat(ball, "x",
                fromx,tox).setDuration(1000).start();

ObjectAnimator yAnim = ObjectAnimator.ofFloat(view, "y",
                fromy,toy).setDuration(1000).start();

Note: there are several other which can be used to play the animation.

 

 

 

Related