View Animation and Property Animation in Android

Megha Vaishy
3 min readDec 30, 2021

Android framework provides basic animations via following two ways:

  1. View Animation
  2. Property Animation

View Animation:

View animation alters views properties such as position, size, rotation and transparency and provides basic animations on views

//Tween animation via xml
Animation animation = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.myanimation);

//Tween animaion through AlphaAnimation object. animation = new AlphaAnimation(1,0); animation.setDuration(2000);
Start Animation:
view.startAnimation(mAnimation);

Deprecated since property animations were introduced in Android 3.0 (API level 11)

Limitations of View Animation are:

  1. It only works on a View.
  2. you can only animate limited aspects of a view.
  3. it only changes where the view is drawn on the screen but it does not move the view itself.

For More Detail on View Animation please refer to the below link: https://developer.android.com/guide/topics/graphics/prop-animation

Property Animation:

They are used to alter the property of objects (Views or non-view objects).

Android Framework provides the following classes for property animation

  1. ViewAnimator: Simple interface for animating view properties. If Need is to animate just one view and don’t want to repeat it, just use ViewPropertyAnimator
ViewCompat.animate(textView)
.translationX(50f)
.translationY(100f)
.setDuration(1000)
.setInterpolator(AccelerateDecelerateInterpolator())
.setStartDelay(50)
.setListener(object : Animator.AnimatorListener {
override fun onAnimationRepeat(animation: Animator) {}
override fun onAnimationEnd(animation: Animator) {}
override fun onAnimationCancel(animation: Animator) {}
override fun onAnimationStart(animation: Animator) {}
})

In API 16 introduces withEndAction and withStartAction:

.withEndAction({ //API 16+
//do something here where animation ends
})

Define Runnable and something will run when this animation is finished.

For example, the following code animates a view to x=200 and then back to 0.

// End Action after animation ends   
Runnable endAction = new Runnable() {
public void run() {
view.animate().x(0);
}
};
view.animate().x(200).withEndAction(endAction);
// start action before animation starts
view.animate().translationX(100).
withStartAction(new Runnable(){
public void run(){
viewer.setTranslationX(100-myView.getWidth());
// do something } });

The action is only run if the animation ends normally; if the ViewPropertyAnimator is canceled during that animation, the runnable will not run.

More details on ViewPropertyAnimator Please refer below link: https://developer.android.com/reference/androidx/core/view/ViewPropertyAnimatorCompat

2. ObjectAnimator:

If you only want to animate one view and one animation, but you want it to repeat, use ObjectAnimatorFor Using Object Animator just specify the name of the property you want to animate. Property names can be like “alpha”, “scaleX”, “left” (left margin that is) etc. Its a subclass of Valueanimator

ObjectAnimator.ofFloat(txt_animate, 
View.ROTATION_X, 0f, 3600f)
.apply {
duration = 5000
interpolator = AccelerateDecelerateInterpolator()//
repeatCount = INFINITE
repeatMode
= REVERSE
start()
}

mAnimator = ObjectAnimator.ofInt(view, "left", 100,
((mSize.x)/2) - (int) getResources().getDimension(R.dimen.dp_35))
.setDuration(2000);
setInterpolator();
mAnimator.start();
}
// With object animator, it call setAlpha automatically when the value is calculated.This makes animating any object much easier, as you no longer need to implement the ValueAnimator.AnimatorUpdateListener, because the animated property updates automatically.
FadeIn Animation:
ObjectAnimator animator = ObjectAnimator.ofFloat(mImageView, "alpha", 1f, 0f);
animator.setDuration(600);
animator.setRepeatCount(1); animator.setRepeatMode(ValueAnimator.REVERSE);
animator.start();

3. ValueAnimator:

To set up ValueAnimator specify the start and end values along with the duration of the animation. ValueAnimator does not update the view automatically, hence need to add ValueAnimator.AnimatorUpdateListener on value animator in which fetches the current animation value by calling the method getAnimatedValue(). Within the listener, you set whichever attribute you want to animate to the value returned by getAnimatedValue(). Finally, call your views requestLayout() method to redraw the view with updated values and you can observe the animation.

// With value animator, it does not update the value automatically    // It is suitable for object without a set<PropertyName> method    // The example here is for demonstration only    
ValueAnimator animator = ValueAnimator.ofFloat(1f, 0f); animator.setDuration(600);
animator.setRepeatCount(1); animator.setRepeatMode(ValueAnimator.REVERSE);
// We must explicitly listen to update event and set the value animator.removeAllUpdateListeners(); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation)
{
float alpha = (float)
animation.getAnimatedValue();
mImageView.setAlpha(alpha);
}
});
animator.start();

--

--