A beginners guide to implement Android Animations — Part 1 (2 part series)

When to use which type of Animation

Property Animation Concepts

Inside of Property Animation. Courtesy of Google.

Animations Using ValueAnimator

final TextView animateTextView = (TextView)findViewById(R.id.tv_animate);

ValueAnimator valueAnimator = ValueAnimator.ofFloat(0f, 500f);
valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator()); // increase the speed first and then decrease
valueAnimator.setDuration(2000);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float progress = (float) animation.getAnimatedValue();
animateTextView.setTranslationY(progress);
// no need to use invalidate() as it is already present in //the text view.
}
});
valueAnimator.start();
Courtesy of Giphy
                   /res/animator/value_animator_ex.xml<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:valueFrom="0f"
android:valueTo="500f"
android:valueType="floatType" />
----Activity Code----ValueAnimator valueAnimator = (ValueAnimator) AnimatorInflater.loadAnimator(
this, R.animator.value_animator_ex);

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float progress = (float) animation.getAnimatedValue();
animateTextView.setTranslationY(progress);
}
});

valueAnimator.start();

Animations Using ObjectAnimator

TextView animateTextView = (TextView) findViewById(R.id.tv_animate);

ObjectAnimator textViewAnimator = ObjectAnimator.ofFloat(animateTextView, "translationY",0f,500f);
textViewAnimator.setDuration(2000);
textViewAnimator.setInterpolator(new AccelerateDecelerateInterpolator());
textViewAnimator.start();
                /res/animator/object_animator_ex.xml<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000" android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:propertyName="translationY"
android:valueFrom="0f"
android:valueTo="500f"
android:valueType="floatType" />
----Activity Code----

TextView animateTextView = (TextView) findViewById(R.id.tv_animate);

ObjectAnimator textViewAnimator = (ObjectAnimator) AnimatorInflater.loadAnimator(AnimationActivity.this, R.animator.object_animator_ex);
textViewAnimator.setTarget(animateTextView);
textViewAnimator.start();

Doing Multiple Animations at a time

   ---------perform animation on search icon click ----------// take to leftmost position
DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
int modifierX = -(displayMetrics.widthPixels - v.getWidth());
private static final int SEARCH_ANIMATION_DURATION = 1000; // 1 secObjectAnimator searchIconLeftAnimation = ObjectAnimator.ofFloat(v, "translationX", modifierX);
searchIconLeftAnimation.setDuration(SEARCH_ANIMATION_DURATION);

ObjectAnimator logoFadeOutAnimator = ObjectAnimator.ofFloat(mAppLogo, "alpha", 1f, 0f);
logoFadeOutAnimator.setDuration(SEARCH_ANIMATION_DURATION);

ObjectAnimator cancelImageFadeInAnimator = ObjectAnimator.ofFloat(mIvCancelSearch, "alpha", 0f, 1f);
cancelImageFadeInAnimator.setDuration(SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextAnimator = ObjectAnimator.ofFloat(mEtSearch, "alpha", 0f, 1f);
searchEditTextAnimator.setDuration(SEARCH_ANIMATION_DURATION);

AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(searchIconLeftAnimation).with(logoFadeOutAnimator);
animatorSet.play(searchIconLeftAnimation).with(cancelImageFadeInAnimator);
animatorSet.play(searchIconLeftAnimation).with(searchEditTextAnimator);

animatorSet.start();
---------reverse all the animations on cancel click ----------ObjectAnimator searchIconRightAnimation = ObjectAnimator.ofFloat(mIvSearch, "translationX", 0);
searchIconRightAnimation.setDuration(SEARCH_ANIMATION_DURATION);

ObjectAnimator logoFadeInAnimator = ObjectAnimator.ofFloat(mAppLogo, "alpha", 0f, 1f);
logoFadeInAnimator.setDuration(SEARCH_ANIMATION_DURATION);

ObjectAnimator cancelImageFadeOutAnimator = ObjectAnimator.ofFloat(mIvCancelSearch, "alpha", 1f, 0f);
cancelImageFadeOutAnimator.setDuration(SEARCH_ANIMATION_DURATION);

ObjectAnimator searchEditTextFadeInAnimator = ObjectAnimator.ofFloat(mEtSearch, "alpha", 1f, 0f);
searchEditTextFadeInAnimator.setDuration(SEARCH_ANIMATION_DURATION);

AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(searchIconRightAnimation).with(logoFadeInAnimator);
animatorSet.play(searchIconRightAnimation).with(cancelImageFadeOutAnimator);
animatorSet.play(searchIconRightAnimation).with(searchEditTextFadeInAnimator);

animatorSet.start();
animatorSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
// do anything before animation start
}

@Override
public void onAnimationEnd(Animator animation) {
// do other stuff after animation ends
}

@Override
public void onAnimationCancel(Animator animation) {
// do something when animation is cancelled (by user/ developer)
}

@Override
public void onAnimationRepeat(Animator animation) {
// do something when animation is repeating
}
});

When performing multiple animations on a single view

animateTextView.animate().rotation(360f).y(500f).setDuration(2000);     ----------------------------VS-----------------------------
ObjectAnimator rotationAnimator = ObjectAnimator.ofFloat(animateTextView, "rotation", 360f);
rotationAnimator.setDuration(2000);
ObjectAnimator translateAnimator = ObjectAnimator.ofFloat(animateTextView, "translationY", 500f);
translateAnimator.setDuration(2000);
AnimatorSet set = new AnimatorSet();
set.playTogether(rotationAnimator,translateAnimator);
set.start();

Does animation makes my app slow or will it surpass the 16ms draw window time? Is there any overhead on the performance ?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store